Color Converter

中

Loading...

Color Converter — HEX, RGB, HSL and Contrast Checker

Convert colors between HEX, RGB, and HSL with a live picker, and check the contrast ratio of any foreground/background pair against WCAG accessibility thresholds. Designed for CSS work, design systems, and accessibility audits.

Pick a color visually or paste a value in any format; all notations update together, ready to copy into your stylesheet. The contrast checker reports the exact WCAG ratio and tells you whether the pair passes AA or AAA for normal and large text.

How to convert colors

  1. Pick a color with the visual picker or paste a HEX/RGB/HSL value.
  2. Read the equivalent values in all three notations, live.
  3. Copy the format your CSS or design tool needs.
  4. Enter a text color and background color to check contrast.
  5. Aim for 4.5:1 (AA) for body text and 3:1 for large text.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

They describe the same colors. HEX and RGB specify raw red/green/blue channels; HSL (hue, saturation, lightness) is human-oriented — "same blue, a bit lighter" maps directly to changing L. Use HSL while exploring, HEX in production CSS.

What contrast ratio do I need for accessibility?

WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text (18pt+) at level AA; AAA raises those to 7:1 and 4.5:1. The checker computes the exact ratio for your pair so you do not have to eyeball it.

Does it support alpha / transparent colors?

The converter focuses on solid colors — the format design systems and contrast math are defined for. For overlays, convert the composited (blended) color instead.

Related tools

PureKit · color · Free online tool — files processed locally in your browser, no upload.