On the web, the same colour can be written in several ways. All three main formats — HEX, RGB and HSL — are supported in every modern browser and CSS preprocessor. The choice is a matter of convenience and team conventions.
HEX
Most popular
#c8002a · #C8002A · #f00 = #ff0000
Hexadecimal encoding of three bytes: #RRGGBB. Each pair is a channel value from 00 to FF. Short form #RGB expands to #RRGGBB. Case-insensitive. Supports transparency: #RRGGBBAA.
RGB
For JS & Canvas
rgb(200, 0, 42) · rgba(200, 0, 42, 0.5)
Three channels Red / Green / Blue, each 0 to 255. The rgba() form adds a fourth parameter — opacity 0 (transparent) to 1 (opaque). Convenient for calculations and animations in JavaScript.
HSL
For designers
hsl(348, 100%, 39%) · hsla(H, S%, L%, a)
Hue — angle on the colour wheel 0–360°. Saturation — 0% grey, 100% pure. Lightness — 0% black, 50% colour, 100% white. Easy to create light/dark variants — just change L.
When to use what
Practice
design system → HSL · Figma → HEX · JS → any
HEX — the standard for design handoff, copied from Figma. RGB — for dynamic styles in JS, Canvas, SVG filters. HSL — for design tokens where you manage variants like --color-500, --color-600.
04
Frequently asked questions
Paste a code such as `#E4002B` and it splits into three channels of two hexadecimal digits each: red, green, blue. The reverse works the same way — type `rgb(228, 0, 43)` and get the HEX back. All three fields are linked, so editing any one of them updates the others and the preview.
HSL describes a colour as hue, saturation and lightness rather than a mix of three channels. It wins whenever you need a variation of a colour you already have: lower the lightness and you get a darker shade, where RGB would mean recalculating all three numbers and eyeballing the result.
The three-digit shorthand expands by doubling each digit: `#f00` becomes `#ff0000` and `#abc` becomes `#aabbcc`. The converter accepts both and always shows the full form. The reverse only works for colours where both digits of every pair happen to match, which is why most codes cannot be shortened.
They mix in opposite directions. RGB adds light and belongs on screens; CMYK mixes inks and belongs on paper. Bright screen colours often have no ink equivalent, which is why they look duller in print. An honest conversion needs the device's colour profile, so this tool deliberately does not offer CMYK.
Enter the code: if it matches one of the 148 named CSS colours the name appears next to it. Matches exactly, that is — no nearest-name guessing. `#ff6347` is tomato, `#ff6348` is a nameless shade one step away, and presenting the second as the first would simply be wrong.
No. Every conversion runs in your browser, the values you type are never transmitted and nothing is kept between sessions. After the first load the page works with the network switched off. Only the name of the opened tool is sent, for a popularity counter.