EN

Color converter

Type any CSS color or pick one, and get it in every format at once. Check the contrast against a background and generate lighter and darker shades.

Free and private. Everything runs in your browser, nothing is uploaded.

How it works

  1. Enter a colorType a value like #0d6b57, rgb(13 107 87) or teal, or use the picker.
  2. Copy the format you needEvery format updates at once; copy it with one click.
  3. Check contrastSet a background color and read the WCAG results.

Every format from one input

Designers hand over HEX values, CSS needs rgb() or hsl(), design tokens increasingly use OKLCH and printers ask for CMYK. Type the color in any format the browser understands, including names like rebeccapurple, and all the others appear at once, ready to copy.

OKLCH is a perceptual color space supported by all modern browsers: equal steps in lightness look equal to the eye, which is why the shade palette below is built in OKLCH rather than by mixing with white and black.

Accessible contrast

Text must stand out from its background for people with low vision. The contrast checker calculates the WCAG ratio and shows whether the pair passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 and 4.5:1). Semi transparent colors are blended with the background first, as the browser would.

Frequently asked questions

Which color formats can I type?

Anything valid in CSS: HEX with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), lab(), oklch() and color names.

Is the CMYK value exact for printing?

It is a simple conversion without a printer profile. For professional print use the CMYK values from your print shop's profile.

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for normal text and 3:1 for large text and interface parts.

Why does OKLCH matter?

It matches how people see lightness, so palettes and gradients made in OKLCH look even.