Color Picker + Converter

Why pasting #fff or "red" into this tool won't work

This converter only accepts two input shapes: full six-digit HEX (#RRGGBB) or comma-separated RGB (rgb(255, 102, 0)). Three-digit shorthand HEX like #fff is valid CSS — browsers expand it to #ffffff automatically — but this tool doesn't do that expansion, so a shorthand value falls straight through to the generic format error instead of converting. Named CSS colors (red, cornflowerblue, rebeccapurple) aren't recognized either; there's no name-to-RGB lookup table behind this tool. If you're pulling a color from a CSS file or design tool that uses shorthand or a named color, expand it to six-digit HEX first.

The RGB → HSL formula this tool actually runs

There's no color library underneath this — it's a hand-written implementation of the standard conversion: find the max and min of the R, G, B channels (each normalized to 0–1), lightness is the average of max and min, saturation is the channel delta divided by 1 - |2L - 1|, and hue comes from a piecewise 60°-per-channel formula depending on which channel is the max. The formula is exact for primary colors, which makes them a good sanity check: pure red #ff0000 converts to exactly hsl(0, 100%, 50%), pure green #00ff00 to hsl(120, 100%, 50%), and pure blue #0000ff to hsl(240, 100%, 50%) — the three hues sit exactly 120° apart on the color wheel, which is the geometric definition of RGB's three primaries.

HEX, RGB, or HSL — which one to actually use

HEX is what design handoffs and CSS files use by default — it's what you'll paste in here most often. RGB matters when you're doing pixel-level work: Canvas ImageData, WebGL uniforms, and most image-processing code all want separate R/G/B channel values rather than a packed string. HSL earns its keep specifically for programmatic color variation — to make a button's hover state a touch lighter, you adjust the L value and leave hue and saturation alone, which is far more predictable than trying to lighten a color by nudging all three RGB channels by hand.

How to use this tool

1. Use the color picker to visually select a color, or type a HEX or RGB value. HSL isn't an accepted input — it's one of the two output formats you get back.
2. Click Convert.
3. View the equivalent values in all three formats.
4. Copy the format you need.

A CSS syntax detail worth knowing

The RGB output here uses the classic comma-separated syntax — rgb(255, 102, 0) — which every browser has always supported. Modern CSS (Color Module Level 4) also allows a space-separated form with a slash for alpha, rgb(255 102 0 / 50%), which some newer linters and formatters now prefer or auto-rewrite to. Both are valid and render identically; if a linter flags this tool's output as using "legacy" syntax, that's a style preference in your toolchain, not a bug in the converted value.