Contrast updates as you edit.
Utility Tools
Color Converter & Contrast Checker
Convert colors between HEX, RGB, and HSL, preview the swatch, and check contrast against light and dark backgrounds. Free, fast, and built for a clean browser workflow.
Related tools
Try these next
Image & PDF Tools
Image Compressor & Resizer
Resize, compress, preview, and download optimized images directly from your browser.
Generators
QR Code Generator
Create scannable QR codes for links, text, WiFi details, contact cards, and short messages.
Finance Calculators
Percentage Calculator
Calculate a percentage of a number, find what percent a value is of another, and work out percentage increase or decrease.
Utility Tools
Unit Converter
Convert common measurements including length, weight, temperature, area, and volume.
About this tool
This color converter turns a HEX code, RGB triplet, or HSL value into the other formats and shows a live swatch so you can confirm the color before you paste it into CSS, Figma, or a design brief.
The contrast checker compares your foreground color with white, black, and an optional background using the WCAG relative-luminance formula, then labels AA and AAA for normal text.
Everything runs in the browser. Color values are not uploaded.
Tips for better results
- WCAG AA for normal text needs a contrast ratio of at least 4.5:1. Large text (18pt or 14pt bold) can pass at 3:1.
- AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
- Very light brand colors often fail on white. Pair them with a darker text color or a darker background.
- Copy the HEX value when a design tool expects a single code, and RGB when you need separate channel numbers.
How to use
- 1 Pick a color or type a HEX, RGB, or HSL value.
- 2 Read the converted values and the live swatch.
- 3 Check the contrast ratio against white, black, or a custom background.
FAQ
Which formats can I convert?
HEX, RGB, and HSL. Change any one and the other formats update.
What does the contrast ratio mean?
It compares relative luminance of the foreground and background. Higher numbers are easier to read.
Does it follow WCAG?
The ratio uses the WCAG 2 relative luminance formula. AA and AAA labels follow the normal-text thresholds of 4.5:1 and 7:1.
Is my color uploaded?
No. Conversion and contrast math run locally in your browser.
Can I check a custom background?
Yes. Set a background color in addition to the built-in white and black checks.
Will this replace a full design system audit?
No. It checks one pair at a time. Review real UI text size and weight before you ship.