Which color formats can I paste?

HEX (#ff0000 or #f00), rgb(), hsl(), oklch(), cmyk(), and CSS names such as rebeccapurple. The page fills HEX, RGB, HSL, OKLCH, and CMYK from that one value.

How is the contrast ratio measured?

It is the WCAG 2 contrast ratio from relative luminance. 4.5:1 passes AA for normal text. 3:1 passes AA for large text and interface components. 7:1 passes AAA for normal text. Large text AAA uses 4.5:1.

Do transparent colors count?

Yes. A color with alpha is flattened over the background you pick, then the ratio is measured on that opaque result.

OKLCH is lightness, chroma, and hue in the OKLab space. Lightness tracks what looks lighter, so it is easier to build a ramp than HSL.

Is the CMYK value a print profile?

No. It is the simple device conversion from the sRGB bytes: the black plate is whatever the darkest channel leaves behind. A press profile will differ.

What does the Tailwind name mean?

It is the nearest token in the current Tailwind palette, measured in OKLab. red-500 next to pure red means that token is the closest chip, not that the hex is identical.

Color converter

Turn any color into HEX, RGB, HSL, OKLCH, and CMYK, and check the contrast ratio.

Runs in browser

Use via MCP

Use from your agent

Streamable HTTP at https://benchline.fabwaseem.com/mcp. No key. The tool name is convert_color.

mcp.jsonjson

2 "mcpServers": {

3 "benchline": {

4 "url": "https://benchline.fabwaseem.com/mcp"

5 }

6 }

tools/calljson

2 "jsonrpc": "2.0",

3 "id": 1,

4 "method": "tools/call",

5 "params": {

6 "name": "convert_color",

7 "arguments": {

8 "color": "example",

9 "background": "#ffffff"

10 }

11 }

12}

Related tools

How it works

Free color converter and contrast checker. Paste HEX, RGB, HSL, OKLCH, CMYK, or a CSS color name and read every format back. The contrast ratio uses WCAG 2, with AA and AAA flags for normal and large text, plus the nearest Tailwind token.

01
Paste a color
Use HEX, rgb(), hsl(), oklch(), cmyk(), or a CSS name. The swatch and every format update together.
02
Copy the format you need
Each row has its own copy button for HEX, RGB, HSL, OKLCH, and CMYK.
03
Check the contrast
Set a background. The ratio and the AA and AAA flags use WCAG 2, after flattening any transparency.