About this tool
A color picker maps a color across the formats CSS understands. This one is built around an HSV model: a saturation/value square sets how vivid and how bright the color is, a hue slider rotates around the color wheel, and an alpha slider sets opacity. Every change is converted with culori into four canonical strings — HEX (#rrggbb, or #rrggbbaa when alpha is below 1), rgb()/rgba(), hsl()/hsla() and the perceptually-uniform oklch() — so the same color is ready to drop into any stylesheet or design token.
Use it to grab an exact value off a mockup, translate a hex code a designer sent into the rgb() or hsl() your code expects, dial in a semi-transparent overlay and read off the rgba(), or convert a legacy color into modern oklch() for wide-gamut CSS. Paste any CSS color string — a hex code, a named color like rebeccapurple, or a full rgb()/hsl() expression — and the whole picker syncs to it; recently picked colors stay in a clickable row for the rest of your session.
Everything runs in your browser — colors are never uploaded, and the recent-colors row is kept in memory only, so it clears when you close the tab.
Frequently asked questions
What is the difference between HSL and OKLCH?
HSL describes a color by hue, saturation and lightness in the sRGB space, but equal lightness values can look very different in brightness. OKLCH uses a perceptually-uniform model, so its lightness and chroma values match how the eye actually sees the color and stay consistent across hues.
How do I represent transparency in a hex color?
Append a two-digit alpha value to the six-digit hex, giving #rrggbbaa — for example #ff000080 is red at about 50% opacity. This 8-digit form is supported in all modern browsers; when alpha is fully opaque the picker emits the shorter #rrggbb.
Can I paste a named CSS color like rebeccapurple?
Yes. The hex field accepts any valid CSS color string — named colors, hex codes, and rgb()/hsl()/oklch() expressions — and a valid entry instantly syncs the square, sliders and every output format.