Color Converter

Your designer handed you a color in HSL because that's what the design tool exports. The CSS variable system in the codebase is RGB. The brand guidelines list everything in hex. None of these are hard to convert, but doing it three times for a single accent color while context-switching between Slack, the editor, and a color picker burns more time than the actual styling change.

Drop a color in any of the four formats — HEX, RGB, HSL, or named CSS — and get the rest back. The conversions are lossless within the standard 8-bit-per-channel sRGB space. The named CSS column shows you if your custom hex happens to be one of the 147 named colors (it usually isn't, but "rebeccapurple" gets used more than you'd expect).

The math under the hood: HEX is a base-16 representation of RGB. #FF8800 means R=255, G=136, B=0. RGB to HSL involves finding the max and min channel values to compute lightness, then deriving saturation from the spread, and finally computing the hue angle from where the max sits. The reverse — HSL to RGB — uses the chroma value (saturation × the lightness factor) to walk back to channel intensities. The named CSS colors are a fixed table of 147 entries from the CSS Color Module Level 4 spec; they're aliases for specific hex values, and the lookup is just a table check.

A worked example: paste in #4A90E2. Convert to RGB: 74, 144, 226. Convert to HSL: hue 212 degrees (a blue), saturation 71%, lightness 59%. Convert to nearest CSS named color: doesn't match exactly, but cornflowerblue (#6495ED) is close. Now you can switch among representations without re-checking your work — useful when a teammate references the color in one notation and you need to find it in code in another.

Where conversions get sketchy: anywhere outside sRGB. Wide-gamut spaces like Display P3, Rec.2020, and the new CSS Color Module 4 specs (oklch, lab, lch) describe colors that don't map cleanly to plain hex. Modern CSS supports them with the color() function and oklch(), but a hex-only workflow will lose information for any color outside the sRGB gamut. For most web work this doesn't matter — sRGB covers the common case and is what most monitors actually display anyway. For HDR, mobile content with wide-gamut displays, or video work, the conversions here aren't sufficient and you'll need a tool that handles the broader color spaces explicitly. The named-color list also dates back to the early web and includes some genuinely peculiar entries; "papayawhip" is in there, as is "rebeccapurple" (added in 2014 as a memorial).