Color Converter & Contrast Checker
Convert colors between HEX, RGB, and HSL, and check WCAG contrast ratios for accessible text. All conversion happens in your browser.
Tool workspace
Preview
Conversions
Contrast Checker
How to Convert a Color and Check Contrast Online
Learn how to convert colors between HEX, RGB, and HSL and check WCAG contrast ratios locally in your browser.
- 1
Enter a color
Type a HEX, rgb(), or hsl() value or pick a sample swatch.
- 2
Read the conversions
Copy the equivalent HEX, RGB, and HSL values from the results.
- 3
Check contrast
Set foreground and background colors and read the ratio with its AA/AAA label.
- 4
Apply the accessible pair
Use the verified pairing in your CSS or design tokens.
Common Use Cases
- 1Convert design tokens between HEX, RGB, and HSL for CSS and design tools
- 2Verify text and background contrast against WCAG AA or AAA targets
- 3Pick accessible brand colors before committing to a palette
- 4Normalize colors from mockups into consistent CSS values
Frequently Asked Questions
Which color formats are supported?
HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba() with 0-255 channels or percentages, and hsl()/hsla() with degrees and percentages. Alpha values are preserved.
Do my colors leave the browser?
No. All conversion and contrast math runs locally in your browser. Nothing is uploaded or stored.
What contrast ratio should I aim for?
WCAG 2.x recommends at least 4.5:1 for normal text and 3:1 for large text (AA); 7:1 for normal text at AAA. The checker labels each pair with AA or AAA.
How is transparency handled in contrast checks?
Translucent colors are composited over the background before the ratio is calculated, and a translucent background is first composited over white. The result reflects what a viewer sees rather than the raw channel values.
Why do large-text thresholds differ?
WCAG 2.x allows a lower ratio for large text because its strokes are thicker relative to the glyph size: 3:1 at AA instead of 4.5:1. The checker labels each pair with the level it meets.
Related Guides
Related Tools
You are responsible for key management and output validation.