How does HSL differ from HSV?

Both use hue (0–360°) and saturation, but the third value differs: HSL uses lightness and HSV uses value (brightness). The same numbers therefore give different colors.

Is the CMYK value suitable for printing?

It is only an approximate conversion from RGB. For professional printing, use the color profile your print shop specifies.

What does an 8-digit HEX mean?

The last two digits set the opacity (alpha): 00 is fully transparent and ff is fully opaque.

Why do numbers differ slightly from other tools?

Values are rounded to whole numbers, so converting back and forth through HSL or CMYK can shift a channel by 1.

Color Converter: HEX, RGB, HSL, HSV, CMYK

Convert colors between HEX, RGB, HSL, HSV and CMYK, check contrast and build a palette.

Color picker

Opacity (alpha): 1

HEX

RGB / RGBA

HSL / HSLA

HSV

CMYK

CSS

color: #2563eb;
color: rgb(37, 99, 235);
color: hsl(221, 83%, 53%);

WCAG contrast

Calculated with the opaque color as the text color.

Aa on white

Ratio: 5.17:1

AA text: Pass
AA large text: Pass
AAA text: Fail
AAA large text: Pass

Aa on black

Ratio: 4.06:1

AA text: Fail
AA large text: Pass
AAA text: Fail
AAA large text: Fail

Palette

Click a swatch to select it.

Lighter and darker shades

Complementary color

Analogous colors

How to use it

Pick a color with the color picker or type it into any field: all the other formats update instantly. HEX codes with 3, 4, 6 or 8 digits (for example #f80 or #ff880080) are accepted, as are rgb(), rgba(), hsl(), hsla(), hsv() and cmyk() notations. The slider sets the opacity (alpha).

The button next to each field copies its value, and the CSS section gives you ready-made color: lines.

Contrast and accessibility

The tool calculates the WCAG contrast ratio between the chosen color and white and black. For normal text, level AA needs at least 4.5:1 and AAA needs 7:1. Large text (roughly 24 px, or 19 px bold) needs 3:1 and 4.5:1 respectively.

Contrast is calculated without transparency, that is, with the fully opaque color.

Palette, CMYK and privacy

The palette shows lighter and darker shades (mixed with white or black), the complementary color (opposite on the color wheel) and neighbouring colors. Click a swatch to make it the current color.

CMYK is calculated here with a simple mathematical formula, so printed results may differ: accurate print colors depend on the printer and color profile. All calculations run in your browser and no data is sent anywhere.