Color Picker

How to use the color picker

1. Click the swatch under Pick a color to open your browser’s color picker, then choose a color. You can also type or paste a value in the Color code field: a HEX code such as #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) or a CSS name such as tomato.
2. The large preview updates immediately, with the HEX code written in black or white, whichever reads better on that background.
3. Under Color codes, copy the format you need with the Copy button next to it: HEX, RGB, HSL, HSV or CMYK.
4. Click Random color when you want inspiration, or Pick from screen (in browsers that support it, such as Chrome and Edge) to sample any pixel on your screen, including other windows.

Everything happens in your browser: no color or image is sent anywhere.

What each color code means

• HEX is the six-digit hexadecimal notation used in HTML and CSS. Each pair of digits is one channel (red, green, blue) from 00 to FF, so #1E90FF means red 30, green 144, blue 255.
• RGB gives the same three channels as decimal numbers from 0 to 255. It is what most design software and programming libraries expect.
• HSL describes a color by hue (an angle from 0° to 360° on the color wheel), saturation and lightness. It is handy for making a color lighter or darker by changing a single number.
• HSV (also called HSB) uses hue, saturation and value (brightness). It is the model behind the color squares in Photoshop, Figma and many other editors.
• CMYK expresses the color as cyan, magenta, yellow and black ink percentages.

About the CMYK values

The CMYK codes are a naive conversion: K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K), and the same for M and Y. This is the standard textbook formula, but it does not use an ICC profile. Real printing depends on the press, the paper and the inks, so a printer will convert your colors with its own profile and the result may differ. Use these numbers as a starting point, not as a proof for print.

Reading the contrast ratios

Below the HEX code, the preview shows the Contrast on white and Contrast on black, computed with the WCAG 2 relative-luminance formula. A ratio of 4.5:1 or more is needed for normal body text at level AA, and 3:1 for large text and interface elements. If your color only reaches 3:1 on white, keep it for big headings or icons and use a darker shade for text.

Tips

• You can paste hex codes without the #: 1e90ff works too, as do short forms such as f60.
• Values with transparency, such as rgb(0 0 0 / 50%), are accepted; the picker shows the opaque color.
• The browser’s own color dialog varies between systems. If you need a precise value, typing it in the Color code field is always exact.