What input formats are accepted?

HEX (#16A34A, #1A4), rgb(22,163,74), hsl(142,76%,36%) and CSS color names such as green or tomato. The browser's own color parser is used, so almost anything valid in CSS works.

What contrast ratio do I need?

Under WCAG 2.1, normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (24px, or bold at 18.66px and above) relaxes to 3:1 for AA and 4.5:1 for AAA. This tool shows all four at once.

Can I send the CMYK value straight to a printer?

Not recommended. The CMYK shown here comes from a simple formula that ignores device characteristics. Printed color depends on paper, ink and color profile, so for color-critical work convert with the printer's profile and check a proof.

Does it handle transparency?

Only opaque colors for now. An rgba value or 8-digit HEX is read as its RGB part. The real contrast of a semi-transparent element has to be computed against whatever sits behind it.

How is the shade ramp built?

The hue and saturation of your base color are kept while lightness steps from 10% to 90% in nine stops — a useful starting point for a design system's color scale.

Color Converter - HEX, RGB, HSL, CMYK and Contrast Checker

🖼️

Image Converter

Color code converter

Color

Pick

CMYK here is a device-independent approximation. Printed color depends on paper, ink and profile, so check against a press proof.

Contrast checker (WCAG)

Text color

Background

Normal text — this is how it reads at body size

Large text (24px+)

5.98:1

AA normal 4.5:1 · passAA large 3:1 · passAAA normal 7:1 · failAAA large 4.5:1 · pass

Palette generator

Complementary

Analogous

Triadic

Shades

Color tool features

Color Converter — shows HEX, RGB, HSL and CMYK side by side. Input accepts HEX, rgb(), hsl() and CSS color names such as green or tomato, or you can pick visually with the color picker. Contrast Checker — computes the contrast ratio between a text color and a background using the WCAG 2.1 formula and shows AA and AAA results immediately, with a live preview of how the text actually reads. Palette Generator — derives complementary, analogous and triadic colors plus a nine-step shade ramp from your base color. Click any swatch to copy its HEX. Everything is computed in your browser.

How to use

1. Type a HEX, RGB, HSL value or color name, or choose one with the color picker. 2. All four notations appear at once — click any of them to copy. 3. For contrast, enter a text color and a background color; the ratio and AA/AAA results are calculated for you. 4. Pick a matching color from the palettes below and copy it.

When to use it

• Turn a HEX from a design file into the notation your CSS or design tool wants • Check whether a text color meets accessibility requirements • Find supporting colors for a brand color • Build a shade ramp for buttons and badges • Get an approximate CMYK value before sending work to print

Frequently Asked Questions

Q. What input formats are accepted?: A. HEX (#16A34A, #1A4), rgb(22,163,74), hsl(142,76%,36%) and CSS color names such as green or tomato. The browser's own color parser is used, so almost anything valid in CSS works.
Q. What contrast ratio do I need?: A. Under WCAG 2.1, normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (24px, or bold at 18.66px and above) relaxes to 3:1 for AA and 4.5:1 for AAA. This tool shows all four at once.
Q. Can I send the CMYK value straight to a printer?: A. Not recommended. The CMYK shown here comes from a simple formula that ignores device characteristics. Printed color depends on paper, ink and color profile, so for color-critical work convert with the printer's profile and check a proof.
Q. Does it handle transparency?: A. Only opaque colors for now. An rgba value or 8-digit HEX is read as its RGB part. The real contrast of a semi-transparent element has to be computed against whatever sits behind it.
Q. How is the shade ramp built?: A. The hue and saturation of your base color are kept while lightness steps from 10% to 90% in nine stops — a useful starting point for a design system's color scale.