Color Code Converter

About the Color Code Converter

The color code converter turns a color into all three common web formats: HEX (#FF8800), RGB (rgb(255, 136, 0)) and HSL (hsl(32, 100%, 50%)). Type a code in any of them, or pick a color, and copy the format you need for CSS, a design tool or code.

It also checks contrast. Enter a text color and a background color to see their WCAG contrast ratio and whether they pass the AA and AAA levels for normal and large text, so your text stays readable for everyone.

Everything runs in your browser; nothing you type is sent anywhere.

How to use it

1. Type a color code such as #777, rgb(0 128 255) or hsl(120, 50%, 50%), or use the color picker.
2. Read the color in HEX, RGB and HSL next to its preview.
3. Press Copy next to the format you want.
4. For contrast, enter a text color (or leave it empty to use the color above) and a background color.
5. Read the contrast ratio and the AA and AAA results for normal and large text.

Features

• HEX, RGB and HSL: Reads short and long HEX, rgb() and hsl() with commas or spaces, and three plain numbers.
• Color picker: Choose a color visually and get its codes at once.
• Contrast ratio: The WCAG 2 contrast ratio of any two colors, from 1:1 to 21:1.
• AA and AAA: Pass or fail for normal and large text at both levels.
• Clear errors: Says which part of a code is wrong, such as a red value above 255.

Examples

Limitations and notes

• Colors with transparency (alpha), such as #FF000080 or rgba(), are not supported.
• Color names (red, blue), CMYK, LAB and other color spaces are not converted.
• HSL values are rounded to whole numbers, so converting back can move a channel by a few steps.
• The contrast check follows WCAG 2.x; it does not judge font weight, size or colour blindness for you.

Frequently asked questions