HTML Color Codes: Hex, RGB & HSL Explained

CSS gives you three main ways to specify colour: hexadecimal codes, RGB values, and HSL values. They all describe the same range of colours and convert losslessly between each other — the choice between them is mostly about readability and how you are working with the colour. Pick any colour and get all three formats instantly with our color picker online.

Hex Color Codes

Hex codes are the most widely recognised colour format in web development. They express colour as three pairs of hexadecimal digits — one pair each for red, green, and blue — prefixed with a hash:

color: #1e3a8a;   /* deep blue */
color: #ffffff;   /* white */
color: #000000;   /* black */
color: #ff0000;   /* pure red */

Each pair ranges from 00 (none of that channel) to ff (maximum). When both digits in a pair are the same, you can use the 3-digit shorthand: #ffffff → #fff, #aabbcc → #abc.

Hex codes also support an alpha (transparency) channel as a fourth pair: #1e3a8a80 is that same blue at 50% opacity. This is less common — most developers use rgba() for transparency because the intent is clearer.

Use hex when: you are copying colours from a design tool (Figma, Sketch), working with a brand colour guide that specifies hex values, or writing one-off colour declarations where you want a compact format.

RGB Values

RGB expresses colour as decimal values for each channel, from 0 to 255:

color: rgb(30, 58, 138);     /* same deep blue */
color: rgba(30, 58, 138, 0.5); /* 50% transparent */

The rgba() function adds a fourth parameter for alpha, from 0 (fully transparent) to 1 (fully opaque). This is the clearest way to write semi-transparent colours — the alpha value is immediately readable as a decimal.

Use RGB when: you need transparency (rgba()), you are setting colours dynamically via JavaScript (element.style.color = `rgb(${r},${g},${b})`), or you are working with colour values from an image processing library that returns RGB arrays.

HSL Values

HSL — Hue, Saturation, Lightness — is the most human-intuitive colour format. Instead of mixing red, green, and blue channels, you specify a colour by what it actually looks like:

color: hsl(220, 64%, 33%);      /* deep blue: hue 220°, 64% sat, 33% light */
color: hsl(220, 64%, 60%);      /* lighter version of the same blue */
color: hsl(220, 64%, 20%);      /* darker version */
color: hsla(220, 64%, 33%, 0.5); /* 50% transparent */

Hue: a degree on the colour wheel (0=red, 120=green, 240=blue, 360=red again)
Saturation: how vivid the colour is (0%=grey, 100%=fully saturated)
Lightness: how light or dark (0%=black, 100%=white, 50%=the pure colour)

Use HSL when: you are building a design system and need colour variants — HSL makes it trivial to generate lighter and darker shades by adjusting only the Lightness value. It also makes it easy to create complementary colours (rotate hue by 180°) or analogous colour schemes (rotate by 30°).

CSS Custom Properties for Colors

Regardless of which format you choose, define your colours as CSS custom properties (variables) in one place and reference them throughout your stylesheet. This is the current best practice for maintainable colour systems:

:root {
  --color-primary:   #1e3a8a;
  --color-primary-light: #3b82f6;
  --color-text:      #1e293b;
  --color-muted:     #64748b;
  --color-bg:        #f8fafc;
  --color-border:    #e2e8f0;
}

.button {
  background: var(--color-primary);
  color: white;
}

.button:hover {
  background: var(--color-primary-light);
}

With custom properties, changing your primary colour across an entire site requires editing one line, not finding and replacing every occurrence.

Color Accessibility

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between text and its background for normal text, and 3:1 for large text (18px+ or 14px+ bold). Tools like the WebAIM Contrast Checker let you paste two hex codes and get the ratio instantly.

Common pitfalls:

Grey text on white backgrounds (#999999 on #ffffff fails at 2.85:1)
Blue links on dark backgrounds where the contrast ratio drops below 3:1
Coloured text on coloured backgrounds (e.g. yellow text on a white card)

Design your colour palette around contrast requirements from the start — retrofitting accessible colours into an established palette is much harder. Apply your colour scheme in our CSS editor online to preview how text and background combinations look at real scale before committing to them.

Named Colours

CSS has 148 named colours — red, blue, tomato, cornflowerblue, rebeccapurple. They are convenient for prototyping and examples but too imprecise for production design systems. Reserve them for quick mockups; use hex, RGB, or HSL values for any real design work.