Color converter and contrast checker
Type any CSS color (HEX, rgb(), hsl(), hwb(), oklch() or a name like teal) to get it in every format. The contrast checker shows the WCAG ratio and whether text passes AA and AAA.
- ๐ Runs on your device
- โค 0 bytes uploaded
- ๐ด Works offline
- โ Free, no sign-up, no watermark
How to use Color Converter
- Type a color or use the color picker.
- Copy the format you need.
- In the contrast checker, set the text and background colors.
- Check the ratio and the AA/AAA results.
Is it private?
Yes. Color Converter runs entirely in your web browser. What you type is never sent to Nolo or anyone else, and the page cannot send it anywhere: its security policy only allows it to talk to nolotools.com, which has no place to receive data. Nothing is stored either: close the page and it is gone. How Nolo works.
Questions and answers
What contrast do I need for WCAG?
Level AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or about 18.7 px bold) and for icons and UI parts. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
What is OKLCH?
A newer CSS color format (lightness, chroma, hue) based on the OKLab color space. Equal steps in lightness look equally bright to the eye, which makes it good for palettes. Supported in all modern browsers.
What happens with OKLCH colors outside sRGB?
OKLCH can describe colors brighter than most screens show. The tool tells you when a color is outside sRGB and shows the nearest sRGB values, found by clipping each channel (a simple method, not full CSS gamut mapping).
How are transparent colors handled in the contrast check?
A semi-transparent text color is blended over the background, and a semi-transparent background over white, before the ratio is calculated.
Is my data sent to a server?
No. Everything runs in your browser and your data never leaves your device. The page is not allowed to talk to any other site, so it is safe to use with real data and secrets.