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. The short version: 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 free Color Picker 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 only choosing the color, 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 HEX field of the Color Picker and the rows read: HEX #3D5BFF, RGB rgb(61, 91, 255), HSL hsl(231, 100%, 62%), HSV hsv(231, 76%, 100%), 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.

You don't have to start from a hex code. The HEX field also accepts rgb(), hsl() and CSS color names, and the RGB and HSL number fields are editable in both directions. You can also drag in the saturation and brightness square, set the hue slider, or press Pick from screen to sample a pixel anywhere on your display. That button uses the browser's EyeDropper feature, so it works in Chrome and Edge on desktop.

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.

The safest habit is to copy atomically: take the whole formatted value from the copy button next to each row 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 HSV brightness. Design tools often show HSB (the same as HSV), and 100 percent brightness is not 100 percent lightness, which is pure white. The picker shows both rows so you can compare.
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 lighter-to-darker strip instead of eyeballing. It shows ten steps, and clicking one loads it as the active color, so you can read exact codes for each tint rather than approximating with opacity.

And when you pick a color 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, triadic and other sets. Verifying that your pick is readable on its intended background belongs to the Color Contrast Checker. To sample colors from a photo or logo file rather than your screen, use Color Palette from Image.

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