🎨 Converting Between HEX, RGB, and HSL Color Codes

Work with colors in CSS or a design tool for long enough and you'll run into all three notations — #3b82f6, rgb(59, 130, 246), and hsl(217, 91%, 60%). This article covers what HEX, RGB, and HSL each actually represent, when one is more convenient than the others, and how to convert a single color across all three.

What HEX, RGB, and HSL Each Represent

HEX (hexadecimal) notation takes the form #RRGGBB, where the red, green, and blue channels are each written as a two-digit base-16 number ranging from 00 to FF (0–255 in decimal). For example, #ffffff is white and #000000 is black. RGB notation is the exact same three channel values written as plain decimal numbers, like rgb(255, 255, 255) — it carries identical information to HEX, just in a different base. HSL, by contrast, describes a color along three completely different axes: hue (a position on a 0–360° color wheel), saturation (0–100%, how vivid the color is), and lightness (0–100%, how bright it is). Where HEX and RGB mix the three primary colors of light directly, HSL is closer to how people actually perceive color — it separates "which hue" from "how bright and how vivid."

When Each Notation Is Useful

HEX is the shortest of the three and is treated as the de facto standard across CSS, design tools, and color palettes, which makes it the most common choice for setting colors in a stylesheet or sharing a color code with someone else. RGB keeps the R, G, and B channels as plain numbers, which makes it convenient for code that needs to do direct arithmetic on color values channel by channel — image processing, canvas pixel manipulation, and the like. HSL separates saturation and lightness into their own channels, so intuitive adjustments — "keep the same hue but make it brighter," or "desaturate to tone it down" — only require changing a single number. For example, instead of eyeballing a new HEX value for a button's hover state, lowering HSL's lightness (L) by a few percent gives you a precisely darker version of the exact same hue.

A Worked Conversion Example

Take the blue #3b82f6 as an example. Splitting the HEX value by channel: 3b (hex) = 59, 82 (hex) = 130, f6 (hex) = 246, so in RGB that's rgb(59, 130, 246). To convert further to HSL, normalize R, G, and B to a 0–1 range (0.231, 0.510, 0.965), then compute lightness as the average of the max and min values, saturation from the difference between max and min, and the hue angle from which channel holds the maximum. Working through that math, #3b82f6 comes out to hsl(217, 91%, 60%) — a hue of 217° (blue), 91% saturation (vivid), and 60% lightness (a bit brighter than mid-tone). All three notations point to exactly the same color, but computing the channels by hand is tedious and easy to get wrong. A tool that shows HEX, RGB, and HSL values simultaneously for a color you pick lets you check conversions like this far faster and more reliably.

Common colors in HEX, RGB & HSL

A quick reference of frequently used colors in all three notations (converted and verified with node). Each row is the same color in different notations, so the values correspond exactly.

In HSL, H (hue) ranges 0–360°, while S (saturation) and L (lightness) range 0–100%. Achromatic colors (black, white, gray) have 0% saturation, so their hue value is not meaningful.

More Guides