White background3.64:1
3.64
contrast ratio on a white background
ElementAAAAASmall textLarge textUI element
Color Picker
Find any color plus its shades, tints, tones and harmonies. Enter Hex, RGB, HSL or OKLCH and copy values instantly.
Color Conversion
View this color's code in ten different formats, ready to copy.
Color Harmonies
Color harmonies are pleasing color schemes created according to their position on a color wheel. Learn more about color harmonies
Analogous
Analogous color schemes use three colors next to each other on the color wheel. They usually match well and create serene, comfortable designs.
Complementary
Complementary color schemes use two opposite colors on the color wheel. They usually create a high-contrast, vibrant look.
Split complementary
Split complementary schemes use a base color plus the two colors adjacent to its complement. You get contrast with less tension than pure complementary pairs.
Triadic
Triadic color schemes use three colors equally spaced around the color wheel. They tend to be vibrant while staying balanced.
Tetradic
Tetradic (rectangular) schemes use four colors arranged into two complementary pairs. They are rich schemes with lots of variation.
Square
Square color schemes are similar to tetradic, but with all four colors spaced evenly around the color wheel.
Color Variations
View this color’s shades, tints, tones, hues and temperatures.
Shades
A shade is created by adding black to a base color, increasing its darkness. Shades appear more dramatic and richer.
Tints
A tint is created by adding white to a base color, increasing its lightness. Tints look pastel and less intense.
Tones
A tone is created by adding gray to a base color, reducing its saturation. Tones look more sophisticated and complex than pure hues.
Hues
A hue is the basic family of a color on the wheel, from red to violet. These hues are neighboring variations of your base color.
Temperatures
Colors are often divided into cool and warm by how we perceive them. Greens and blues feel cool, while reds and yellows feel warm.
Blindness Simulator
See how people with color blindness perceive this color, so your color combinations are accessible to everyone. Learn more about color blindness
Protanopia
79% similar
1.3% of men, 0.02% of women
Deuteranopia
78% similar
1.2% of men, 0.01% of women
Tritanopia
90% similar
0.001% of men, 0.03% of women
Achromatopsia
70% similar
0.003% of the population
Contrast Checker
Check this color's contrast on white and black backgrounds. For more options, use the full contrast checker
Black background5.77:1
5.77
contrast ratio on a black background
ElementAAAAASmall textLarge textUI element
Similar colors
Find CSS named colors that are visually close to this one.
How to pick and convert a color
The color picker finds an exact color in three ways: click the saturation/lightness square, drag hue on the slider, or enter a Hex, RGB, HSL or OKLCH code you already know.
Unlike the color wheel, built to explore harmonies by rotating a wheel, this tool is for when you already have a specific color in mind and need its exact code or to convert it to another format, whether for CSS, for print, or for any other use.
More than 16 million colors
It may sound exaggerated, but a modern monitor can display 16,777,216 different colors.
That is because the RGB system uses three color channels:
R
Red
G
Green
B
Blue
Each channel can have a value between 0 and 255.
Combining those three values gives exactly:
256 × 256 × 256 = 16,777,216 colors.
Even though many of them look similar, this huge range lets you find the exact tone you need, with extraordinary precision, whatever your project.
That is why a good color picker becomes an essential tool.
Frequently asked questions
Enter the Hex in the picker. The conversion table automatically shows RGB, HSL, HSV, OKLCH and CMYK ready to copy.
HSL uses lightness, which is mixing with white or black, and HSB (also called HSV) uses brightness, or value. Both start from hue and saturation, but the third axis is calculated differently, so the same color can show different numbers depending on the model you use.
OKLCH is a perceptual color space: L (lightness), C (chroma) and H (hue) follow how we actually see color. RGB describes screen light (red, green, blue) and HSL reorganizes that same model in a more intuitive way, but neither guarantees that two colors with the same lightness look equally bright. OKLCH does, which makes more even palettes and more natural gradients possible.
CMYK (cyan, magenta, yellow and black) is the print model: it mixes inks on paper. Your monitor works in RGB, which is light. The picker shows the CMYK code for when you need to prepare something for print or a print-ready PDF. On screen, the right format is still RGB, Hex, HSL or OKLCH.
Yes — the eyedropper icon opens the system color picker so you can capture any color visible on screen.