How to use the color picker
- Click the color swatch to open your system color picker, or type a value in the box. HEX (such as #1a73e8), RGB (such as rgb(26, 115, 232)) and HSL (such as hsl(214, 82%, 51%)) are all understood.
- Read the color in every format in the table: HEX, RGB, HSL and CMYK. Colors with transparency, like #1a73e880, also show their alpha forms.
- Press Copy beside a format to copy that value, or Copy all formats to copy the whole list.
- Click any chip under Shades or Tints to make it the current color. Shades mix the color with black and tints mix it with white, in steps of 10 percent. If your browser has an eyedropper, a button appears to pick any color on your screen.
Formula
HSL: max and min of R, G, B (each divided by 255); lightness L = (max + min) / 2; saturation S = (max - min) / (1 - |2L - 1|)
CMYK: K = 1 - max(R, G, B); C = (1 - R - K) / (1 - K), and the same for M and Y
shade by p percent: value x (100 - p) / 100; tint by p percent: value + (255 - value) x p / 100
R, G and B are written as 0 to 1 in the HSL and CMYK lines. Hue is the angle of the dominant channel on the color wheel in degrees. Results are rounded half up to whole numbers for display.
Worked example
Take the blue #1a73e8. In RGB it is 26, 115 and 232, since 1a, 73 and e8 in hexadecimal are 26, 115 and 232. The largest channel is blue, so hue is about 214.1 degrees, saturation 81.7 percent and lightness 50.6 percent, which rounds to hsl(214, 82%, 51%). The simple CMYK conversion gives cmyk(89%, 50%, 0%, 9%).
The 50 percent shade, mixing with black, is rgb(13, 58, 116). The 50 percent tint, mixing with white, is rgb(141, 185, 244). Against a white page, this blue has a contrast ratio of about 4.51 to 1, and the tool reports black as the more readable plain text color on top of it.
What each format means
HEX is a six-digit shorthand for red, green and blue, two digits each, and is the form most web design tools use. A three-digit form like #fff doubles each digit to make #ffffff. RGB gives the same three channels as numbers from 0 to 255. HSL describes a color by hue (the position on the color wheel from 0 to 360 degrees), saturation (how vivid) and lightness (how light or dark), which makes it easier to reason about when you want a lighter or duller version of a color.
CMYK is used for print. The conversion here is the plain mathematical one, from screen red, green and blue to cyan, magenta, yellow and black percentages. A real printer uses a color profile that changes the numbers, so treat CMYK here as a starting point for print work, not an exact match.
The tool works in sRGB, the standard color space of web pages. Colors in wide-gamut spaces or color-managed photos are not converted.
Shades, tints and readable text
Shades and tints are made by mixing the chosen color with black or white. Nine steps from 10 to 90 percent give a quick palette that always stays in the same family. Each chip shows its HEX value, picks a readable text color for itself, and becomes the active color when clicked.
The preview names the best plain text color, black or white, whichever has the higher contrast ratio against your color, using the WCAG relative luminance formula. For checking a specific pair of text and background colors against accessibility thresholds, use the color contrast checker.
Privacy and the eyedropper
Everything is calculated in your browser, and the last color you used is remembered in this browser only. The eyedropper button appears only in browsers that offer that feature, and you choose a pixel yourself, so the page never captures your screen. To get colors from a photo, see the image converter and crop image tools for preparing the picture first.
Assumptions and limits
- Colors are in the sRGB space used by web pages. Named colors such as red are not parsed; use a HEX, RGB or HSL value.
- HSL and CMYK are shown as whole numbers, rounded half up, so converting them back can differ from the original by 1 in a channel. HEX is exact.
- CMYK uses the simple formula without a printer profile. Printed colors will differ.
- Alpha (transparency) is accepted in 8-digit HEX, rgba() and hsla(), and shown in its own rows. The shade, tint and contrast figures treat the color as solid.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For #1a73e8 the pairs 1a, 73 and e8 are 26, 115 and 232. The tool shows this as soon as you type the HEX value.
What does HSL stand for?
Hue, saturation and lightness. Hue is an angle on the color wheel from 0 to 360 degrees, saturation is how vivid the color is from 0 to 100 percent, and lightness runs from black at 0 percent through the pure color near 50 percent to white at 100 percent.
Why does my CMYK result not match my printer?
The tool uses the plain conversion formula between screen colors and ink percentages. Printers use color profiles for their inks and paper, which change the real numbers, so use this CMYK as a rough guide and check a proof.
Can I pick a color from anywhere on my screen?
Only if your browser has the eyedropper feature, in which case a button appears. If it does not, use the system picker from the swatch, or type the HEX value from the app you are copying from.
How are shades and tints calculated?
A shade at 20 percent keeps 80 percent of each RGB channel, pulling the color toward black. A tint at 20 percent moves each channel 20 percent of the way to 255, pulling it toward white. Results are rounded half up to whole numbers.