What color formats are supported as input?

You can type a HEX code (#RRGGBB or #RGB), an rgb()/rgba() value, or an hsl()/hsla() value — the tool detects the format automatically.

Why would I use HSL instead of HEX?

HSL (Hue, Saturation, Lightness) makes it easy to create consistent color variations — for example, lightening or darkening a color by only changing the lightness value, which HEX and RGB don't make obvious.

What do the AA and AAA contrast badges mean?

They're WCAG accessibility thresholds for text contrast: AA requires a 4.5:1 ratio for normal text, AAA requires 7:1. A color that fails both may still be fine for large text or decorative use, where the bar is lower.

Color Converter

Pick a color and convert instantly between HEX, RGB and HSL.

HEX

RGB

HSL

WCAG contrast — using this color as text

On white — Aa Bb Cc

3.69:1AA FailAAA Fail

On black — Aa Bb Cc

5.69:1AA PassAAA Fail

Processed 100% in your browser — nothing you enter here is ever uploaded.

Common use cases

Matching a brand color across tools

Take a HEX swatch from a brand guide and get the RGB or HSL equivalent needed for a design tool that expects a different format.

Building a lighter or darker variant

Convert a base color to HSL, then adjust just the lightness value to create a consistent hover or shade variant.

Reading a color picked from an image

Take an RGB value sampled from an image editor and convert it to HEX for use directly in CSS or Tailwind config.

How to use the Color Converter

Use the color swatch to pick visually, or type a value directly in HEX, RGB or HSL format.

All three formats update together instantly, however you enter the color.

Click the copy icon next to any format to grab just that value for your CSS.

Check the WCAG contrast section to see if the color is readable as text on a white or black background, with AA/AAA pass-fail badges.