🎨 Color Converter & Contrast Checker

Using Color Picker & Converter

Convert a brand color from HEX to RGB, HSL and RGBA for CSS or design software, and check whether a text and background pair passes WCAG contrast.

How to use it

1. Type a HEX value, or use the color picker; RGB, HSL and RGBA update to match. Eight-digit HEX such as #1e90ff80 adds transparency.
2. Copy the format your tool needs using the Copy button beside it.
3. In the WCAG 2.x Color Contrast Checker, set Text Color (Foreground) and Background Color.
4. Read the ratio and the AA and AAA results for normal and large text.

Worked example

Input and settings

HEX #1e90ff; contrast check of #777777 text on #ffffff

Expected result

rgb(30, 144, 255) and hsl(210, 100%, 56%); contrast 4.48:1, which fails AA for normal text but passes AA for large text.

Limits and common mistakes

• A pass or fail is based on the exact ratio, so 4.48 fails the 4.5 threshold even though it rounds close.
• Contrast is checked only for solid colors; translucent colors are rejected because the result depends on what is behind them.
• HSL values are rounded to whole numbers, so they can be a fraction away from the exact HEX color.
• Screen colors are not print colors: this tool does not produce CMYK or Pantone values.

Found a mismatch? Report a problem with a non-sensitive example. Read our privacy information before sharing inputs or links.