Three formats, one color
When you pick a color in a design tool or write CSS, you’ll encounter at least three ways to express it: HEX (#3b82f6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)). All three can describe the exact same color — they’re just different notations for the same underlying values.
Understanding each format helps you work more fluidly between design tools, CSS, and developer handoffs. Knowing when to use which format also makes your code more readable and maintainable.
Convert between HEX, RGB, and HSL instantly with Color Picker & Converter.
HEX: the web standard
HEX color codes are six-character strings prefixed with #. Each pair of characters represents the red, green, and blue components in hexadecimal (base 16) notation.
#3b82f6 breaks down as:
3b= red (59 in decimal)82= green (130 in decimal)f6= blue (246 in decimal)
Shorthand notation — When both characters in each pair are identical, you can shorten to three characters: #ffffff becomes #fff, #000000 becomes #000, #ff6600 becomes #f60.
With opacity — CSS supports 8-character HEX for colors with transparency. The last two characters represent the alpha channel: #3b82f6cc adds 80% opacity to the blue.
HEX is the most compact notation and the default in most design tools. It’s easy to copy, paste, and share — tools like Figma, Sketch, and Adobe XD all output HEX by default.
RGB: working with individual channels
RGB expresses color as three numbers between 0 and 255, representing the intensity of red, green, and blue light.
rgb(59, 130, 246) — 59 parts red, 130 parts green, 246 parts blue.
The values correspond directly to the HEX pairs: 3b in hex = 59 in decimal, 82 = 130, f6 = 246.
RGBA for transparency — Add a fourth value between 0 and 1 for the alpha channel: rgba(59, 130, 246, 0.5) for 50% opacity.
RGB is useful when you need to manipulate individual color channels programmatically — generating color variations, creating gradients, or calculating contrast ratios. It’s also how computer screens actually work: every pixel is a combination of red, green, and blue light.
HSL: the human-friendly format
HSL stands for Hue, Saturation, Lightness — and it’s designed to match how humans think about color rather than how screens produce it.
hsl(217, 91%, 60%) — hue 217 degrees, 91% saturation, 60% lightness.
Hue — A degree value from 0 to 360 on the color wheel. 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° wraps back to red.
Saturation — How vivid or grey the color is. 0% is pure grey; 100% is the most vivid version of the hue.
Lightness — How light or dark. 0% is black; 100% is white; 50% is the pure color.
Why HSL is powerful for CSS — Adjusting HSL values is intuitive in a way that HEX and RGB aren’t. To create a lighter version of a color, increase the lightness. For a desaturated, muted version, lower the saturation. For a complementary color, add 180° to the hue.
:root {
--blue: hsl(217, 91%, 60%);
--blue-light: hsl(217, 91%, 75%); /* same hue, just lighter */
--blue-dark: hsl(217, 91%, 40%); /* same hue, just darker */
--blue-muted: hsl(217, 30%, 60%); /* desaturated version */
}This is much more maintainable than storing four different HEX values that you’d need to manually calculate.
When to use each format
HEX — Best for specific brand colors, sharing color values with designers, and situations where compactness matters. Almost universal in design handoffs.
RGB — Best for programmatic color manipulation, JavaScript color calculations, and when you need to work with individual channel values.
HSL — Best for CSS design systems, creating color scales, and any situation where you want to generate color variations by adjusting a single property.
Modern CSS also offers oklch() — a perceptually uniform color space that makes HSL’s approach even more precise. But HEX, RGB, and HSL remain the core formats you’ll work with daily.
Extracting colors from images
Sometimes you need to match a color from a screenshot, design mockup, or reference image when the source file isn’t available. Clicking on the exact pixel gives you the color values directly.
Use Image Color Picker to click any pixel in an image and instantly get its HEX, RGB, and HSL values.