Color Converter
Convert HEX, RGB, CMYK and HSL color codes to each other, and check text/background contrast (WCAG) and palette combinations.
CMYK values are approximations from the standard formula, without a color profile (ICC).
Copy-ready formats
-
HEX
-
RGB
-
CMYK
-
HSL
Color Contrast Checker
Measures the luminance contrast of a text/background pair by WCAG 2.x, and tabulates every combination in a palette. Body text should reach 4.5 : 1.
Large text sample (18pt+)
This is regular-size sample text. Check that it stays readable at body size.
Contrast ratio
Translucent colors are measured as they appear over the background. A translucent background is assumed to sit on white.
Palette matrix
List colors separated by new lines or commas (up to 12) to see the contrast of every text/background combination. Click a cell to load it into the checker above.
Based on WCAG 2.x relative luminance. It does not guarantee real-world legibility, which also depends on weight, size and surrounding colors. Ratios are truncated (not rounded) to two decimals so 4.499 never looks like a pass at 4.50. Colors you enter are not sent to the server.
Color harmony & shades
Generate matching colors and a 50–950 scale from one base color, then copy it as CSS or Tailwind. Click a swatch to copy its HEX; the contrast of text on it is shown too.
Matching colors
Hue is rotated on the color wheel while saturation and lightness stay the same. Use it as a starting point and refine by eye.
50–950 scale
500 is your base color; lighter steps mix in white and darker steps mix in black. It works best when the base is a mid tone. Values differ from the official Tailwind palette.
RGB vs CMYK
| RGB | CMYK | |
|---|---|---|
| Method | Additive mixing of light | Subtractive mixing of ink |
| Used for | Screens, phones, web | Print, cards, posters |
| Primaries | Red, green, blue | Cyan, magenta, yellow, black |
| Gamut | Wide (bright, vivid colors) | Narrow (no neon or very vivid colors) |
Conversion formula
K = 1 − max(R′, G′, B′), C = (1 − R′ − K) ÷ (1 − K), M = (1 − G′ − K) ÷ (1 − K), Y = (1 − B′ − K) ÷ (1 − K) (R′ = R ÷ 255). The inverse is R = 255 × (1 − C) × (1 − K).
Why printed colors look different
A monitor emits light, while print reflects light off paper. CMYK also covers a smaller range than RGB, so vivid screen blues and greens turn dull in print. For important jobs, convert with the profile your printer requires and check a proof.
About black
Use K only (C0 M0 Y0 K100) for body text. A black made from all four inks blurs at the edges of small text.
FAQ
Why does the result differ from my printer?
This tool uses the standard formula without a profile, so it is an approximation. Use your printer's ICC profile for exact colors.
Is my color saved on the server?
No. Everything is calculated in your browser and nothing is sent anywhere.
Can I type a 3-digit HEX?
Yes. #F00 is read as #FF0000.