White background4.69:1
4.69
contrast ratio on a white background
ElementAAAAASmall textLarge textUI element
Color picker online
Choose any color in the square or paste a code and copy its HEX, RGB, HSL or OKLCH value. With shades, tones, harmonies and an eyedropper to grab colors from your screen.
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.
Compound
Compound harmony blends analogous colors with their split complements, producing a rich yet balanced palette.
Tones
Tones share the same hue but vary in saturation, creating a cohesive and versatile palette.
Monochromatic
Monochromatic harmonies use different lightnesses and saturations of a single hue for a very elegant result.
Custom
A custom arrangement of five colors distributed 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
88% similar
1.3% of men, 0.02% of women
Deuteranopia
86% similar
1.2% of men, 0.01% of women
Tritanopia
85% similar
0.001% of men, 0.03% of women
Achromatopsia
76% 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 background4.48:1
4.48
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.
How to use the color picker
1. Choose the hue
Drag the handle on the color bar to pick the hue: reds, yellows, greens, blues… It is the full turn of the color wheel, from 0° to 360°.
2. Adjust saturation and brightness
In the large square, move the dot to the right for a more intense color and up for a brighter one. The bottom edge is always black.
3. Copy the code
Pick the format (HEX, RGB, HSL or OKLCH) and copy it in one click. If you already have a code, paste it in the field above and the picker jumps to that color.
Which color format to use
Here is #2C71DE in the most common formats, and what each one is for.
| Format | Value | What it is for |
|---|---|---|
| HEX | #2C71DE | The standard in CSS, HTML and design tools such as Figma: six hexadecimal digits. |
| RGB | rgb(44, 113, 222) | Red, green and blue from 0 to 255. Handy in code and when you need transparency. |
| HSL | hsl(217, 73%, 52%) | Hue, saturation and lightness. The easiest way to make lighter or darker variants of a color. |
| HSV / HSB | hsv(217 80 87) | Hue, saturation and value (also HSB). The model behind the picker square and many design apps. |
| OKLCH | oklch(0.5663 0.1805 259.49) | The modern CSS format: lightness looks even to the eye, ideal for scales and color systems. |
| CMYK | C80 M49 Y0 K13 | Cyan, magenta, yellow and black for print. It is an approximate conversion, so confirm it with your printer. |
Grab any color from your screen
With the eyedropper you can capture the exact color of anything you have open: a website, a screenshot, a document… Click the eyedropper icon, click anywhere and the picker gives you its code instantly.
It works in Chrome, Edge and other Chromium-based desktop browsers. If the color is in a photo, upload it to the image color picker and extract its full palette.
Open the image color pickerMore 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:
- Red
- Green
- 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
A tool to choose a color visually, with a saturation and brightness square and a hue bar, and get its exact code in HEX, RGB, HSL or other formats for design or code.
A way of writing a color with six hexadecimal digits after the # sign: two for red, two for green and two for blue. For example, #2C71DE.
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.
Use the picker eyedropper to capture any pixel on your screen (in desktop Chrome and Edge). If the color is in a photo, upload it to the image color picker.
Related tools
Color wheel
Explore harmonies on an interactive wheel and build balanced palettes from one base color.
Try it nowHTML colors
Browse HTML/CSS named colors with ready-to-copy Hex, RGB and HSL values.
Try it nowHex to RGB
Convert Hex codes to RGB instantly for CSS, design tools and handoff.
Try it now