CSS COLOUR FORMATS EXPLAINED

The Six CSS Colour Formats

CSS supports six colour notations — and choosing the right one for the right context makes your code more readable, maintainable, and correct.

HEX — #RRGGBB

The most familiar format. Three hexadecimal pairs representing red, green, and blue channels (0–255 each). #e8c84a is the primary accent colour used throughout this site.

color: #e8c84a;          /* 6-digit */
color: #e8c84aff;        /* 8-digit with alpha */
color: #ec4;             /* 3-digit shorthand (same as #eecc44) */

Use when: Specifying fixed design-system colours, copying values from design tools like Figma, or when you need a compact representation.

Weakness: Hard to intuit. Looking at #e8c84a doesn't immediately tell you it's a warm yellow. Adjusting lightness or saturation requires recalculating all three channels.

RGB — rgb(R, G, B)

The same red/green/blue model as HEX, but expressed in decimal (0–255) or percentage.

color: rgb(232, 200, 74);
color: rgb(91% 78% 29%);      /* percentage form */
color: rgba(232, 200, 74, 0.8); /* with alpha */
color: rgb(232 200 74 / 0.8);   /* modern space-separated form */

Use when: Computing colours in JavaScript (canvas drawing, dynamic theming), reading values from image data arrays, or when your colour values come from a database as separate channels.

HSL — hsl(H, S%, L%)

Hue (0–360°, the colour wheel position), Saturation (0–100%, grey to vivid), Lightness (0–100%, black to white). This is the most human-intuitive format.

color: hsl(47, 79%, 60%);         /* warm yellow */
color: hsl(47 79% 60% / 0.8);    /* with alpha */
color: hsl(47 79% 40%);          /* darker version */
color: hsl(47 79% 80%);          /* lighter version */

Use when: Creating colour variations (hover states, disabled states, tints, shades), building dynamic theming systems with CSS custom properties, or designing colour palettes programmatically.

The power of HSL: hsl(47 79% 60%) and hsl(47 79% 40%) are visually related (same hue and saturation, just different lightness). This relationship is invisible in HEX.

HWB — hwb(H W% B%)

Hue, Whiteness, Blackness. A simpler alternative to HSL for creating tints and shades. Less common but fully supported in modern browsers.

color: hwb(47 20% 10%);  /* hue 47°, 20% white, 10% black */

LCH and OKLCH — The Modern Standard

LCH (Lightness, Chroma, Hue) and OKLCH are perceptually uniform colour spaces, meaning equal numerical differences produce equal perceived differences in colour. HSL is not perceptually uniform — a yellow at 50% lightness looks much brighter than a blue at 50% lightness.

color: oklch(75% 0.15 90);   /* perceptually consistent yellow */

OKLCH is the right choice for design systems that need consistent visual weight across different hues, accessible colour palettes, and smooth colour interpolation in gradients.

Named Colours

CSS defines 140 named colours: red, cornflowerblue, rebeccapurple. Use them for prototyping and when the semantic name is clearer than the value. Avoid them in production code — they're inconsistent in coverage and don't communicate intent.

Converting Between Formats

Manual conversion between formats is tedious and error-prone. Use our Color Converter tool to switch between HEX, RGB, HSL, and CMYK instantly. Enter a value in any format and all other representations update in real time.

The mathematical conversions, for reference:

• HEX → RGB: Parse each pair as hexadecimal: R=0xe8=232, G=0xc8=200, B=0x4a=74
• RGB → HSL: Normalise to 0–1, compute min/max, derive H from the dominant channel, S from the range/max ratio, L from (max+min)/2
• HSL → RGB: Use the chroma intermediary: C=(1−|2L−1|)×S, then sector-based channel calculation

What About CMYK?

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive colour model used in print. Web browsers don't natively support CMYK CSS values, but understanding the format matters when you're given brand colours specified for print production and need to find the closest web equivalent. Our Color Converter handles CMYK → HEX/RGB/HSL conversion for this use case.

Colour and Accessibility

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. Designs that rely on colour alone to convey information exclude these users. Always supplement colour cues with shape, pattern, or text labels.

For text contrast, WCAG 2.1 requires a minimum 4.5:1 contrast ratio for normal text (AA) and 7:1 for AAA. Use our Contrast Checker tool to verify your foreground/background colour combinations meet these requirements before shipping.