Color & Design·4 min read

Hex RGB and HSL Explained: One Color, Three Codes

Every color your screen shows is three numbers wearing different outfits. You'll find hex RGB and HSL explained in plenty of textbooks, but the working version is short: hex and rgb() are the same three bytes written in different bases, while HSL rearranges them into hue, saturation, and lightness so a human can reason about them. This guide converts one blue, #3D5BFF, through every format a color picker outputs, explains when each code earns its place in a stylesheet, and lists the copying mistakes that quietly corrupt rendered colors.

Open the tool All insights

Why one color needs several color codes

Same pixels, different consumers.

A designer hands you a mockup and you need the button blue. The stylesheet wants a hex token. The canvas-drawing code wants integer channels. The theming system wants HSL so it can derive hover and focus variants by adjusting lightness. The print vendor asks for CMYK. One color, four consumers, and translating between them by hand is exactly the kind of chore that breeds off-by-one channel errors.

That's the real job of a color picker: not choosing the color, which your eyes already did, but emitting the same color correctly in every notation your toolchain expects.

Hex RGB and HSL explained through actual bytes

A hex code is three bytes in base 16: #3D5BFF means red 0x3D, green 0x5B, blue 0xFF. Write those same bytes in decimal and you have rgb(61, 91, 255). Nothing changed except the numbering system, which is why converting between hex and RGB is lossless and mechanical.

HSL is a genuine transformation. It re-expresses the color as an angle on the hue circle, a saturation percentage, and a lightness percentage. The same blue becomes hsl(231, 100%, 62%): hue 231 puts it in blue territory, full saturation says the hue is undiluted, and 62 percent lightness says it sits a bit above the midpoint. The payoff is editability. Want it darker? Lower one number. In hex, darkening means recomputing all three channels.

#3D5BFF converted across every color format

Type #3D5BFF into the Color Picker and the rows read: HEX #3D5BFF, RGB rgb(61, 91, 255), HSL hsl(231, 100%, 62%), CMYK cmyk(76%, 64%, 0%, 0%). The CMYK line deserves a caveat: it's the standard formula conversion, useful as a reference, but real print output depends on ink and paper profiles, so confirm with your printer before committing.

There's also an OKLCH row for the modern CSS oklch() function. Unlike HSL, OKLCH is perceptually uniform, meaning equal numeric steps look like equal visual steps, and it can address wide-gamut colors that the classic formats can't reach on P3 displays. For new design systems it's worth adopting; for quick edits, HSL remains the friendlier dial.

Copying color codes correctly into CSS

Most color bugs aren't wrong colors, they're wrong transcriptions. CSS needs the # on hex values; an unprefixed 3D5BFF is simply invalid and the rule is dropped. Modern CSS accepts space-separated channels, rgb(61 91 255), alongside the classic comma form, but mixing the two syntaxes in one function fails. In hsl(), the hue takes no unit by default while saturation and lightness require percent signs; hsl(231, 100, 62) does nothing.

Copying color codes correctly is mostly about copying atomically: take the whole formatted value from the picker's copy button rather than retyping fragments, and you eliminate the entire class of dropped-character bugs.

Color code mistakes that break stylesheets

A short list of classics worth checking in code review:

Misreading shorthand hex: #3AF expands to #33AAFF by doubling each digit, not to #3AF000 or #0003AF.
Confusing HSL lightness with HSB/HSV brightness. Design tools often show HSB, and 100 percent brightness is not 100 percent lightness, which is pure white.
Pasting an alpha-bearing 8-digit hex like #3D5BFF80 into a system that only parses 6 digits and silently mangles the alpha.
Treating cmyk() as a CSS function. Browsers don't render it; CMYK values are for print handoff only.
Rounding channels independently after a conversion, which can shift the color by a visible step in gradients and borders.

Picking colors for the web: three practical habits

Store hex as the canonical token and derive everything else on demand; it's the format every tool round-trips without loss. When you need families of related colors, use the picker's ten-step shades strip instead of eyeballing: clicking a shade loads it as the active color, so you can read exact codes for each tint rather than approximating with opacity.

And when picking colors for the web that must sit under text, decide lightness first, hue second. Lightness determines whether the pair can ever pass contrast, and it's far cheaper to fix at pick time than after the palette is embedded in forty components.

When the color picker hands off to another tool

The Color Picker answers what is this color in the format I need. Once you have the value, adjacent questions belong to adjacent tools. Building a full scheme around your pick is the Color Palette Generator's job, which rotates your hue into complementary, analogous, and triadic sets. Verifying that your pick is readable on its intended background belongs to the Color Contrast Checker.

If you're trying to communicate the color to a non-technical stakeholder, the Color Names Lookup will give you the nearest human name for the hex, which travels better in a meeting than four hexadecimal digits ever will.