Choosing the right color format for modern CSS

Start with the job the color needs to do

A color format is an interface for working with color. The best choice depends on whether you are copying a fixed brand value, tuning a component state, generating a scale, or preserving a design token across platforms.

There is no single format that should replace every other one. A practical system often accepts several input formats and stores one normalized internal representation.

Use HEX for stable, compact values

HEX remains useful for fixed colors that need to be scanned quickly in code, documentation, or a design-token file. It is compact and universally understood by browsers and design tools.

Its weakness is editing. The relationship between the characters and perceived lightness, chroma, or hue is not obvious, so manual adjustments are mostly guesswork.

:root {
  --brand: #d1aa05;
  --ink: #171b1f;
}

Use RGB when channels or compositing matter

RGB maps directly to the red, green, and blue channels used by screens. It is useful when values come from image processing, canvas rendering, or an API that already works in channel values.

For ordinary interface authoring, RGB is usually less readable than HEX and less intuitive to adjust than a perceptual format.

Use HSL for familiar hue-based adjustments

HSL is convenient when a team thinks in hue, saturation, and lightness. It works well for quick variations and is easier to explain than raw RGB channels.

The limitation is that equal numerical changes in HSL lightness do not always look equally bright. That can make generated scales feel uneven.

Use OKLCH for systematic palettes

OKLCH separates perceptual lightness, chroma, and hue. That makes it a strong choice for building scales, matching visual weight across hues, and creating predictable hover or disabled states.

It is especially useful inside a color tool because users can change one dimension while keeping the others understandable.

:root {
  --brand: oklch(74% 0.16 88);
  --brand-soft: oklch(92% 0.08 88);
  --brand-dark: oklch(52% 0.13 88);
}

A sensible production approach

Accept the formats people already use, convert them accurately, and expose the format that best supports the current task. Fixed tokens can remain in HEX while generated scales use OKLCH during creation.

• Use HEX for fixed values and compact documentation.
• Use RGB for channel-based data and canvas workflows.
• Use HSL for familiar manual hue adjustments.
• Use OKLCH for perceptual scales and design systems.