Color Converter & Contrast Checker
Converts colors between HEX, RGB, HSL and OKLCH — edit any of the four fields and the rest follow live — and checks the WCAG contrast ratio between a text and background color with pass/fail verdicts for AA and AAA, normal and large text. When a pair fails, it suggests the nearest accessible text color by nudging OKLCH lightness until the ratio passes. A screen eyedropper picks any pixel on your display (Chrome/Edge), an 11-step OKLCH tint/shade ramp turns the color into design tokens with copy-ready CSS variables or a Tailwind @theme block, and out-of-gamut OKLCH values get a Display-P3 vs sRGB warning.
Runs 100% in your browser — nothing you paste leaves your device.
Read the full guide to this tool
Notes
- OKLCH is the perceptually uniform space of modern CSS: equal lightness steps look equal, unlike HSL where yellow at 50% lightness glows and blue is murky.
- WCAG AA requires a contrast of at least 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1.
- sRGB covers ~35% of visible colors; Display-P3 about 25% more. An oklch() color can name colors outside both — browsers clip them to the nearest displayable one.
- Runs 100% in your browser — nothing you paste leaves your device.
Explore the idea
Related tools
CSS Gradient, Shadow & Radius Generator
Visual generators for gradients, box-shadows and border radii.
URL Parser & Query Editor
Split a URL into parts and edit query parameters in a table.
curl Converter
Turn a curl command into fetch, axios, Python or PowerShell.
HTTP Status Codes
Search by code, phrase, or symptom — with retry/cache badges, causes, fixes, and RFC links.
Keycode Inspector
Press any key, see event.key, event.code and modifiers.
User-Agent Parser
Decode any user-agent string: browser, engine, OS, device.