Convert colors between HEX, RGB, HSL, HSV and CMYK, check WCAG contrast for AA/AAA, and copy 10-step tints and shades as CSS variables. Runs in your browser.
Edit any field and the others update instantly. The HEX field also accepts rgb(), hsl() and CSS color names like tomato. Use ↑↓ in number fields (Shift for steps of 10). HSL, HSV and CMYK show one decimal place only when needed, so re-entering a value gives back the exact same color. CMYK is a simple conversion without a color profile, so it may differ from print values.
Large text = 24px (18pt) or larger, or bold at 18.66px (14pt) or larger. UI elements such as icons and input borders need at least 3:1 (1.4.11).
Large 24px — Sphinx of black quartz, judge my vow
Bold 18.66px — The quick brown fox jumps
Body 16px — Body text in a design system needs enough contrast so that everyone can read it comfortably.
Caption 12px — The smaller the text, the more contrast matters.
Each swatch mixes the current color with 0–90% white or black (sRGB mix, same as Sass mix()). Click to copy the HEX, double-click to make it the current color.
WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA raises that to 7:1 and 4.5:1. Icons and input borders need 3:1.
This is a simple mathematical conversion without a color profile. Print software uses ICC profiles for specific inks and paper, so treat these values as a starting point.
No. All conversions happen in your browser. Your last color is remembered locally and added to the URL so you can share it.