CSS gives you at least five ways to write the same colour. That is genuinely useful — each format fits a different workflow. Here is a practical breakdown of when to use HEX, RGB, HSL, and the newer formats, with real examples.
HEX (#RRGGBB)
The most common format in web development. A 6-digit string encoding three colour channels (red, green, blue) in base-16.
``css
color: #2f855a;
background: #1a202c;
border-color: #e2e8f0;
`
When to use it: Any time you have a specific colour from a design file (Figma, Sketch, Adobe XD all export hex). Compact and universally supported. The 3-digit shorthand (#fff = #ffffff) works where colours repeat digits.
Limitation: Hard to manipulate programmatically. To lighten #2f855a by 10%, you need to do the maths or convert to HSL first.
8-digit HEX with alpha
Add two more digits for opacity:
`css
/ 50% transparent /
background: #2f855a80;
/ 80% opaque /
background: #2f855acc;
`
00 = fully transparent, ff = fully opaque. Not all legacy tools support 8-digit hex — use rgba() for maximum compatibility.
RGB and RGBA
RGB uses decimal numbers (0–255) for each channel.
<code>css
<p>color: rgb(47, 133, 90);</p>
<p>background: rgba(26, 32, 44, 0.9);</p>
</code>
When to use it: When you need to calculate colours in JavaScript, since extracting channel values from a hex string requires string parsing. getComputedStyle() returns computed values in rgb() format, so rgba() is the natural choice when reading and writing colours from code.
<code>javascript
<p>// Easier to manipulate channels in JS</p>
<p>const alpha = 0.8;</p>
<p>element.style.background = </code>rgba(47, 133, 90, ${alpha})<code>;</p>
</code>
Limitation: Not intuitive for creative colour work. Trying to imagine what rgb(200, 100, 150) looks like requires mental gymnastics.
HSL and HSLA
HSL stands for Hue (0–360°), Saturation (0–100%), Lightness (0–100%).
<code>css
<p>color: hsl(145, 48%, 35%);</p>
<p>background: hsla(145, 48%, 35%, 0.15);</p>
</code>
Why HSL is powerful for CSS:
Hue is a colour wheel position — 0° is red, 120° is green, 240° is blue. Saturation is how vivid the colour is (0% = grey, 100% = pure colour). Lightness is how light or dark (0% = black, 100% = white, 50% = the full colour).
This makes colour manipulation readable:
<code>css
<p>:root {</p>
<p>--brand: hsl(145, 48%, 35%);</p>
<p>--brand-light: hsl(145, 48%, 90%); /<em> same hue, much lighter </em>/</p>
<p>--brand-muted: hsl(145, 20%, 35%); /<em> same hue, less saturated </em>/</p>
<p>--brand-dark: hsl(145, 48%, 20%); /<em> same hue, darker </em>/</p>
<p>}</p>
</code>
All four values are clearly related — same hue and saturation family, just adjusted. With hex you would have no idea they were related by looking at the code.
When to use HSL: When building design systems or components where you need colour variations (hover states, disabled states, tints, shades). When you want CSS variables that feel coherent.
Comparing the Same Colour in All Formats
Here is #2f855a written four ways:
| Format | Value |
|--------|-------|
| HEX | #2f855a |
| RGB | rgb(47, 133, 90) |
| HSL | hsl(145, 48%, 35%) |
| CMYK | C:65 M:0 Y:32 K:48 |
They are identical — pick the format that fits your workflow. A colour picker and converter can translate between all of these instantly if you have a value in one format and need it in another.
Modern Formats: oklch and color()
CSS Color Level 4 introduced new perceptually uniform colour spaces. oklch is gaining adoption:
<code>css
<p>color: oklch(55% 0.12 145);</p>
</code>
OKLCH is: Lightness (0–100%), Chroma (colour intensity, ~0–0.4), Hue (0–360°). It is designed so that equal changes in L actually look equally different — unlike HSL where the same delta-L looks different at different hues. Useful for generating accessible colour scales. Browser support: Chrome 111+, Firefox 113+, Safari 15.4+.
Quick Decision Guide
| Need | Use |
|------|-----|
| Colour from a design file | HEX |
| Manipulating colours in JavaScript | RGB / RGBA |
| Building a design system with variants | HSL / HSLA |
| Generating accessible colour scales | oklch |
| Print or colour matching | CMYK (in design tools, not CSS) |
| Transparency | rgba() or 8-digit HEX |
Converting Between Formats
You rarely need to convert manually. Use DevTools (click any colour swatch in the Styles panel to cycle between formats), or paste a value into an online colour converter to get all formats at once.
If you need the conversion in code:
`javascript
// Hex to RGB
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
// RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
const l = (max + min) / 2;
if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
const d = max - min;
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
let h;
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
return { h: Math.round(h 360), s: Math.round(s 100), l: Math.round(l * 100) };
}
``
Understanding which format to use and why removes one more micro-decision from your CSS workflow.
Originally published at https://snappytools.app/color-picker/