HEX, RGB and HSL — the same color, three ways
Every color on a screen is just a mix of red, green and blue light. The three formats below all describe that mix — they only differ in how they write it down, so any color has one value in each:
| Format | Example | What it means |
|---|---|---|
| HEX | #3b82f6 | red, green, blue in base-16 pairs (00–ff) |
| RGB | rgb(59, 130, 246) | red, green, blue from 0 to 255 |
| HSL | hsl(217, 91%, 60%) | hue 0–360°, saturation %, lightness % |
HEX is the compact form you see most in CSS and design tools. RGB spells the same three channels out in plain decimal, which is easier to read and to tweak by hand. HSL takes a different angle: instead of three light channels it gives you the hue (which color, as an angle round the color wheel), the saturation (how vivid versus grey), and the lightness (how close to white or black).
When HSL is the easier one
HSL shines when you want to adjust a color rather than name it from scratch. Want a paler version of a brand color? Raise the lightness and leave hue and saturation alone. Want a muted, dustier tone? Drop the saturation. Want a matching color across the wheel? Change only the hue. The same moves in RGB mean juggling three numbers at once; in HSL they are one slider each — which is exactly how the tints-and-shades ramp above is built.
Reading a HEX code by hand
A six-digit HEX code is three pairs: #RRGGBB. Each pair is a number from 00 (none of that channel) to ff (all of it, which is 255 in decimal). So #ff0000 is pure red, #00ff00 pure green, #0000ff pure blue, #000000 black and #ffffff white. A three-digit shorthand like #f80 simply doubles each digit — it means the same as #ff8800.
Checking contrast for readable text
Color is not just decoration — text has to stay readable. The contrast checker compares your color against black text and white text and shows each ratio, from 1:1 (invisible) up to 21:1 (black on white). The accessibility guidelines (WCAG) ask for:
- 4.5:1 or more for normal body text to pass level AA;
- 7:1 or more to pass the stricter level AAA;
- 3:1 is enough for large or bold headings at AA.
Pick whichever of black or white text clears the bar — the tool flags the one with more contrast for you.
Private and free
Everything here happens in your browser. No color you pick or type is sent to a server, stored, or logged, and once the page has loaded you can keep using it offline. No sign-up, no limits.
Common questions
- How do I convert a HEX color to RGB?
- Type the HEX code into the HEX field and the RGB and HSL values update instantly. Each HEX pair is one channel in base 16, so
#3b82f6is red 59, green 130, blue 246 —rgb(59, 130, 246). - What is the difference between RGB and HSL?
- RGB mixes red, green and blue light (0–255 each), the way a screen does. HSL describes the same color as hue, saturation and lightness, which is friendlier when you want to make a color paler, darker or more muted without changing which color it is.
- What are tints and shades?
- A tint is your color mixed toward white (lighter); a shade is mixed toward black (darker). The ramp above gives you both from one starting color — handy for hover states, backgrounds and building a small palette.
- What is a good contrast ratio?
- For normal text, aim for at least 4.5:1 to pass WCAG AA, or 7:1 for AAA. Large or bold text can pass AA at 3:1. The checker shows your color against both black and white so you can choose the readable one.
- Is it free and private?
- Yes — free, no sign-up, and everything runs on your own device. Nothing you pick or type is ever uploaded.