Last updated: 2026-06-23

Color Conversion (HEX, RGB, HSL)

A color converter translates a single color between the three notations used most often on the web: HEX, RGB, and HSL. Each describes the same color in a different way, and front-end developers, designers, and anyone editing a stylesheet routinely need to move a value from one to another — pasting a HEX code from a design tool into an RGB function, or nudging a color in HSL because it is easier to reason about there.

Three ways to write one color

RGB defines a color by how much red, green, and blue light it mixes, each channel an integer from 0 to 255. HEX is the same three channels written in base 16: two hexadecimal digits per channel, joined into a six-digit code such as #3B82F6. Because both formats store the identical eight bits per channel, converting between HEX and RGB is exact — no information is gained or lost.

HSL takes a different view. Instead of mixing primaries it names a color by hue (an angle from 0 to 360 degrees on the color wheel), saturation (0 to 100 percent, gray to vivid), and lightness (0 to 100 percent, black through the pure hue to white). HSL maps more closely to how people describe color — "a slightly lighter, less intense blue" — which is why it is convenient for adjustments.

How the conversion works

Splitting a HEX code into RGB is digit arithmetic: each pair of hex digits is read as a number from 00 to FF, that is 0 to 255. Going from RGB to HSL first scales the channels to the unit range, then derives lightness from the midpoint of the largest and smallest channel, saturation from their spread, and hue from which channel is the largest.

Worked example

Take #3B82F6. The three pairs are 3B, 82, and F6 — that is 59, 130, and 246 — so the color is rgb(59, 130, 246). Scaling each channel to the unit range gives roughly 0.231, 0.510, and 0.965. The largest channel is blue and the smallest is red, so

with a hue of about 217 degrees, giving hsl(217, 91%, 60%).

Because RGB stores 256 discrete levels while HSL rounds to whole degrees and percentages, a round trip can shift a value by a single step — imperceptible to the eye but worth knowing when comparing codes. To explore the base-16 arithmetic behind HEX codes, see the Number Base Converter.