Three ways to write the same colour
| Format | Example | Where you meet it |
|---|---|---|
| HEX | #FF6B35 | CSS, brand guidelines, Figma, Canva and most design apps |
| RGB | rgb(255, 107, 53) | Screens, Photoshop, PowerPoint’s custom colour dialog |
| HSL | hsl(16, 100%, 60%) | CSS themes, design systems, making colour variations |
HEX and RGB are the same numbers written differently: HEX is the red, green and blue values in base 16. HSL describes the colour as a hue (position on the colour wheel, 0–360°), saturation and lightness, which is easier for people to adjust.
Formats you can paste
- HEX with or without
#, in 6-digit or 3-digit shorthand (#F0Ais#FF00AA). - RGB as
rgb(255, 107, 53),rgb(255 107 53), or just255, 107, 53. - HSL as
hsl(16, 100%, 60%)or16, 100, 60.
The colour is also saved in the page address, so you can bookmark it or send the link to someone.
Converters for one direction
If you always convert the same way, these pages start with the right field selected and explain that format in more detail: HEX to RGB, RGB to HEX and HEX to HSL.
Questions
What about CMYK for print?
CMYK depends on the printer, paper and colour profile, so a single formula gives misleading results. Ask your printer for the CMYK values, or use the Pantone or CMYK swatch in your brand guide.
Does it handle transparency?
Not yet. An 8-digit HEX such as #FF6B3580 needs its last two digits removed first; they are the opacity.