colorpicker.uk
⌕

CSS Color Picker

Pick a color and copy its CSS code, plus HEX, RGB, HSL and more.

1Pick your color
2Fine-tune or type a value
3Copy the code

How to use the CSS color picker

  1. Pick a color on the spectrum or type a value you already have.
  2. Read it back in whichever CSS syntax your stylesheet uses, from HEX to oklch().
  3. Add transparency with the alpha control when you need an rgba() or slash-alpha value.
  4. Copy the line and paste it straight into a color, background or border property.

What the CSS color picker gives you

The CSS color picker turns one chosen color into every syntax a browser will accept, so you never have to hand-convert. Grab it as a HEX for a quick fix, an hsl() you can hand-tune, or an oklch() for a design token, and use the Color Converter when you need them all side by side.

What counts as a CSS color?

A CSS color is any value the browser accepts wherever a <color> type is allowed, such as color, background-color or border. That covers named keywords, every numeric format, and special words like transparent. The full list is defined in CSS Color Level 4, which is why newer formats like oklch() now sit alongside old favourites like #fff.

Every color format CSS accepts

SyntaxExampleNotes
NamedtomatoAbout 148 keywords
HEX#1e90ff3, 4, 6 or 8 digits
rgb()rgb(30 144 255)Channels 0 to 255
hsl()hsl(210 100% 56%)Hue plus two percents
hwb()hwb(210 0% 0%)Hue, whiteness, blackness
lab() / lch()lch(56% 68 296)Perceptual, wide gamut
oklch()oklch(62% 0.2 264)Modern, for tokens
color()color(display-p3 0 .5 1)Wide-gamut spaces

How modern CSS color syntax works

CSS Color 4 changed the punctuation. The values are now separated by spaces instead of commas, and the alpha moves to the end after a slash. Both of these describe the same blue at half opacity:

Modern: rgb(30 144 255 / 50%) — Legacy: rgba(30, 144, 255, 0.5). The comma form still works everywhere, so old stylesheets keep running.

Special CSS color keywords

  • transparent is a fully see-through color, handy for fading a background to nothing.
  • currentColor reuses the element’s own text color, so a border or icon tracks the font color automatically.
  • inherit, initial and unset are the CSS-wide keywords that pull a color from the parent or reset it.

CSS color picker vs a plain HEX picker

A HEX picker gives you one format; a CSS color picker is broader because stylesheets accept many. Use HEX for the most compatible value, hsl() when you want to nudge lightness by hand, rgba() or slash-alpha for transparency, and oklch() when you are building a consistent palette. To check a pairing stays readable, run it through the Contrast Checker.

Which CSS color format actually deserves a recommendation

Honestly there is no single winner; the right format depends on the job. HEX suits a quick, compatible value, HSL is best for tweaking by hand, RGBA covers transparency, and OKLCH is the one for a palette that has to stay balanced. Since the browser accepts them all, the smart move is to use whichever makes the current task easiest.

Which CSS color format should I use?

HEX is the most common and widely compatible, HSL is the easiest to adjust by hand, and OKLCH is best for building consistent palettes. All are valid CSS.

Do I need commas in rgb() and hsl()?

No. Modern CSS uses spaces, like rgb(30 144 255), with the alpha after a slash. The older comma syntax still works for backward compatibility.

Are named colors reliable?

Yes. The standard keyword set is supported in every browser, though HEX and the numeric formats give you far more precision.

What is currentColor?

A keyword that resolves to the element’s text color, so borders, outlines and SVG icons can follow the font color without repeating a value.

You might also like