Monthly Color Scheme Digest
Every 1st, get all the new schemes posted
during the previous month sent to your inbox.
Company and Product Updates
Whenever something big happens, or new features launch, you can be the first to know.
Relaunch Alert
As soon as the new Mac and PC version is ready, we'll
send you a one time email to get you started.
We respect your inbox as much as we respect a well-crafted color scheme. Your email is safe with us ‐ no third-party nonsense, no spam. Easily unsubscribe with one click, no hard feelings.
Color Schemer has been launched
on your Mac App Store
RYB Color Wheel
& Palette Generator
Turn any color into a complete palette. Instantly generate harmonious combinations, monochromes, contrast checks — and get insights like which brands use your color.
Monochromes
Harmonious RYB Color Palettes
Leverage these harmonious complementary, split complementary, triadic, and tetradic color schemes generated from the RYB color wheel for your selected color.
Complementary
Split Complementary
Triadic
Tetradic
Lightness Ramp
Golden Angle
Analogous
Complementary Mix
Categorical
Random Walk
Max Distinct
Golden Angle
Complementary Mix
RYB Color Wheel
Complementary Mix
Pigment Neutrals (Mud)
Temperature Walk
Lightness Tints
Best of All
Midnight Pop
Mud & Ember
Temperature Drift
Tiered Triad
Pastel Field
Gallery Wall
Deep Water
Standard Scene
Candle & Twilight
Simulated Annealing
Electrostatic Physics
Markov Chain
Circle of Fifths
Palette Probability
Chromatic Chord
Spectral Illumination
Colorblind-Safe Contrast
Apparent Lightness
Thin-Film Iridescence
Categorical Color
Brands & culture using similar colors
View palettes of famous brands, sports teams, universities and country flags whose signature colors sits close to your selected color on the color wheel. The closest match will show a delta value to show you how close it is, or if its an exact match.
Design system equivalents
Find the nearest color to your selected color in popular design systems.
| System | Token | Hex | ΔE |
|---|---|---|---|
| Ant Design | blue-6 | #1668dc | 3.1 |
| Bootstrap 5 | $blue-500 ($primary) | #0d6efd | 2.1 |
| iOS / Apple HIG | systemBlue (Contrast Light) near-exact | #1e6ef4 | 1.3 |
| Material Design | Blue a400 | #2979ff | 4.3 |
| Open Color | indigo-6 | #4c6ef5 | 4.9 |
| Tailwind CSS | blue-600 | #2563eb | 4.4 |
Contrast & accessibility
Check WCAG 2.2 contrast ratios for black and white text on your selected color, and for your selected color text on black and white. Level AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
White text on your selected color
4.63 : 1 AA pass
Black text on your selected color
4.53 : 1 AA pass
your selected color text on white
4.63 : 1 AA pass
your selected color text on black
4.53 : 1 AA pass
Color blindness simulator
Preview how your selected color may appear with common color vision deficiencies. Simulations are approximations—do not rely on color alone to communicate meaning.
Monochromacy
Achromatopsia
Complete absence of color perception
Incomplete Achromatopsia
Severely reduced color perception
Dichromacy
Protanopia
No functioning red-sensitive cones
Deuteranopia
No functioning green-sensitive cones
Tritanopia
No functioning blue-sensitive cones
Anomalous trichromacy
Protanomaly
Reduced red sensitivity
Deuteranomaly
Reduced green sensitivity
Tritanomaly
Reduced blue sensitivity
Color conversions
Convert your selected color to RGB, HSL, OKLAB, OKLCH, HSV, CMYK, and decimal. Click a copy icon to copy the available value, CSS syntax, or normalized components.
| Model | Value | CSS | Normalized |
|---|---|---|---|
| HEX | #1f6feb | #1f6feb | — |
| RGB | rgb(31, 111, 235) | rgb(31, 111, 235) | 12.2%, 43.5%, 92.2% |
| HSL | hsl(216, 84%, 52%) | hsl(216, 84%, 52%) | 216°, 0.84, 0.52 |
| OKLAB | oklab(56.9% -0.036 -0.199) | oklab(56.9% -0.036 -0.199) | 0.569, -0.036, -0.199 |
| OKLCH | oklch(56.9% 0.202 259.7) | oklch(56.9% 0.202 259.7) | 0.57, 0.202, 260° |
| HSV / HSB | 216°, 87%, 92% | — | 216°, 0.87, 0.92 |
| CMYK | 87, 53, 0, 8 | — | 0.87, 0.53, 0.00, 0.08 |
| Decimal | 2060267 | — | 0x1F6FEB |
Native development color conversions
Convert your selected color into app-ready sRGB and Display P3 snippets for SwiftUI, UIKit, Android XML resources, Jetpack Compose, and Android graphics APIs. P3 rows use converted channel values so the displayed color matches the selected sRGB color.
| Platform | API | Format | Code |
|---|---|---|---|
| iOS | SwiftUI Color | sRGB | Color(red: 0.122, green: 0.435, blue: 0.922) |
| iOS | SwiftUI Color | Display P3 | Color(.displayP3, red: 0.219, green: 0.429, blue: 0.890, opacity: 1.0) |
| iOS | UIKit UIColor | sRGB | UIColor(red: 0.122, green: 0.435, blue: 0.922, alpha: 1.0) |
| iOS | UIKit UIColor | Display P3 | UIColor(displayP3Red: 0.219, green: 0.429, blue: 0.890, alpha: 1.0) |
| Android | XML color resource | sRGB | #FF1F6FEB |
| Android | Jetpack Compose Color | sRGB | Color(0xFF1F6FEB) |
| Android | Jetpack Compose Color | Display P3 | Color(red = 0.219f, green = 0.429f, blue = 0.890f, alpha = 1f, colorSpace = ColorSpaces.DisplayP3) |
| Android | Android graphics Color | Display P3 | Color.valueOf(0.219f, 0.429f, 0.890f, 1f, ColorSpace.get(ColorSpace.Named.DISPLAY_P3)) |
RYB Color Wheel and Palette Generator
Color Schemer Online simulates the RYB color space, which was originally based around mixing color pigments. To use it, just choose a base color and Color Schemer will map it out through the RYB color space to generate a 12-slice color wheel.
Monochromatic and Algorithmic Color Palettes
Color Schemer Online also helps generate a monochromatic set of colors from your base color, also from the RYB color space. One selection gives you a complete set, so you do not have to fine-tune every shade by hand. The color set can be very useful for designing hierarchical user interface elements such as backgrounds, text, borders, and controls.
The generator also applies our experimental color algorithms to create palettes that can have unique varieties but still look good together. You can use any to fill your design.
How to Use the Color Palette Generator
- Enter a HEX color or adjust the base color with the hue, saturation, and lightness controls.
- Review the RYB wheel, monochromatic set, and algorithmic palettes generated from your color.
- Select a curated set of colors for your design.
- Use the WCAG checker to test each text and background color combination.
- Copy the color values in the format you need.
Frequently Asked Questions
What is an RYB color wheel?
An RYB color wheel considers red, yellow, and blue primary colors. Artists and designers historically used these base pigments to mix other colors, and to identify various color relationships.
What is the difference between RYB and RGB?
RYB is historically based on the pigments available to artists, and organizes color in a traditional relationship. RGB is an additive model that is intended to power screen colors by combining red, green, and blue light. While RGB is great for monitors, it is not good for identifying relationships between colors.
How does the color palette generator work?
Color Schemer takes your base color and generates a 12 slice color RYB wheel, a set of monochromes, and many algorithmic color palettes. Everything is recalculated everytime you change the base color.
How do I make a monochromatic color palette?
Select one base color. Color Schemer varies its lightness levels through the RYB color space to generate the monochromatic set for you. You can then copy the complete result without creating the individual steps by hand.
What WCAG contrast ratio should I use?
Under WCAG 2, Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Large text is at least 18 points, or 14 points when bold.
Does passing WCAG contrast make a palette accessible?
Contrast ratios matter to the text and background color pairs. It helps ensure that text is readable even if the reader has vision issues. An accessible interface never relying on color alone to communicate differences, instead should provide clear labels, icons, and indicators.
What is a complementary color in the RYB model?
A complementary color sits opposite another color on the RYB wheel. The main RYB pairs are red and green, yellow and purple, and blue and orange. This is very useful for creating contrast. To create a clear hierarchy, you may still need to adjust lightness or saturation when using them.