HEX, RGB, and HSL: what changes and what does not

One color, three useful notations

Aurora Indigo can be written as #4F46E5, rgb(79 70 229), or approximately hsl(243 75% 59%). A browser resolves each declaration to an sRGB color. With the rounded HSL values shown here, the result can differ by a channel value after a round trip; keeping more precision removes most conversion drift.

.sample {
  color: #4F46E5;
  color: rgb(79 70 229);
  color: hsl(243.4 75.4% 58.6%);
}

How six-digit HEX maps to RGB

A six-digit HEX value is three two-digit hexadecimal numbers in #RRGGBB order. Each pair ranges from 00 to FF, which is 0 to 255 in decimal. For #4F46E5, 4F becomes 79 red, 46 becomes 70 green, and E5 becomes 229 blue.

• RR controls the red sRGB channel.
• GG controls the green sRGB channel.
• BB controls the blue sRGB channel.
• An optional fourth pair in #RRGGBBAA controls alpha.

Three-digit HEX is shorthand only when every full pair repeats the same digit: #4AE expands to #44AAEE. It cannot represent every six-digit color, so #4F46E5 has no exact three-digit shorthand.

When RGB is the clearest choice

The modern rgb() syntax exposes the same red, green, and blue channels directly. Integer channels commonly use 0 through 255; percentage channels use 0% through 100%. A slash introduces alpha without switching to a separate rgba() function.

.solid {
  background: rgb(79 70 229);
}

.translucent {
  background: rgb(79 70 229 / 60%);
}

• Use RGB when channel values come from an image, API, or byte-based tool.
• Use the slash syntax when opacity belongs to the color rather than the whole element.
• Keep one numeric convention within a component to make review easier.

What HSL makes easier—and what it does not

HSL separates hue angle, saturation, and lightness. Rotating hue is convenient for deterministic relationships, while changing saturation or lightness is easier to reason about than editing three RGB channels independently.

• Hue 0° is red, 120° is sRGB green, and 240° is sRGB blue.
• Saturation 0% produces an achromatic gray; 100% uses the maximum HSL saturation at that hue and lightness.
• Lightness 0% is black, 50% is the midpoint of the HSL model, and 100% is white.

Why converted values sometimes differ

RGB-to-HSL conversion usually produces fractional values. If a tool rounds hue, saturation, and lightness for display, converting those rounded numbers back to RGB may move one or more channels by a small amount. That is a precision issue, not evidence that one notation has a wider range.

• Keep the original HEX or RGB value as the canonical source when exact sRGB bytes matter.
• Retain decimal HSL values during calculations and round only for display.
• Compare resolved channel values, not the visible strings, when testing equality.
• Do not repeatedly convert and overwrite the source value in an editing pipeline.

Which format should you use?

There is no universally best notation. Choose according to how the value is produced and maintained. The browser can render all three; the useful difference is how clearly the source code communicates the task.

• Choose HEX for compact, stable sRGB tokens and values copied from common design tools.
• Choose RGB for explicit channels, calculations, and readable alpha values.
• Choose HSL for manual hue rotation or simple saturation and lightness controls.
• Choose OKLCH instead of HSL when building perceptually stepped palettes.
• Use CSS custom properties so components consume semantic tokens instead of repeating raw values.

:root {
  --color-brand: #4F46E5;
  --color-brand-muted: rgb(79 70 229 / 60%);
}

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

A conversion checklist

• Confirm that the source and destination are both intended to describe sRGB.
• Preserve alpha separately and check whether it is written as a percentage or a 0–1 number.
• Keep enough decimal precision for round trips.
• Test text contrast after choosing the final background; notation alone says nothing about accessibility.
• Store a canonical value and derive presentation formats from it.

Color Atlas follows that last rule: PostgreSQL stores the reviewed canonical HEX value, while the SSR page calculates RGB, HSL, HWB, luminance, contrast, and related colors deterministically.