Color Picker

Convert colors between HEX, RGB, and HSL formats. Interactive color picker.

Three linked representations of one color — HEX, RGB, and HSL — where editing any field updates the other two immediately, with a live swatch and copy buttons that emit CSS-ready strings.

What the HEX field accepts

The field converts only when it holds a full 7-character value: a leading # followed by six hex digits. The #F73 shorthand is not expanded, and 8-digit #RRGGBBAA values are not parsed — there is no alpha anywhere in this tool. While you are mid-edit the other fields simply hold their last valid state, so a half-typed value never corrupts anything. RGB inputs clamp to 0-255 and H clamps to 0-360, with S and L clamped to 0-100; non-numeric input in a number field is treated as 0.

Why HSL round trips can shift a color

HSL values here are rounded to integers — whole degrees for hue, whole percents for saturation and lightness — because that is how designers actually write them. The cost is precision: integer HSL cannot represent every one of the 16.7 million 24-bit RGB colors. Convert #1E90FF to HSL and you get hsl(210, 100%, 56%); convert that back and you land on #1F8FFF — red and green each drifted by one. This matters if a brand guide specifies an exact hex value: do your reasoning in HSL (it is the far better space for thinking about "same hue, lighter" relationships) but store and ship the hex or RGB value, and never round-trip a locked-down brand color through the HSL fields.

Full conversion
Input: #F97316
Output: rgb(249, 115, 22) · hsl(25, 95%, 53%)
The tool's default color, verified against Python's colorsys.
Round-trip drift
Input: #1E90FF → HSL → back to HEX
Output: #1F8FFF
Integer rounding in HSL loses one step in R and G. Visually identical, byte-different.

Questions people ask

What exactly do the Copy buttons put on the clipboard?

A CSS-ready string for each representation: the hex field's current value (conversions always emit uppercase, like #F97316; a value you typed yourself is copied exactly as you entered it), an rgb() function with spaces after the commas, and an hsl() function with percent signs on S and L. All three paste directly into a stylesheet without editing.

Why does adjusting S or L sometimes snap H to 0?

Hue is mathematically undefined for pure grays — when saturation hits 0, any hue produces the same color, and converting back from RGB reports hue 0. Your hue is not lost in RGB terms; there is simply no hue left to report.