Color Picker and Palette Generator

A color picker with a palette generator built in

This color picker helps you find a color and grab its code in every common notation: HEX, RGB, HSL and CMYK. It also shows the closest CSS color name, nine shades, the classic color harmonies, the contrast against white and black, and it works as a color palette generator for five matching colors.

How to use the hex color picker

1. Click or drag inside the "Saturation and brightness" square, then move the "Hue" slider. Arrow keys work too. "Browser picker" and, in Chrome or Edge on desktop, the "Eyedropper" button are there as extras.
2. Or type a code into the HEX, RGB or HSL field: enter rgb(0,128,0) and you get #008000, which CSS calls green. Each line has a "Copy" button.
3. Under "Shades" and "Color harmonies", clicking a swatch selects it and copies its code.
4. "Generate a palette" (or the space bar) draws five colors. Tick "Lock" under the ones you like and generate again. "Copy HEX codes", "Copy as CSS variables" and "Save palette" do the rest; up to ten palettes stay on your device.

The current color is written into the page address after the # sign, so you can share a link to an exact color. It is also remembered for your next visit.

HEX, RGB or HSL: which one should you use?

All three describe the same screen colors. HEX is the shortest: #ff0000 is seven characters, easy to paste into a stylesheet or a design app. These are the HTML color codes you see in most web pages. RGB lists the amounts of red, green and blue from 0 to 255: rgb(255, 0, 0). HSL splits a color into hue (an angle from 0 to 360°), saturation and lightness: hsl(0, 100%, 50%). It is the easiest to tweak by hand: raise the last number to lighten, turn the first to change color. The site also has dedicated converters for each pair of formats, such as HEX to RGB.

Choosing colors that go together

Picture every hue laid out on a wheel: red at 0°, green at 120°, blue at 240°. Harmonies are just fixed angles on that wheel. Start from pure red, #ff0000, hue 0°:

• Complementary (0 + 180 = 180°): cyan, #00ffff.
• Analogous (330° and 30°): #ff0080 and #ff8000.
• Triadic (120° and 240°): #00ff00 and #0000ff.

The tool adds the tetradic set (every 90°) and the split complementary pair (±150°). For proportions, interior decorators and graphic designers often lean on the 60-30-10 guideline: 60% for the dominant color (walls, page background), 30% for a secondary color (furniture, panels) and 10% for an accent (cushions, buttons).

Readability and contrast

Text is easy to read when its brightness differs clearly from the background. The WCAG accessibility guidelines measure that gap as a ratio from 1:1 to 21:1 (black on white). They ask for at least 4.5:1 for normal text at level AA, because below that, people with reduced vision, or anyone reading a phone in bright sunlight, struggle to make out the letters. Large text (24 px, or 18.66 px bold) needs 3:1. Level AAA raises the bar to 7:1 and 4.5:1.

Some real numbers: pure red #ff0000 on white gives 3.99:1, not enough for body text. Pure blue #0000ff on white reaches 8.59:1 and passes AAA. The gray #767676 on white gives 4.54:1 and is the lightest gray that passes AA.

Keep color blindness in mind too. It affects roughly 8% of men and 0.5% of women, and red and green are the usual pair that gets confused. Never rely on color alone to carry information: a form error needs a message or an icon, not just a red border.

Screen versus print

A screen emits light and mixes red, green and blue (RGB). A printer lays cyan, magenta, yellow and black inks (CMYK) on paper. Many vivid screen colors cannot be reproduced with ink, so a bright blue will print duller. The CMYK code shown here is a theoretical conversion with no color profile.

Common HTML color codes

Frequently asked questions

How do I get the color code of something on my screen?

Use the "Eyedropper" button if your browser shows it: click it, then click the spot you want. The code appears at once in all four notations.

What does "Closest CSS name" mean?

CSS knows 140 colors by name, from aliceblue to yellowgreen. The tool finds the one whose RGB values are nearest to your color and adds "exact match" when the codes are identical.

How are the shades calculated?

They keep the hue and saturation of your color and step the HSL lightness from 90% down to 10%. For pure red, that runs from #ffcccc to #330000.

How do I keep one color while changing the rest of the palette?

Tick "Lock" under that color. On the next draw it stays in place and the new colors are built around its hue. Saved palettes stay in your browser, on this device only.