How to convert a HEX color to RGB or HSL
- 1.
Enter a color
Use the picker, type a code (e.g. #336699, rgb(51 102 153), hsl(210 50% 40%)) or edit any format field.
- 2.
Copy the notation
Each format has its own field and copy button: HEX, RGB/RGBA, HSL/HSLA, HSV, CMYK and OKLCH.
- 3.
Check contrast
Pick a background color and see the ratio plus WCAG AA and AAA results for normal and large text.
- 4.
Generate shades
Click a shade or tint to make it the current color, or copy the whole ramp.
Color formats compared
| Format | #336699 written as | Typical use |
|---|---|---|
| HEX | #336699 | CSS, design handoff - the shortest notation |
| RGB | rgb(51, 102, 153) | screens and code; rgba() adds alpha |
| HSL | hsl(210, 50%, 40%) | tweaking hue, saturation or lightness by hand |
| HSV / HSB | hsv(210, 67%, 60%) | color pickers in Photoshop and Figma |
| CMYK | cmyk(67%, 33%, 0%, 40%) | rough print estimate |
| OKLCH | oklch(50.9% 0.087 252) | modern CSS, perceptually even palettes |
HEX to RGB is just base-16 to base-10 for each pair: 33₁₆ = 51, 66₁₆ = 102, 99₁₆ = 153. For HSL, lightness is L = (max + min) / 2 of the RGB channels on a 0-1 scale, and saturation is S = (max − min) / (1 − |2L − 1|). The main input accepts HEX with 3, 4, 6 or 8 digits (with or without #), rgb(), hsl() and oklch(), with commas or spaces.
WCAG contrast thresholds
The contrast ratio is (L₁ + 0.05) / (L₂ + 0.05), where L is the relative luminance of the lighter and darker color. It ranges from 1:1 to 21:1 (black on white). WCAG 2.x requires 4.5:1 for AA normal text, 3:1 for AA large text and UI components, 7:1 for AAA normal text and 4.5:1 for AAA large text. For example #767676 on white gives 4.54:1 (passes AA) while #777777 gives 4.48:1 (fails).
“Large text” means at least 24 px regular or about 18.66 px bold (18 pt / 14 pt). WCAG 2.1 AA is the level referenced by most accessibility rules, including the European Accessibility Act and Section 508 in the US, so treat 4.5:1 as the practical minimum for body text.
About CMYK and OKLCH
CMYK values here are calculated with the simple formula K = 1 − max(R, G, B), C = (1 − R − K) / (1 − K) and so on, so they can differ from print results, which depend on the paper, inks and ICC profile (e.g. FOGRA39). OKLCH is a perceptually uniform polar notation: L is lightness (0-100%), C is chroma (usually 0-0.4) and h is the hue angle. Unlike HSL, two OKLCH colors with the same L really look equally bright, which makes it easier to build accessible palettes. Modern browsers support oklch() in CSS; some OKLCH colors fall outside the sRGB gamut, and the tool warns you and fits them to the nearest displayable color.
How shades and tints are generated
The tool produces 9 shades and 9 tints of the current color. Shades are mixed with black and tints with white in 10% steps (10%, 20% … 90%), channel by channel in RGB. Example: #336699 mixed 50% with white gives #99B3CC. Click any swatch to make it the current color, or copy the whole ramp at once - handy as a starting point for hover states, borders and backgrounds in a design system.
Frequently asked questions
How do I convert HEX to RGB?
+
Are CMYK values accurate for print?
+
What contrast do I need for text?
+
What is the alpha channel?
+
Which formats can I type in the main field?
+
What is the difference between HSL and HSV?
+
Updated: