Color Converter

Convert a color between HEX, RGB, HSL, HSV and CMYK, in the notation CSS uses today, with alpha, all 148 named colors, a contrast check against white and black, and a palette of harmonies.

Overview

The same color can be written in many ways. #FF5733, rgb(255 87 51) and hsl(11deg 100% 60%) are three spellings of one orange: HEX and RGB give the amounts of red, green and blue light, HSL gives the hue as an angle on the color wheel with saturation and lightness. The tool reads any of them and writes all the others.

Web interface

Type a color into the input, pick one with the color picker next to it, or press one of the quick colors below. The output fields update as you type; a click on a field copies its value. The preview shows the color as text on white and on black, with the contrast ratio of each. The palette at the bottom shows harmonies of the current color; a click on one of them converts it.

The dice in the input loads a random example, in one of the notations the input takes. Clear empties everything.

What the input takes

The input reads colors as a browser reads them in a stylesheet, following CSS Color 4. Each conversion was checked against the browser's own parser in Chrome, Safari's engine and Firefox.

Channels outside their range are clamped, as in CSS: rgb(300, -5, 128) is rgb(255, 0, 128). A hue is taken around the circle and may be given in deg, turn, rad or grad: hsl(400, 50%, 50%) is the same color as hsl(40, 50%, 50%), and -30 is 330. Anything else is not a color; the hint above the input says so, and every output field is emptied, so nothing keeps describing the color before.

Output formats

HSV and CMYK describe the color itself and carry no alpha. HSL and HSV are rounded to whole numbers, so converting them back can differ from the input by one step in a channel.

CMYK comes from the simple formula. A print shop converts with a color profile for its paper and inks, so the values it uses will differ; for print, ask for the profile.

Some colors have two names: aqua and cyan, fuchsia and magenta, and each gray also as grey. A typed name is kept as typed; otherwise the first of the two is shown. A color with alpha has no name, except transparent.

Contrast check

The preview gives the contrast ratio of the color as text on white and on black, as WCAG 2 defines it, with its level:

The ratio is cut after two decimals, not rounded, because WCAG compares the exact value: #777777 on white is 4.4776, shown as 4.47 and rated AA Large, where a rounded 4.5 would suggest it passes AA. A color with alpha is judged as it appears: blended with the background first.

Color palette

The palette turns the hue of the current color around the color wheel and keeps its saturation and lightness:

No API

Privacy

Nothing leaves the browser. The conversion runs on the page, nothing is stored, and a click on an output field writes to the clipboard only then.