Pick a color or type any value to instantly convert between HEX, RGB and HSL. Copy ready-to-use CSS with one click.
#4f8ef7rgb(79, 142, 247)hsl(218, 91%, 64%)#4f8ef7) is the six-digit hexadecimal notation used most often in web design and CSS. RGB describes a color as red, green and blue channels from 0–255 and is handy when mixing colors programmatically. HSL (hue, saturation, lightness) is the most intuitive for humans — nudge the lightness to create tints and shades of the same hue. All three describe the same color; this tool keeps them in sync as you edit any one of them.| Format | Best for | Supports alpha |
|---|---|---|
| HEX | Design handoff, brand guidelines, anything copied between tools | Yes, as 8 digits (#RRGGBBAA) |
| RGB | Programmatic mixing, canvas and image work | Yes, via rgb() with a slash |
| HSL | Building tints, shades and themes by adjusting one number | Yes, via hsl() with a slash |
| OKLCH | Perceptually even palettes and accessible contrast steps | Yes |
| Content | AA minimum | AAA minimum |
|---|---|---|
| Body text under 18pt | 4.5:1 | 7:1 |
| Large text, 18pt or 14pt bold | 3:1 | 4.5:1 |
| Icons and UI component borders | 3:1 | — |
| Decorative elements | No requirement | — |
Type or paste your HEX code (with or without the #) into the HEX field. The RGB and HSL values update instantly, and you can copy any format with one click.
Yes. Short codes like #f80 are automatically expanded to their full 6-digit form (#ff8800) before conversion.
Absolutely. Copy the HEX, rgb() or hsl() string and paste it straight into your stylesheet — they are all valid CSS color values.
It is only a marker indicating the digits that follow are hexadecimal. The six digits are three pairs giving the red, green and blue channels, each from 00 to FF (0 to 255).
Convert to HSL and adjust the lightness value, leaving hue and saturation alone. That keeps the colour recognisably the same while changing only its brightness — much harder to do reliably in HEX.
Both use hue and saturation, but HSL's third value is lightness where 100% is white, while HSV uses value where 100% is the most vivid form of the colour. HSL is used in CSS; HSV appears in many design applications.
A conversion exists, but it is approximate. RGB covers a wider gamut than CMYK ink, so vivid screen colours print duller. For print work, start from a CMYK or Pantone reference rather than converting at the end.
Measure the contrast ratio between text and background. WCAG AA requires 4.5:1 for body text and 3:1 for large text. Do not rely on HSL lightness as a proxy — perceived brightness varies a lot between hues.
A newer CSS colour space designed so that equal numeric steps look like equal visual steps, which HSL does not manage. It is excellent for generating consistent palettes and is supported in all current browsers.