Color Converter
Convert between HEX, RGB and HSL, and see the WCAG contrast ratio against white and black.
How to use this tool
- Fill in the options above.
- The result updates as you change the input — there is nothing to submit and nothing to wait for.
- Read the figures in the result panel.
- Use Copy or Download if you need the output elsewhere. Nothing was uploaded at any point.
Accepts hex in three or six digits, rgb() and hsl() in either comma or space syntax. The contrast figures use the WCAG 2.1 relative luminance formula, so they match what an accessibility checker will tell you rather than being a rough approximation.
Color Converter — the specification
| Formats in | HEX, RGB, HSL |
|---|---|
| Formats out | HEX, RGB, HSL, CSS custom property |
| Contrast | WCAG 2.1 ratio against white and black |
| Verdict | Whether it passes AA for normal and large text |
How it works
This tool runs entirely in your browser. There is no server involved, which means nothing you type or upload is transmitted, stored, or logged — and there are no usage limits, because there is nothing for us to ration.
You can confirm it yourself: open your browser's developer tools, select the Network tab, and use the tool. No request is made.
Who needs Color Converter
Translating a brand colour into the format a stylesheet wants, or checking whether text in that colour will be readable before you ship it.
Color Converter — frequently asked questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, which is 18.66px bold or 24px regular and above. AAA asks for 7:1 and 4.5:1.
Why does my HSL round trip change by a digit?
HSL is stored here as whole degrees and percentages, and the conversion back to 8-bit RGB rounds. The visible colour is identical; the arithmetic simply cannot be lossless in both directions.
Does it handle alpha or opacity?
Alpha is ignored. Contrast against a semi-transparent colour depends on what is behind it, so a single ratio would be misleading.
Does this work offline?
Yes. Once the page has loaded you can disconnect from the internet and it keeps working, because all the processing happens in your browser. That is also the simplest way to confirm nothing is being sent anywhere.
Is there a limit on how much I can paste in?
Nothing we impose. The practical limit is your device’s memory, since the work happens locally. Very large inputs get slower rather than being refused.
Can I use this on a phone?
Yes. The layout adapts to a small screen and everything works the same way.
Related tools
From other categories
Background reading: Text and Developer Tools That Never Upload Your Data
Your file never leaves your device. Open your browser's Network tab while you use this page and you will see no upload — how that works.
Disclaimer. Published requirements change without notice. Confirm against the official source before you submit. Full disclaimer.