Three notations, one color
HEX, RGB, and HSL are three ways of writing the same sRGB color, converting between them changes nothing about how it displays. What changes is how easy the color is to think about:
| Notation | Reads as | Best for |
|---|---|---|
HEX #FF7F50 | Compact RGB in hex | Design tokens, copy-paste |
RGB rgb(255 127 80) | Channel intensities | Programmatic mixing, canvas |
HSL hsl(16 100% 66%) | Hue / saturation / lightness | Human tweaking, deriving variants |
A 3-digit HEX like #F70 is just shorthand, each digit doubles to #FF7700. And remember HSL’s units: hue is degrees (0–360), but saturation and lightness are percentages: hsl(200, 0.8, 0.5) is wrong; it must be hsl(200, 80%, 50%).
The color-mixing trap
A subtle gotcha that bites anyone interpolating colors: you can’t correctly mix two colors by averaging their RGB values. HEX/RGB values are stored gamma-encoded in sRGB, so the naive midpoint of two colors comes out darker than it should, and a red→green blend passes through a dull gray. Correct mixing happens in linear RGB (remove gamma, mix, re-apply) or, better, in a perceptual space. Modern CSS handles this for you: color-mix(in oklch, red, blue) produces the vivid purple your eye expects instead of the muddy sRGB midpoint.
Alpha and named colors
This converter focuses on opaque colors across HEX, RGB, and HSL. To add transparency, extend the output yourself. rgb(255 0 0) → rgba(255 0 0 / 0.5), or #FF0000 → #FF000080 (the last two hex digits are alpha). For CSS named colors like coral or tomato, look up the HEX equivalent (coral = #FF7F50) and paste that in. Everything runs locally in your browser, with a live preview so you can confirm the converted value is the color you meant.