You are responsible for key management and output validation.
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.
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
Security Tips
- Conversion runs locally — you can check colors from proprietary brand assets without uploading them
- Do not rely on color alone to convey meaning; combine it with icons or text labels
- Verify contrast on the actual screens and lighting conditions your users will have
- Prefer colorblind-safe palettes for data visualization and status indicators
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.
Related Guides
Color Converter Guide: HEX, RGB, HSL
HEX, RGB, and HSL are three views of the same color. Know what each format represents, when alpha matters,…
How to Decrypt AES-256-GCM Locally
Decrypting AES-256-GCM is straightforward when you have the password and the right metadata. Here is the…
AES-256-GCM Encryption: A Developer's Guide
Encrypt and decrypt files locally in your browser with AES-256-GCM - no upload, no account. Code examples,…