You are staring at #FF5733 in a design file and need rgb(255, 87, 51) for your CSS. Or the reverse. This back-and-forth between color formats is something every developer and designer does weekly. This post explains, in plain English, what HEX, RGB, and HSL actually are, why you convert between them, the simple math behind it, and how to convert colors free in one click.
1. The three formats, in plain English
- HEX (
#RRGGBB): a six-digit hex number. Each pair is a color channel in base-16. Designers love it because it is short. - RGB (
rgb(r, g, b)): the same three channels written as decimal numbers from 0 to 255. CSS uses it directly. - HSL (
hsl(h, s%, l%)): hue (0–360° on the color wheel), saturation, and lightness. Easier to reason about ("make it lighter" = raise lightness).
All three describe the same color — just in different notations. Converting is re-spelling, not changing the color.
2. Why you keep converting
- A Figma export gives HEX; your stylesheet wants RGB.
- You want to "lighten" a color, so HSL is easier to tweak than guessing HEX.
- A library or API expects one format and rejects another.
3. The simple math (so you are not guessing)
HEX is base-16. Take #FF5733:
- Red
FF= 15×16 + 15 = 255 - Green
57= 5×16 + 7 = 87 - Blue
33= 3×16 + 3 = 51
So #FF5733 = rgb(255, 87, 51). That is the whole trick: split the pairs, convert each from hex to decimal. You can do it by hand, but you will never want to.
4. Convert colors free with Jisubao
Let the tool do the arithmetic:
- Open the Jisubao Color Converter;
- Paste a HEX, RGB, or HSL value;
- Watch all three formats update live, plus a preview swatch;
- Use the picker to grab a color from anywhere on screen if you have one;
- Copy the format your code needs — locally, nothing is uploaded.
Free, no signup, runs in your browser.
5. Quick FAQ
Q: Is #FFF the same as #FFFFFF? — Yes. Three-digit HEX is shorthand where each digit is doubled (#F57 = #FF5577).
Q: Which format should I use in CSS? — Any. Modern CSS even accepts HEX with alpha (#FF573380). Pick what your team reads fastest.
Q: What about alpha / transparency? — RGBA and HSLA add a fourth value (0–1) for opacity. The tool handles those too.
HEX, RGB, and HSL are three dialects of the same color. Learn that each pair of hex digits is just a 0–255 channel, and let the converter handle the boring part.
👉 Try it now: Jisubao online Color Converter →