Developer8 min read18 December 2024By ToolFocus

Hex Colors Explained: RGB, HSL, and Color Theory for Developers

A developer-focused guide to colour in CSS — hex codes, RGB, HSL, OKLCH, accessibility contrast ratios, and practical design tips for building UIs.

Estimated reading time: 8 minutes

Colour is one of the most powerful tools in a developer's design toolkit, but colour systems can be confusing. Hex codes, RGB, HSL, OKLCH — what is the difference, and when should you use each? This guide demystifies colour representation in CSS and gives you practical tools for choosing, converting, and applying colours effectively.

> Convert colours instantly: Use our free [Hex to RGB Converter](/tools/hex-to-rgb) to translate between colour formats in one click — no signup needed.

Hex Colour Codes

Hexadecimal colour codes are the most widely recognised colour format in web development. A hex code like #3b82f6 represents a colour in the RGB colour model using hexadecimal (base-16) notation.

The format is #RRGGBB:

RR — red component (00 to FF, which is 0 to 255 in decimal)
GG — green component (00 to FF)
BB — blue component (00 to FF)

So #3b82f6 breaks down as: 3b = 59 (red), 82 = 130 (green), f6 = 246 (blue). In CSS, this is equivalent to rgb(59, 130, 246).

Shorthand hex codes: If each pair of digits is identical (e.g., #336699), it can be shortened to three characters (#369).

Hex with transparency: CSS supports 8-digit hex codes where the last two characters represent opacity: #3b82f6cc (cc = 80% opacity in hex).

The RGB Colour Model

RGB (Red, Green, Blue) is an additive colour model — mixing all three channels at full intensity produces white; all at zero produces black. Each channel accepts values from 0 to 255.

color: rgb(59, 130, 246);           /* Solid blue */
color: rgba(59, 130, 246, 0.5);     /* 50% transparent blue */
color: rgb(59 130 246 / 50%);       /* Modern syntax */

RGB is intuitive if you think in terms of how much red, green, and blue, but predicting that rgb(180, 100, 255) is a medium purple without a colour picker is difficult. That is where HSL comes in.

The HSL Colour Model

HSL (Hue, Saturation, Lightness) is often more intuitive for developers and designers because it maps to how humans think about colour:

Hue: The colour itself, expressed as a degree on the colour wheel (0/360 = red, 120 = green, 240 = blue)
Saturation: How vivid the colour is (0% = grey, 100% = fully vivid)
Lightness: How light or dark (0% = black, 50% = normal, 100% = white)

color: hsl(217, 91%, 60%);          /* Same blue as #3b82f6 */
color: hsl(217 91% 60% / 0.5);     /* 50% transparent */

HSL is extremely useful for creating colour variations. Want a lighter version of your brand colour? Just increase the lightness. Want a muted version? Decrease saturation. This makes HSL excellent for design systems and theming.

OKLCH: The Modern Choice

CSS Color Level 4 introduced perceptually uniform colour spaces. oklch() is the modern recommendation for design systems because it maintains consistent perceived lightness across different hues — a problem with HSL where yellow at 50% lightness appears much brighter than blue at 50% lightness.

color: oklch(65% 0.2 230);   /* Lightness, Chroma, Hue */

OKLCH is supported in all modern browsers and is the format recommended by the CSS Color Level 4 specification. Tailwind CSS v4 uses OKLCH internally.

Converting Between Colour Formats

The conversion between hex and RGB is straightforward — each pair of hex digits converts to a decimal number. Our [Hex to RGB Converter](/tools/hex-to-rgb) handles this instantly, including converting to and from HSL.

// Hex to RGB in JavaScript
function hexToRgb(hex) {
  const result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex)
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null
}

Colour Contrast and Accessibility

WCAG (Web Content Accessibility Guidelines) defines contrast ratio requirements to ensure text is readable for people with low vision:

WCAG AA (minimum requirement):

Normal text (under 18pt): contrast ratio at least 4.5:1
Large text (18pt+) or bold 14pt+: contrast ratio at least 3:1
UI components and graphics: contrast ratio at least 3:1

WCAG AAA (enhanced):

Normal text: contrast ratio at least 7:1
Large text: contrast ratio at least 4.5:1

White text on a #3b82f6 blue background has a contrast ratio of approximately 3.9:1 — passing AA for large text but failing for body text. Switching to a darker shade like #1d4ed8 improves contrast significantly.

Building a Colour Palette

For a design system, start with a primary hue and generate a scale from light to dark. Using HSL:

:root {
  --blue-50:  hsl(214, 100%, 97%);
  --blue-100: hsl(214, 95%, 93%);
  --blue-300: hsl(212, 96%, 78%);
  --blue-500: hsl(217, 91%, 60%);  /* Base colour */
  --blue-700: hsl(224, 76%, 48%);
  --blue-900: hsl(224, 64%, 33%);
}

This approach (used by Tailwind CSS) gives you a consistent, accessible colour scale for any design. If you are applying gradients across these colours, our [CSS Gradient Generator](/tools/css-gradient) can help create smooth transitions.

Practical Colour Tips for Developers

Use CSS custom properties: Define your colour palette as CSS variables at the :root level. This enables easy theming and dark mode support.

Avoid pure black and white: Pure black (#000000) and pure white (#ffffff) can feel harsh. Use near-black (#0f172a) and near-white (#f8fafc) for a softer look.

Use transparency for surfaces: rgba or hsl with opacity creates depth for overlays and hover states.

Test colours in context: A colour that looks great in isolation may clash with adjacent colours. Always evaluate colours in context with the full design.

Consider dark mode: Design your colour system with both light and dark modes in mind from the start.

Colour in Data Visualisation

For charts, graphs, and data visualisations, colour choice is particularly important:

Use distinct hues for different data series
Ensure colours are distinguishable for colour-blind users — avoid red/green as the only distinction
Use a consistent direction (light = lower, dark = higher) for sequential data

Frequently Asked Questions

Q: What is the difference between `rgba` and an 8-digit hex code?

Both specify colour with transparency — rgba(59, 130, 246, 0.5) and #3b82f680 represent the same colour. The 8-digit hex code (supported in modern browsers) is more compact; rgba is more readable and widely supported.

Q: How do I convert a hex colour to RGB in CSS?

You cannot convert hex directly in CSS without JavaScript. However, you can use hex codes directly in most CSS colour properties alongside rgb(). Use our [Hex to RGB Converter](/tools/hex-to-rgb) for quick conversion.

Q: What is the difference between HSL and OKLCH?

HSL has uneven perceptual lightness — yellow at hsl(60, 100%, 50%) appears much lighter than blue at the same lightness value. OKLCH is perceptually uniform, so adjusting the L (lightness) channel gives visually consistent results across all hues. Use OKLCH for new design systems.

Q: How do I check colour contrast for accessibility?

Use the WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) or browser DevTools, which now include accessibility audits with contrast ratio checks. Aim for at least 4.5:1 for normal text.

Conclusion

Understanding how hex, RGB, HSL, and OKLCH represent colour gives you precise control over your UI's visual appearance. Knowing accessibility contrast requirements ensures your designs are usable by everyone. [Use ToolHub's Hex to RGB Converter](/tools/hex-to-rgb) to instantly translate between colour formats while building or debugging CSS.