Hex, RGB & HSL: Convert Colors and Build a Palette
Hex, RGB, and HSL are three ways of writing the same color — #FF5733, rgb(255, 87, 51), and hsl(11, 100%, 60%) are identical on screen. Each notation is better at a different job: hex is compact for code, RGB maps to how screens emit light, and HSL is the one that makes adjusting and combining colors intuitive. This guide shows how they relate, how to convert between them with the Hex to RGB Converter, and how to use HSL to build a palette that actually looks coherent.
RGB — how a screen makes color
Screens build every color from three lights: red, green, blue, each from 0 to 255. rgb(255, 0, 0) is full red; rgb(255, 255, 255) is all three at full, which is white; rgb(0, 0, 0) is black. It’s an additive model — more light, brighter color — which is why it matches how a display works but isn’t very intuitive when you want “the same blue, but lighter.”
Hex — RGB in shorthand
A hex color is just RGB written in base 16. The #RRGGBB format gives each channel two hex digits (00–FF = 0–255):
| Channel | Hex | Decimal |
|---|---|---|
| Red | FF | 255 |
| Green | 57 | 87 |
| Blue | 33 | 51 |
So #FF5733 is rgb(255, 87, 51). To convert by hand, split the hex into three pairs and turn each pair from base 16 into a number (FF → 255). To go the other way, convert each channel to two hex digits. The Hex to RGB Converter does both directions instantly, including the shorthand #RGB form (#F53 expands to #FF5533) and 8-digit hex with alpha (#RRGGBBAA).
HSL — the model built for humans
HSL describes a color the way a person thinks about it: Hue, Saturation, Lightness.
- Hue — the color itself, as an angle on the color wheel from 0 to 360°. Red is 0°, green 120°, blue 240°.
- Saturation — how vivid it is, 0% (grey) to 100% (full color).
- Lightness — how light, 0% (black) to 100% (white), with 50% being the “pure” color.
So #FF5733 becomes hsl(11, 100%, 60%) — a hue of 11° (red-orange), fully saturated, slightly lighter than mid. The power of HSL is that each part changes one obvious thing: drop the lightness and you get a darker shade of the same color; drop the saturation and it fades toward grey. That’s almost impossible to do cleanly by editing RGB numbers.
The same color, three ways
| Notation | Value |
|---|---|
| Hex | #FF5733 |
| RGB | rgb(255, 87, 51) |
| HSL | hsl(11, 100%, 60%) |
All three render as exactly the same orange. Use hex in CSS and design files, RGB when you need to manipulate channels or add rgba() transparency, and HSL when you’re choosing or adjusting colors.
Building a palette with HSL
This is where HSL earns its place. Because hue is an angle, color relationships become simple arithmetic on that angle — keep saturation and lightness steady and rotate the hue:
| Scheme | Rule | From hue 11° |
|---|---|---|
| Complementary | +180° | 11° and 191° |
| Analogous | ±30° | 341°, 11°, 41° |
| Triadic | ±120° | 11°, 131°, 251° |
| Tints & shades | same hue, change lightness | 11° at 40% / 60% / 80% L |
A reliable approach: pick one base hue, build tints and shades by moving lightness only, then add one or two accent colors using the complementary or triadic angle. Keeping saturation and lightness consistent across the set is what makes a palette feel designed rather than random. The Color Palette Generator builds these relationships for you, and the Color Contrast Checker confirms your text colors are readable against the backgrounds.
How to convert a color
- Open the Hex to RGB Converter and paste a hex code or RGB value.
- Read the equivalent in the other formats instantly.
- Take the HSL values into the Color Palette Generator to spin up a matching scheme, or the CSS Color Converter for other notations.
- Check the pairing in the Color Contrast Checker before you ship it.
FAQ
Are hex, RGB, and HSL actually the same color?
Yes. They’re three notations for the same point in the sRGB color space — convert between them and the on-screen result is identical. You choose the notation that’s easiest for the task, not for a different look.
Why does HSL make palettes easier than RGB?
Because in HSL the hue is one number on a wheel, so color relationships (complementary, triadic, analogous) are just rotations of that number. In RGB the same shift means changing all three channels in non-obvious ways.
What’s the alpha channel in 8-digit hex?
The last two digits of #RRGGBBAA set opacity, 00 (transparent) to FF (opaque). It’s the hex equivalent of the a in rgba() or hsla().
Is HSL the same as HSV/HSB?
They’re close but not identical. HSL’s lightness runs black → color → white, while HSV/HSB’s “value” runs black → color. Most CSS work uses HSL; some design apps use HSB.
How do I darken a color without it looking muddy?
In HSL, reduce lightness while keeping the same hue (and often nudging saturation up slightly). Editing RGB channels to darken usually shifts the hue and produces a muddy result.
Got one brand color and need a full set? Convert it to HSL in the Hex to RGB Converter, then rotate the hue or step the lightness to build tints, shades, and accents that genuinely belong together.