Color picker
Pick any color and get its HEX, RGB, HSL and OKLCH values, shades and matching colors.
Values
- HEX
#e879f9 - RGB
rgb(232 121 249) - HSL
hsl(292 91% 73%) - HSB / HSV
hsb(292, 51%, 98%) - OKLCH
oklch(74.8% 0.207 322.2) - CMYK
cmyk(7%, 51%, 0%, 2%)
Contrast with white: 2.46:1 · with black: 8.53:1 · check contrast
Shades and tints
Harmonies
Opposite on the color wheel: strong contrast.
Click any swatch to make it the current color.
Color models
One color, many ways to write it
Screens mix red, green and blue light, and every format below is a different way to describe that mix:
- HEX (
#e879f9): the red, green and blue amounts in base 16. The most common format on the web. - RGB (
rgb(232 121 249)): the same amounts from 0 to 255, easy to read and to change in code. - HSL (
hsl(292 91% 73%)): hue (position on the color wheel), saturation and lightness. Handy for tweaking a color by hand. - HSB/HSV: hue, saturation and brightness, the model used by the color pickers in Photoshop and Figma.
- OKLCH (
oklch(74.8% 0.207 322.2)): lightness, chroma and hue in a perceptually even space. Equal lightness numbers really look equally light, which makes it the best choice for design systems. - CMYK: cyan, magenta, yellow and black ink, for print. A rough guide; printers use color profiles.
Shades, tints and harmonies
The shade scale keeps your color's hue and intensity and changes only its lightness, from 50 (almost white) to 800 (very dark), just like the scales in popular design systems. Harmonies rotate the hue around the color wheel to find colors that go well together.
Want to build a full palette? Try the palette generator. Using a color for text? Check it with the contrast checker first.
More tools
Work with your colors
Contrast checkerCheck text and background colors against WCAG AA and AAA, and fix failing ones. Palette generatorBuild a color palette from harmony rules, with shades and CSS variables.
Frequently asked questions
How do I pick a color from my screen?
Click "Pick from screen" and then click anywhere on your screen, even outside the browser. This uses the eyedropper built into Chrome, Edge and Opera on desktop. In other browsers, the color swatch opens your system's color picker, which often has its own eyedropper.
What is the difference between HEX, RGB and HSL?
They describe the same colors in different ways. HEX and RGB give the amounts of red, green and blue (HEX in base 16). HSL describes hue, saturation and lightness, which is easier to adjust by hand: change the lightness to make a color lighter or darker.
What is OKLCH and why use it?
OKLCH is a modern color model designed to match how people perceive color. Colors with the same lightness value really look equally light, which makes it great for building shade scales and palettes. All modern browsers support oklch() in CSS.
Are the CMYK values accurate for printing?
They are a straightforward mathematical conversion, useful as a starting point. Real print colors depend on the paper, inks and color profile, so ask your printer for a proof or use their profile in your design software.
Which color formats can I type in?
Hex codes (#f0c, #ff00cc, with or without #), rgb(), hsl(), and anything else your browser understands in CSS, including color names like teal or rebeccapurple and oklch() values.
Is it free to use the colors commercially?
Of course. Colors can't be owned, and everything you create here is yours to use anywhere, with no attribution needed.