Color Tools
Convert hex to RGB, HSL, OKLCH, and more. Check WCAG contrast ratios and APCA perceptual contrast for accessible designs.
2 tools in this category
Color on the web used to be hex and RGB. Then HSL made manual palette work sane. Then OKLCH (and perceptual color spaces) made truly uniform palettes possible. Accessibility added contrast-ratio math on top. These tools give you every conversion and every contrast check, keyboard-first, with live previews.
Which color space when?
HEX for copy-paste compatibility with legacy code. RGB for canvas and image manipulation. HSL for intuitive palette adjustments (change hue, keep saturation). OKLCH for perceptually-uniform gradients and palette interpolation — a 50% lightness increment looks 50% brighter, unlike HSL. Modern CSS (2026) accepts all four natively.
Contrast: WCAG vs APCA
WCAG 2.1 contrast ratio is the legal standard (AA requires 4.5:1 for normal text, 3:1 for large). It uses relative luminance and is known to over-estimate dark-on-dark contrast. APCA (proposed for WCAG 3) uses perceptual lightness and gives more accurate scores for real-world readability. Our Color Contrast tool shows both.
Common accessibility bugs
Pure gray-on-gray designs often fail WCAG even when they look fine. Semi-transparent overlays are tricky — compute against the effective color, not the rgba. Icon-only buttons need 3:1 against their background. Our Color Contrast tool includes UI-component thresholds alongside text thresholds.
Frequently asked questions
Why does OKLCH look the same as HSL in my browser?
OKLCH is newer (CSS Color 4, now baseline in 2024 browsers). If your browser is older or you're using a library that converts everything to hex, you lose the perceptual benefit. Test directly in a modern browser to see the difference.
Is WCAG AA enough for legal compliance?
Depends on jurisdiction. WCAG 2.1 AA is the minimum for most US/EU accessibility law (ADA, EAA). Government sites often require AAA. Our tool shows both grades for every ratio.
Can I check contrast for gradients?
Not directly — contrast is a pairwise property. Check the darkest and lightest pair in the gradient against your foreground. If both pass, the gradient passes.
Does the converter handle CMYK?
No — CMYK is a print color space and requires a device profile (ICC) for accurate conversion. We focus on screen colors (hex/RGB/HSL/OKLCH).