Skip to content
codevory

Color Converter

Convert any CSS color between HEX, RGB, HSL and CMYK, with a color picker and WCAG contrast ratios against white and black.

Color Converter: the tool

Color

Formats

HEX#663399
RGBrgb(102, 51, 153)
RGB (space)rgb(102 51 153)
HSLhsl(270, 50%, 40%)
CMYKcmyk(33%, 67%, 0%, 40%)
Namerebeccapurple

Contrast with white

8.41 : 1AA text passAAA text passAA large pass

Contrast with black

2.50 : 1AA text failAAA text failAA large fail

How to use Color Converter

  1. Type a color in any CSS format, such as #663399, rgb(102 51 153), hsl(270, 50%, 40%) or rebeccapurple, or pick one with the color picker.
  2. Every other format is shown below it, ready to copy.
  3. Check the contrast ratio against white and black to see which text color is readable on your background.

Example

rebeccapurple, the named color #663399, in every format the converter shows.

Result
HEX   #663399
RGB   rgb(102, 51, 153)
HSL   hsl(270, 50%, 40%)
CMYK  cmyk(33%, 67%, 0%, 40%)
Name  rebeccapurple

About this tool

The same color can be written in several ways. HEX and RGB describe how much red, green and blue light the screen mixes. HSL describes it with a hue angle (0 to 360), saturation and lightness, which is easier to adjust by hand: to get a darker shade, lower the lightness. CMYK is the ink model used in printing.

HEX, RGB and HSL conversions are mathematically exact. HSL values are rounded to whole numbers for display, so converting back may differ by one step in a channel. CMYK here is the simple arithmetic conversion; real printing uses color profiles, so treat it as an approximation.

Contrast ratios follow WCAG 2.x. Normal text needs at least 4.5:1 to pass level AA and 7:1 for AAA, and large text needs 3:1 for AA. Transparency is ignored in the contrast calculation.

Contrast thresholds (WCAG 2.x)

LevelNormal textLarge text and UI parts
AA4.5 : 13 : 1
AAA7 : 14.5 : 1

Frequently asked questions

Which color formats can I enter?

Hex with 3, 4, 6 or 8 digits, rgb() and rgba() in both the comma and the space syntax, hsl() and hsla() with deg, rad, grad or turn units, any of the 148 CSS color names, and transparent.

Why does converting back and forth change a value slightly?

HSL and CMYK values are rounded to whole percentages for display. HEX and RGB are exact, but a round trip through rounded HSL can shift a channel by a point or two.

Is the CMYK result suitable for printing?

It is the standard mathematical conversion, with no color profile. Print shops convert with a profile for their inks and paper, so the printed color may differ.

What is the contrast ratio?

It compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). WCAG uses it to decide whether text is readable. This tool reports the ratio of your color against white and against black.

What does the color name row mean?

It appears when your color is exactly one of the 148 named CSS colors. It is not a nearest-match search.

More developer tools