The same colour can be written three ways on the web — #2D6CDF, rgb(45,108,223), or hsl(220,73%,53%). They all paint the same blue. Knowing what each format means makes picking, tweaking, and converting colours far easier.
Key takeaways
- HEX and RGB describe the same red/green/blue mix.
- HSL uses hue, saturation, lightness — best for adjusting shades.
- Each RGB channel ranges 0–255 (00–FF in hex).
- Add an alpha value for transparency.
HEX
A HEX code is a # followed by six hexadecimal digits — two each for red, green, and blue, ranging from 00 to FF (0–255):
#2D6CDF
2D = red (45)
6C = green (108)
DF = blue (223)Shorthand like #FFF expands each digit (= #FFFFFF, white).
RGB
RGB writes the same three channels as decimals: rgb(45, 108, 223). It's the most direct way to think about screen colour, since displays literally mix red, green, and blue light.
HSL
HSL describes colour the way humans tend to think about it:
- Hue (0–360°) — the colour around a wheel (0 red, 120 green, 240 blue).
- Saturation (0–100%) — how vivid vs grey.
- Lightness (0–100%) — how dark vs light.
Want a darker version of a colour? Just lower the lightness — much easier than juggling three RGB numbers.
Pick and convert colours
Grab any colour and copy it as HEX, RGB, or HSL instantly.
Open the Color Picker →Transparency (alpha)
Add a fourth value for opacity, from 0 (invisible) to 1 (solid):
rgba(45, 108, 223, 0.5)
hsla(220, 73%, 53%, 0.5)
#2D6CDF80 ← 8-digit HEX, last 2 digits = opacityWhich should you use?
| Use | Best format |
|---|---|
| Copying a brand colour | HEX |
| Mixing from RGB values | RGB |
| Building light/dark variants | HSL |
| Overlays and shadows | RGBA / HSLA |
Frequently asked questions
What does a HEX code mean?
Six hex digits — two each for red, green, blue (00–FF / 0–255).
RGB vs HSL?
RGB mixes light; HSL uses hue, saturation, lightness — easier for adjusting shades.
How do I add transparency?
Use rgba()/hsla() with 0–1 alpha, or an 8-digit HEX where the last two digits set opacity.
Related tools
See our Disclaimer for how to use WorkIQ content and tools.