◐ Color Converter
HEX ↔ RGB ↔ HSL, a Tailwind-style shade palette and a WCAG contrast checker. Type in any box and the rest follow.
How to use the color converter
- Type a color into the hex, rgb or hsl box and the other formats fill in automatically. You can also click the big swatch on the left to open your system color picker.
- Use copy next to each box. The css var row gives you a ready-made
--color-brand: #HEX;custom property declaration. - shades builds an 11-step 50–950 palette with the same hue and saturation but different lightness. Click a tile to copy its HEX, or copy as css to grab all eleven
--brand-50…--brand-950variables. - In the contrast checker, set a text color and a background color to see the contrast ratio and WCAG pass/fail results. swap ⇄ flips the two.
If the URL ends with a HEX value like #FF6600, the page starts with that color, and the URL updates as you change colors — so you can share a link to an exact color.
HEX vs. RGB vs. HSL
| Format | Example | Best for |
|---|---|---|
| HEX | #FF6600 / #F60 | Design hand-off, CSS, brand guides — compact and copy-paste friendly |
| RGB | rgb(255, 102, 0) | Math and code (canvas, image processing); same data as HEX in base 10 |
| HSL | hsl(24, 100%, 50%) | Tweaking: "a bit darker," "less saturated," building palettes |
- HEX writes red, green and blue as two hexadecimal digits each (00–FF). The 3-digit shorthand
#F60is accepted too. - RGB is the same three channels in decimal, 0–255. Spaces instead of commas work as well (
rgb(255 102 0)). - HSL is hue angle on the color wheel (0–360°), saturation and lightness. It's the most intuitive format for design-system palettes.
How to convert HEX to RGB by hand
Split the six digits into three pairs and convert each pair from base 16 to base 10: #C6FF3D → C6 = 12×16 + 6 = 198, FF = 255, 3D = 3×16 + 13 = 61 → rgb(198, 255, 61). Going the other way, divide each channel by 16: the quotient is the first hex digit and the remainder the second. Our number base converter shows the same hex ↔ decimal math step by step.
How the shade palette is built
Your color is converted to HSL. Hue and saturation stay fixed, and lightness is set to 97, 93, 85, 75, 63, 52, 43, 35, 27, 20, 12% to create 11 steps. Lower numbers are lighter; 500 is roughly the mid-tone near your base color. A common pattern: buttons at 500–600, hover one step darker, subtle background boxes at 50–100, body text at 800–950. The label on each tile switches between black and white automatically so it stays readable.
WCAG contrast ratio requirements
Contrast ratio is (Llighter + 0.05) ÷ (Ldarker + 0.05), where L is each color's relative luminance. It ranges from 1:1 (same color) to 21:1 (black on white).
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum, required by most US accessibility policies) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
"Large text" means at least 18pt (24px) regular, or 14pt (about 18.7px) bold. UI components and icons also need 3:1 against adjacent colors under WCAG 2.1.
Alpha transparency isn't supported: the alpha value in rgba() / hsla() is ignored and 8-digit HEX (#RRGGBBAA) isn't recognized. The shade palette uses fixed HSL lightness steps, so it won't exactly match Tailwind's default palette. Everything runs in your browser.