Color Converter + Contrast
Convert between HEX, RGB, HSL, HSV, CMYK and check WCAG contrast for accessible foreground/background pairs.
About the Color Converter + Contrast
This tool does two jobs on one screen. The top half takes a single color and shows it back in HEX, RGB, HSL, HSV, CMYK, plus its alpha value, so you can copy whichever format your CSS, design file, or print spec needs. The bottom half is a WCAG contrast checker: pick a text and background color and see the exact contrast ratio, with pass or fail marks for AA and AAA.
Type or paste a value into the Input box, or click the color swatch beside it to pick one; the two stay in sync. Once the value parses, you get a large preview block, a luminance percentage, a light or dark label, and every format listed as a row. Click any row to copy that value; a check mark confirms it, and invalid text shows a 'Not a valid color' notice.
Conversions and contrast checks update instantly in the page, with no account and nothing sent anywhere. Nothing you type is uploaded; the parsing, conversion, and contrast math all happen on your machine using the colord library, so it works offline once loaded and your color values never leave the page. Use it for a quick convert-and-copy or a contrast check without opening a full design app.
How to use the Color Converter + Contrast
- 1Type or paste a color into the Input field, or click the swatch next to it to pick one.
- 2Read the HEX, RGB, HSL, HSV, CMYK, and Alpha rows plus the luminance label.
- 3Click any format row to copy that exact string to your clipboard.
- 4Under WCAG contrast checker, set the Foreground and Background fields by typing or using their pickers.
- 5Check the Ratio tile and the AA and AAA marks for Normal and Large text, then click Swap colors to flip the pair.
What you can use it for
Convert a brand hex for print
A designer hands you a logo in HEX but the print vendor wants CMYK. Paste the hex, read the CMYK row, and click it to copy. You also get RGB and HSL in the same view if a second spec needs them.
Verify button text is readable
You built a colored button and are unsure the label is legible. Put the text color in Foreground and the button color in Background. The ratio and the AA Normal mark tell you if it clears 4.5:1.
Nudge a color to pass AAA
Your pairing passes AA but fails AAA. Adjust the foreground with the picker and watch the ratio climb until the AAA Normal mark turns green, so you fix contrast without guessing.
How the contrast ratio is calculated
The ratio is not a simple difference between two colors. WCAG defines it from relative luminance, a weighted measure of how bright each color appears to the eye. Red, green, and blue are combined with different weights because green looks brighter than blue at the same value, and each channel is first linearized to undo the sRGB gamma curve. This is the luminance figure shown under your preview color.
The final ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), from 1:1 for identical colors up to 21:1 for black on white. This is why two distinct-looking colors can still fail: hue does not count, only luminance does, so saturated red on green reads as low contrast.
Frequently asked questions
Does this send my colors anywhere?
No. Color math runs entirely in your browser. The Input parsing, the format conversions, and the contrast ratio are all computed locally with the colord library. No color value is sent to a server, so the tool works offline once loaded and nothing you enter is stored or transmitted.
Which input formats does it accept?
The Input field accepts anything colord can parse: hex like #3b82f6, rgb() and rgba(), hsl() and hsla(), and named CSS colors such as tomato. If the value does not parse, you see a 'Not a valid color' message and the format rows stay hidden.
What do the AA and AAA marks mean?
They are WCAG contrast thresholds. AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large. The tool shows a green check when the ratio meets a level and a red cross when it falls short.
Why does the color picker jump to black sometimes?
The native swatch only accepts a 7-character hex like #ff0000. If your Input is an rgb, hsl, named color, or an 8-digit hex with alpha, the picker cannot represent it and shows #000000 instead. Your typed value and the format rows are unaffected.
Does contrast account for transparency?
The converter reports the Alpha value of a single color, but the contrast checker compares foreground and background as solid colors. If your design uses semi-transparent text over a busy background, the real result may differ from the ratio here, which assumes full opacity.