Color Picker & Converter

Color spaces

Screens use RGB (and often HSL for UIs). Print workflows use CMYK. HEX is a shorthand for RGB in web. Contrast ratio compares relative luminance for WCAG accessibility.

How to use

1. 1Enter a color in any format chroma.js understands (HEX, RGB, HSL, named colors).
2. 2Optionally add a second color to see WCAG contrast ratio.
3. 3Copy converted values from the results panel.

Key features

Why convert locally?

Design tokens and brand colors should not leak to third-party APIs. This tool keeps palette exploration on-device.

Common use cases

• Design system documentation
• Checking button text on brand backgrounds
• Translating brand HEX to CMYK estimates

The hex to RGB formula

• A hex colour is three numbers written in base 16, two digits each. Split the six characters into pairs, read each pair as a number from 00 to FF, and you have the red, green and blue channels as 0 to 255.
• FF is 15 times 16 plus 15, which is 255. So #FF0000 is red 255, green 0, blue 0. A0 is 10 times 16 plus 0, which is 160.
• Three digit shorthand doubles each character rather than padding it: #abc means #aabbcc, not #a0b0c0. That is why #fff is white and not a very dark grey.
• Eight digits add an alpha channel as a fourth pair, so #FF000080 is red at 50% opacity, because 80 in hex is 128 of 255.

Going the other way, RGB to hex

• Convert each channel to base 16 and pad it to two digits. 245 becomes F5, 158 becomes 9E, 11 becomes 0B, giving #F59E0B.
• The padding is the step people miss. A channel value below 16 is a single hex digit, and writing #F59EB instead of #F59E0B produces a five character string that no parser accepts.

Doing it in code

• In CSS you rarely need to convert at all, because modern browsers accept rgb(), hsl() and hex interchangeably, and rgb() now takes an optional alpha after a slash.
• In JavaScript, parseInt(hex.slice(1, 3), 16) reads the red channel, and toString(16).padStart(2, "0") writes one back. The padStart is the part that is usually forgotten.
• In Python, int(hex[1:3], 16) reads a channel and f"{value:02x}" writes one.
• Whichever language, the arithmetic is the same: base 16 in pairs, and pad on the way back.

The same colours in every notation

Hue in HSL is an angle in degrees, and saturation and lightness are percentages. Grey has no meaningful hue, which is why the first three rows read as zero.

HSL is worth learning for one reason: to make a colour lighter you change one number, where in hex or RGB you have to move all three and hope the hue survives.

Privacy & security