Colors on the web: HEX, RGB, HSL, HSV — when to use each

In web development, colors can be specified in several ways. The choice of format affects code readability, how easy it is to make changes, and whether shades can be generated programmatically. This article covers HEX, RGB, HSL, and HSV—their structure, advantages, and typical use cases.

For quick conversions between formats, use Color Converter on reChecker.

HEX (hexadecimal)

The most common format in web design. Syntax: #RRGGBB or the shorthand #RGB.

color: #3b82f6;   /* синий */
color: #f00;      /* красный, краткая форма */
color: #3b82f680; /* с альфа-каналом (8 символов) */

Structure

When to use it

• Fixed colors from a design mockup (designers more often provide HEX)
• When compactness matters
• In HTML attributes and inline styles

Limitations

• Not intuitive for manually adjusting shades
• Difficult to lighten or darken colors programmatically without conversion

RGB and RGBA

Red, green, and blue—an additive color model. Each channel ranges from 0 to 255.

color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5); /* современный синтаксис с / */

When to use it

• When a color comes from an API or is calculated in JavaScript
• For dynamic transparency (the fourth parameter)
• In canvas, WebGL, and other graphics APIs

Comparison with HEX

HSL (Hue, Saturation, Lightness)

A model oriented toward human perception. Useful for generating palettes.

color: hsl(217, 91%, 60%);   /* hue, saturation%, lightness% */
color: hsla(217, 91%, 60%, 0.8);
color: hsl(217 91% 60% / 0.8); /* современный синтаксис */

Parameters

When to use it

• Generating shades: change Lightness to make a color lighter or darker
• Creating palettes from a single base color
• Color schemes (complementary, triadic)—shift Hue by 120°, 180°, and so on

Example: a palette from a single hue

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 70%);
  --primary-dark: hsl(217, 91%, 50%);
  --primary-muted: hsl(217, 30%, 60%); /* меньше saturation */
}

HSV (Hue, Saturation, Value)

An alternative to HSL. Value is brightness, from black to pure color. It is not natively supported in CSS, but is used in color pickers and graphics editors.

HSL vs. HSV

• HSL: Lightness 50% is the “pure” color; higher values make it whiter, lower values make it darker
• HSV: Value 100% is maximum brightness; Saturation controls how much the color is “diluted” with white

HSL is more common in web development because CSS supports it natively. HSV is often found in design tools (Figma, Photoshop).

Comparison table

Practical recommendations

1. Store colors in HSL; export them as HEX

For themes and palettes, it is convenient to store base colors in HSL. During the build or at runtime, convert them to HEX for compatibility with older browsers or tools.

2. Use CSS variables

:root {
  --color-primary-h: 217;
  --color-primary-s: 91%;
  --color-primary-l: 60%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

This makes it possible to change the hue through a single variable.

3. Conversion in JavaScript

// HSL to HEX (упрощённо)
function hslToHex(h, s, l) {
  s /= 100;
  l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;
  if (h < 60) { r = c; g = x; }
  else if (h < 120) { r = x; g = c; }
  else if (h < 180) { g = c; b = x; }
  else if (h < 240) { g = x; b = c; }
  else if (h < 300) { r = x; b = c; }
  else { r = c; b = x; }
  return '#' + [r, g, b].map(v => Math.round((v + m) * 255).toString(16).padStart(2, '0')).join('');
}

For production, it is better to use a library (for example, chroma.js) or Color Converter on reChecker for manual checks.

4. Accessibility

Regardless of the format, check the contrast between text and background. After converting to the required format with Color Converter, use separate contrast-checking tools to check compliance with WCAG.

The sRGB and display-p3 color spaces

The web uses sRGB by default. Modern displays support a wider color gamut (display-p3). In CSS, you can use color() with a color space specified:

color: color(display-p3 0.4 0.2 0.8);

Support is still limited. For most projects, sRGB (HEX, RGB, HSL) is sufficient. Wider color spaces are for designs with specific color requirements.

Dark themes and color variables

When switching themes, change the values of CSS variables. HSL is convenient for programmatically lightening or darkening colors:

:root {
  --bg: hsl(0, 0%, 100%);
  --text: hsl(0, 0%, 10%);
}

[data-theme="dark"] {
  --bg: hsl(0, 0%, 10%);
  --text: hsl(0, 0%, 95%);
}

The same component uses the variables, so switching themes does not require changes to the components.

Summary

• HEX — for fixed colors from design mockups
• RGB — for dynamic values and working with alpha in code
• HSL — for palettes, themes, and programmatically generating shades
• HSV — in design tools; in CSS, only through conversion

The choice of format depends on the context. Use Color Converter to quickly switch between formats when working with colors.