#1F6FEB #64FD15 Color Schemer has been launched
on your Mac App Store
×
Subscribe for UpdatesMonthly Color Scheme Digest
Every 1st, get all the new schemes postedduring 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'llsend 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.
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.
Base Color
Hex
Hue
Saturation
Lightness
Red
Green
Blue
RYB Color Wheel
Monochromes
#DBE9FF
#B5D1FF
#90BBFF
#6CA4FF
#498FFF
#2D7BF8
#1F6FEB
#0A60DB
#004EBB
#003C93
#002A6B
#001742
Algorithmic Color Palette Generator
Generate unique color palettes from any HEX color using our experimental mathematical algorithms.
Lightness Ramp
#031E4D
#1B3BAD
#1F6FEB
#98A1FA
#DADBF9
Golden Angle
#1F6FEB
#EF521D
#1B7C68
#B761E6
#836811
Analogous
#0584A0
#187FB7
#1F6FEB
#655FE9
#8B50DA
Complementary Mix
#1F6FEB
#8D58D6
#BC4B9C
#CC5156
#BE6B00
Categorical
#1F6FEB
#B63AAB
#C14E0A
#747F15
#1C8881
Random Walk
#1F6FEB
#2B56E8
#5262FF
#5548F9
#654CFD
Max Distinct
#1F6FEB
#EFDC25
#373900
#FF755C
#00F2FF
Golden Angle
#1F6FEB
#E9394B
#0FC232
#8F3FE4
#BC9715
Complementary Mix
#1F6FEB
#5B19D2
#D733C5
#CF5A6A
#D1AD76
RYB Color Wheel
#1F6FEB
#B12BCD
#C54920
#907321
#638422
Complementary Mix
#1F6FEB
#3064CA
#656565
#8E5E35
#A86421
Pigment Neutrals (Mud)
#1F6FEB
#3267C4
#395FAA
#3B56A4
#5A5A5A
Temperature Walk
#7138BF
#1F6FEB
#3081A3
#5C952C
#88992A
Lightness Tints
#0E1A2E
#1A4386
#1F6FEB
#86ADED
#DDE5F1
Best of All
#071122
#1D4D77
#1F6FEB
#53C3AE
#B3F1B4
Midnight Pop
#1F6FEB
#192F2B
#1E375E
#B7700B
#3F3686
Mud & Ember
#1F6FEB
#5B95F4
#3660AE
#223062
#C3750D
Temperature Drift
#4A7620
#277998
#1F6FEB
#9651EE
#DA35B3
Tiered Triad
#1F6FEB
#96351B
#6D561C
#5098F0
#E37133
Pastel Field
#1F6FEB
#B0C382
#86C2CB
#ABB0D8
#D997CC
Gallery Wall
#1F6FEB
#272E39
#C9CED7
#A63E1B
#B2234B
Deep Water
#071122
#1D4D77
#1F6FEB
#53C3AE
#B3F1B4
Standard Scene
#222E38
#556A66
#1F6FEB
#ADA862
#F3E1D5
Candle & Twilight
#242E3B
#4C41AD
#1F6FEB
#A2A966
#FFDED3
Simulated Annealing
#1F6FEB
#FFAD80
#25082C
#5C3F00
#62A552
Electrostatic Physics
#1F6FEB
#C0EBFA
#29015A
#043924
#EBDEFC
Markov Chain
#1F6FEB
#D9DBD4
#E3AA69
#BA5F09
#FEBB00
Circle of Fifths
#1F6FEB
#AC122F
#676710
#0A759A
#3A83FA
Algorithmic Color Pairings
Discover eight unexpected, expressive, and accessible colors to pair with your selected color.
#1F6FEB #3BE0E8 Palette Probability
#1F6FEB #AF002C Chromatic Chord
#1F6FEB #FFF1CB Spectral Illumination
#1F6FEB #FFD4B5 Colorblind-Safe Contrast
#1F6FEB #A47924 Apparent Lightness
#1F6FEB #A0F1C5 Thin-Film Iridescence
#1F6FEB #6DFA2A 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.
Algolia
brand#050F2C
#003666
#00AEFF
#3369E7 ΔE 2.8
#8E43E7
#B84592
#FF4F81
#FF6C5F
xfinity
brand#6138F5
#1F69FF ΔE 3.5
#008558
#FFAA00
#E64F00
#E6004D
#1877F2 ΔE 3.0
Solomon Islands
flag#215B33
#0051BA
#FCD116
#FDFEFE
#C3B21D
#2F71C7 ΔE 4.1
Behance
brand#1769FF ΔE 3.3
Answers
brand#136AD5 ΔE 3.5
#FB8A2E
Meta
brand#0082FB
#0064E0 ΔE 4.1
Designer News
brand#2D72D9 ΔE 2.2
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
Black text on your selected color
4.53 : 1
your selected color text on white
4.63 : 1
your selected color text on black
4.53 : 1
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
Original
Simulated
Achromatopsia
Complete absence of color perception
Original
Simulated
Incomplete Achromatopsia
Severely reduced color perception
Dichromacy
Original
Simulated
Protanopia
No functioning red-sensitive cones
Original
Simulated
Deuteranopia
No functioning green-sensitive cones
Original
Simulated
Tritanopia
No functioning blue-sensitive cones
Anomalous trichromacy
Original
Simulated
Protanomaly
Reduced red sensitivity
Original
Simulated
Deuteranomaly
Reduced green sensitivity
Original
Simulated
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.
