HEX, RGB, and HSL Color Codes Explained

Published September 2026 · 8 min read

Three ways to write the same color

HEX, RGB, and HSL are not three different colors. They are three notations for describing the same point in the same color space. A designer might hand you #8B5CF6, a developer might prefer rgb(139, 92, 246), and someone tuning a shade might reach for hsl(258, 90%, 66%) — all of these describe the identical violet. Knowing how the three relate saves you from guessing and lets you move a color between tools without it drifting.

The VioApps Color Picker shows all three formats at once and updates them together, so this guide focuses on what each notation actually means and how to reason about a color rather than just copy a string.

RGB: the values a screen actually uses

Screens build color by mixing three lights: red, green, and blue. RGB describes how much of each light is switched on, using a number from 0 (off) to 255 (fully on). So rgb(139, 92, 246) means a fair amount of red, less green, and almost full blue — which the eye reads as violet.

A few reference points make the scale intuitive:

rgb(0, 0, 0) is black (all lights off).
rgb(255, 255, 255) is white (all lights fully on).
rgb(255, 0, 0) is pure red; rgb(0, 255, 0) pure green; rgb(0, 0, 255) pure blue.
Equal amounts of all three, like rgb(128, 128, 128), always produce a shade of grey.

Because each channel runs 0–255, RGB can describe 256 × 256 × 256 = 16,777,216 combinations — the "16 million colors" figure you often see quoted.

HEX: RGB written in base 16

A HEX code is the same red, green, and blue values, just written in hexadecimal (base 16) and joined together after a #. Each channel takes two hex digits that run from 00 (0) to FF (255).

Splitting #8B5CF6 shows the pattern clearly:

8B → 139 (red)
5C → 92 (green)
F6 → 246 (blue)

To convert one channel by hand, multiply the first hex digit by 16 and add the second. For 8B: 8 × 16 = 128, plus 11 (the value of B) = 139. HEX exists mainly because it is compact and unambiguous in code; it carries no extra information that RGB does not.

You will also meet three-digit shorthand such as #0AF. Each digit is simply doubled, so #0AF is identical to #00AAFF. The Color Picker accepts this shorthand and expands it for you.

HSL: the format built for adjusting color

HSL describes a color the way a person tends to think about it, using three intuitive dials:

Hue (0–360) is the position on the color wheel: 0° red, 120° green, 240° blue, wrapping back to red at 360°.
Saturation (0–100%) is how vivid the color is. At 0% every hue collapses to grey; at 100% it is fully intense.
Lightness (0–100%) runs from black at 0% to white at 100%, with the "pure" color sitting around 50%.

This is why designers reach for HSL when building a palette. To make a button's hover state slightly darker, you keep the hue and saturation and lower the lightness by a few percent. Doing the same edit in RGB would mean recalculating all three channels; in HSL it is a single, predictable change.

A worked example: lightening a color deliberately

Suppose your brand violet is hsl(258, 90%, 66%) and you want a softer background tint of the same hue. Raise the lightness and ease off the saturation — for instance hsl(258, 60%, 92%). The hue stays at 258°, so the tint clearly belongs to the same family, but it now reads as a pale lavender suitable behind text. Try the same target in RGB and you would be juggling three moving numbers with no obvious relationship to "lighter."

Common mistakes and how to avoid them

Treating HSL lightness like brightness. Two colors can share the same lightness value yet look different in perceived brightness, because the eye is more sensitive to green than to blue. Trust your eyes for final contrast checks.
Assuming a color is accessible because it looks fine to you. Text needs sufficient contrast against its background. Pick the color here, then verify the pair with a dedicated contrast checker before shipping.
Copying the wrong format. CSS accepts all three, but a brand guideline or design file may demand one exact HEX value. Copy the format the destination expects.
Expecting identical appearance everywhere. The numbers are fixed, but monitors, phones, and printers render them differently depending on calibration and color profile. Use the code as a reference, not a guarantee of appearance.

Which format should you use?

Reach for HEX when you want a short, copy-and-paste value for CSS or a design handoff. Use RGB when you need to reason about the raw channels or add transparency with rgba(). Choose HSL when you are actively tuning a color — building tints and shades, generating a palette, or nudging a hover state. Since they all describe the same color, you can switch freely; the Color Picker keeps the three in sync as you experiment.

Try the Color Picker

Related Resources

Continue with more practical tools and guides:

Editorial note: This guide is maintained by the VioApps team and updated when tool behavior or best practices change.