Color Converter & Contrast Checker
HEX, RGB, HSL converter with WCAG contrast · free, no signup
WCAG contrast checker
Free Color Converter & WCAG Contrast Checker
Designers and developers constantly move between color formats. Paste a HEX, RGB or HSL value, or use the picker, and see every format instantly, ready to copy into CSS.
The contrast checker compares a text color with a background color and reports the WCAG ratio, telling you whether the pair passes AA and AAA accessibility levels for normal and large text.
Key features
All formats at once
HEX, RGB, HSL and CMYK together.
Visual picker
Choose a color and see the values update.
Contrast ratio
Instant WCAG AA and AAA pass or fail.
One-click copy
Copy any value as CSS.
How to use it
- Enter a color or use the picker.
- Copy the format you need.
- Enter a background color to test contrast.
- Adjust until the pair passes AA or AAA.
Worked example
Example
HEX #4f46e5 RGB rgb(79, 70, 229) HSL hsl(243, 75%, 59%) CMYK cmyk(66%, 69%, 0%, 10%)
Who uses this tool
Web designers
Translate colours between design tools and CSS.
Developers
Get the exact format a framework or API needs.
Brand and print teams
Compare screen and print colour values.
Tips for the best results
- Use HSL when you want to make a colour lighter, darker or less saturated.
- Keep brand colours in one reference sheet with all formats.
- Check contrast before using a colour for text.
- CMYK values are approximate — proof colours in print.
Common mistakes to avoid
- Assuming CMYK values match the screen colour exactly.
- Forgetting the # in a hex value or using the wrong length.
- Using very light greys on white backgrounds for text.
Why use AZRS QuickFix?
It is 100% free, needs no signup and has no watermark or usage limits. The tool runs in your browser, so what you type stays on your device, and it works on phones, tablets and desktops. New tools are added every week — bookmark this page or browse the full QuickFix toolbox.
Frequently asked questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each from base 16 to decimal. This tool does it instantly.
What contrast ratio is required?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.
What is HSL?
Hue, saturation and lightness. It describes color in a way that is easier to adjust than RGB.
Is CMYK exact?
The CMYK value is a simple mathematical conversion. Print colors depend on the printer profile.
What is the difference between HEX and RGB?
They describe the same colour: HEX uses base-16 numbers, RGB uses decimal 0–255 for red, green and blue.
What does HSL stand for?
Hue, saturation and lightness — a more intuitive way to adjust colours.