HEX vs RGB vs HSL: Color Codes Explained

Every color on a screen can be written three common ways, and understanding HEX, RGB, and HSL turns color from guesswork into something you can control on purpose. They all describe the same screen colors — they are just different notations, each better suited to a different job. HEX is for copy-paste, RGB maps to how screens emit light, and HSL is the one that lets you adjust a color intuitively. This guide explains each, shows how they convert, and tells you when to reach for which.

For the bigger picture of how color works in design, pair this with our color theory basics guide; this article is the technical companion that demystifies the codes themselves.

RGB: how screens actually make color

RGB stands for Red, Green, Blue — the three colored lights every pixel emits. Each channel runs from 0 to 255, so rgb(0, 0, 0) is all lights off (black) and rgb(255, 255, 255) is all lights at full (white). Mixing them additively produces everything else: rgb(255, 0, 0) is pure red, rgb(255, 255, 0) is yellow.

RGB is additive because it adds light. This is the opposite of mixing paint, where adding pigments darkens toward black. That distinction is why a glowing screen yellow looks nothing like yellow ink — and why print uses CMYK instead.

HEX: the same RGB, written for the web

A HEX code is just RGB in base-16 (hexadecimal) shorthand, prefixed with #. The six digits are three pairs — red, green, blue — each pair ranging from 00 to ff (0 to 255 in decimal). So #ff0000 is the same pure red as rgb(255, 0, 0).

• #000000 = black, #ffffff = white
• #ff0000 = red, #00ff00 = green, #0000ff = blue
• Three-digit shorthand like #f00 expands to #ff0000 — each digit is doubled

HEX dominates web and brand work for one reason: it is compact and unambiguous to copy. Brand guidelines almost always specify HEX, which is why it is the format you will paste most often.

HSL: the model designers should actually use to adjust color

HSL stands for Hue, Saturation, Lightness — and unlike HEX and RGB, it maps to how humans think about color. Instead of juggling three light channels, you change one meaningful slider:

• Hue (0–360°) — the position on the color wheel. 0° red, 120° green, 240° blue.
• Saturation (0–100%) — how vivid. 0% is gray, 100% is fully saturated.
• Lightness (0–100%) — how light. 0% is black, 100% is white, 50% is the “pure” color.

The payoff is enormous for practical work. Want a darker version of your brand blue? Lower the lightness and leave hue and saturation alone — the color stays “the same blue,” just deeper. Doing that in HEX or RGB means changing all three values and hoping the hue does not drift. This is exactly the move that makes failing text pass our color contrast accessibility checks without redesigning your palette.

Side-by-side: the same color in all three

Color	HEX	RGB	HSL
Pure red	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Brand blue	#2563eb	rgb(37, 99, 235)	hsl(221, 83%, 53%)
Mid gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)

Notice the mid gray: in HSL its saturation is 0%, which instantly tells you it is a neutral. Reading that from #808080 takes a beat longer. HSL makes a color’s character legible at a glance.

What about the alpha channel (RGBA and HEX with 8 digits)?

Add transparency and you get a fourth value, alpha, from 0 (fully transparent) to 1 (fully opaque). The notations:

• RGBA: rgba(37, 99, 235, 0.5) — half-transparent brand blue.
• HSLA: hsla(221, 83%, 53%, 0.5) — the same, in HSL.
• 8-digit HEX: #2563eb80 — the final pair (80) is the alpha, roughly 50%.

Alpha is how you build scrims, overlays, and subtle tints without creating a new solid color.

HSB/HSV: the model that confuses everyone

You will run into a fourth notation in design software: HSB (Hue, Saturation, Brightness), also called HSV (the V is Value). It looks almost identical to HSL but behaves differently, and mixing them up is a common source of frustration.

The difference is in the third value. In HSL, 100% lightness is always white. In HSB, 100% brightness is the fully saturated, most vivid version of the color — not white. So in HSB you reach white only by dropping saturation to 0 while brightness stays high. Photoshop and many color pickers use HSB; CSS uses HSL. They are both useful, but if a color looks wrong after you “max out the lightness,” check whether you are actually in a brightness model. For web work, stick to HSL because that is what the browser speaks.

Why print uses CMYK instead

None of these three screen models translate directly to paper. Print uses CMYK — Cyan, Magenta, Yellow, and Key (black) — a subtractive model where inks absorb light rather than emit it. This matters for two practical reasons.

First, the gamut differs. Screens (RGB) can display vivid, glowing colors — bright cyans, electric greens — that simply cannot be reproduced in CMYK ink. A neon design that dazzles on screen can print dull and muddy. Second, conversion is lossy and device-dependent, which is why professional print work uses color profiles and proofs rather than trusting an on-screen preview. The takeaway: HEX, RGB, and HSL are screen languages. If your design is destined for paper, expect a CMYK conversion step and design with the smaller print gamut in mind.

Which format should you use, and when?

1. HEX — for storing and sharing brand colors, and anywhere you copy-paste a fixed value.
2. RGB / RGBA — when you need transparency in older codebases, or when working close to image data.
3. HSL / HSLA — when you are adjusting color: building tints and shades, generating palettes, or nudging contrast. It is the editing format.

A common professional workflow: store the brand color as HEX, convert to HSL to build a full tint-and-shade scale, then export each step back to HEX for the design system. Once you have those values, distributing them across a layout is where the 60-30-10 color rule takes over.

Frequently Asked Questions

Are HEX and RGB the same color?

Yes. HEX is simply RGB written in hexadecimal. #ff0000 and rgb(255, 0, 0) describe the identical color. HEX is more compact for the web, while RGB is more readable as decimal numbers, but they convert one-to-one with no color difference.

Why do designers prefer HSL for editing colors?

HSL separates a color into hue, saturation, and lightness, so you can change one property without disturbing the others. Darkening a color is just lowering lightness — the hue stays consistent. In HEX or RGB you must change all three channels and risk an unintended hue shift.

What does the 8-digit HEX code mean?

An 8-digit HEX code adds a two-digit alpha (transparency) value to the standard 6-digit color. For example, #2563eb80 is brand blue at roughly 50% opacity. The first six digits are the color; the last two control how transparent it appears.

Can I convert between HEX, RGB, and HSL without losing accuracy?

HEX and RGB convert losslessly because they are the same model. HSL conversions can introduce tiny rounding differences because lightness and saturation are percentages, but for design purposes the result is visually identical. Any color picker or DevTools panel converts instantly.