Controls

Click or tap and drag on the color square and sliders (the page does not scroll while you drag)
Enter applies a typed color; Esc cancels the edit
Space rerolls a random palette on the Palettes tab
Keys 1-4 answer in Guess the hex; Enter checks or goes to the next round

This free color picker gives you the code for any color in HEX, RGB, HSL, HSV and CMYK, plus the closest CSS color name. It also builds palettes, checks text contrast against WCAG and has a color game. It all runs in your browser, with no sign-up.

How to use the color picker

Pick a color: drag in the big square to choose saturation (left to right) and brightness (top to bottom). The rainbow slider sets the hue and the checkered slider sets the opacity.
Copy a code: each format has its own copy button. When opacity is below 100%, the codes switch to 8-digit HEX, rgba() and hsla().
Type a color: paste or type a color into any box and press Enter. It understands hex codes (#f80, #ff8800, #ff880080), rgb(), rgba(), hsl(), hsla(), hsv(), cmyk() and all 148 CSS color names, such as tomato or rebeccapurple.
From an image: choose From image, pick a photo or screenshot, then tap or drag on it to sample a pixel. The image is read inside your browser and is never uploaded anywhere.
Eyedropper: in browsers that support the EyeDropper feature (such as recent Chrome and Edge on a computer), the Eyedropper button lets you pick a color from anywhere on your screen.
Random color: one press gives you a fresh random color. Recent colors appear as small swatches.

Color palette generator

The Palettes tab makes a palette from your current color in three ways.

Harmony: color wheel rules that turn the hue. Complementary adds the opposite hue (180 degrees). Analogous uses neighbors 30 and 60 degrees each side. Triadic spaces three hues 120 degrees apart, Tetradic (rectangle) uses 0, 60, 180 and 240 degrees, Square uses 90 degree steps and Split-complementary uses the two hues next to the complement (150 and 210 degrees). Monochromatic keeps the hue and changes lightness, while Shades mix your color with black and Tints mix it with white in 15% steps.
Random: press Reroll, or the Space bar, for five new colors. Tap the lock on any color you like and it stays put while the others change.
From image: choose a photo and pick 3 to 8 colors. The tool groups the image’s pixels with k-means clustering and lists the main colors from most to least common.

Tap a swatch to copy its hex code. Save keeps the palette in your browser, Download PNG saves a swatch sheet with HEX, RGB and HSL values, Copy CSS gives you ready-made CSS variables, and Copy link makes a link that opens the same palette.

Contrast checker

Choose a text color and a background color to see their contrast ratio, from 1:1 (no contrast) to 21:1 (black on white). The tool follows the WCAG 2.x formula: each color’s relative luminance is worked out from its red, green and blue values, then the ratio is (lighter + 0.05) divided by (darker + 0.05). It then shows pass or fail for each level:

AA: 4.5:1 for normal text and 3:1 for large text (24px, or about 18.66px bold).
AAA: 7:1 for normal text and 4.5:1 for large text.
UI and graphics: 3:1 for icons, borders and other parts people need to see.

Ratios are cut off, not rounded up, so a color that shows 4.49:1 really does fail AA. For example, #777777 on white is about 4.48:1 and fails AA for normal text, while #767676 is about 4.54:1 and passes. If a pair fails, Fix text color finds the nearest lighter or darker version of your text color that reaches 4.5:1.

The color game

Guess the hex shows a color and four hex codes. Pick the right one in each of 10 rounds. Hard mode uses close colors. Match the color shows a target and three sliders for hue, saturation and lightness. Each of the 5 rounds scores up to 100 points based on the measured color difference. Your best score and recent results are saved in your browser.

Tips

A hex code is three pairs of digits for red, green and blue, from 00 (none) to FF (full). #FF0000 is pure red and #808080 is a middle gray.
CMYK values here use the simple standard formula. Real print colors depend on the printer and paper.

FAQ

Is my image uploaded?

No. The picture is opened and read inside your browser, and it is not saved or sent anywhere. Only your colors, saved palettes and game scores are kept in your browser’s storage.

What does “closest CSS name” mean?

It is the nearest of the 148 named CSS colors by measured color difference, or the exact name if your color matches one.

Want to use your colors? Fill in a picture in Coloring, sketch freely in Drawing, or sort colored liquids in Color Sort.

Color Picker