What do all these color formats mean?

A color on a screen is a mix of red, green, and blue light, and each format writes that mix in its own way. CSS and design tools use HEX codes and RGB values. HSL, HSV, and HWB describe a color by its hue, the angle on the color wheel, and by how vivid and how light it is, which is easier to adjust by hand. CMYK gives the amounts of cyan, magenta, yellow, and black ink for print. LAB, LCH, OKLab, and OKLCH are built so that equal steps in their numbers look like equal steps to the eye, which helps with palettes and gradients, and modern CSS supports all four. Terminals use ANSI color codes, and CSS also has named colors such as tomato.

Here is the same orange in each format:

Format Example What the values are
HEX #ff6600 Red, green, and blue as two hexadecimal digits each
RGB rgb(255, 102, 0) Red, green, and blue from 0 to 255
HSL hsl(24, 100%, 50%) Hue, saturation, and lightness
HSV hsv(24, 100%, 100%) Hue, saturation, and value, also called HSB
HWB hwb(24 0% 0%) Hue, whiteness, and blackness
CMYK cmyk(0%, 60%, 100%, 0%) Cyan, magenta, yellow, and black ink
LAB lab(62.31, 55, 71.33) CIE lightness, green to red, and blue to yellow
LCH lch(62.31, 90.07, 52.36) CIE lightness, chroma, and hue
OKLab oklab(69.58% 0.1482 0.1406) Lightness and two color axes, in a newer model than LAB
OKLCH oklch(69.58% 0.2043 43.49) Lightness, chroma, and hue in OKLab
XYZ xyz(46, 30.77, 3.52) The CIE 1931 color space that LAB is based on
HCG hcg(24, 100%, 0%) Hue, chroma, and grayness
Color name orangered The closest CSS named color
ANSI 16 91 Terminal code of one of the 16 basic colors
ANSI 256 208 Terminal code of one of 256 colors
AppleScript RGB {65535, 26214, 0} Red, green, and blue from 0 to 65535, as AppleScript writes them
Grayscale gray(46.7%) Brightness from 0% to 100%

Tool description

This tool converts a color between these 17 formats and shows it as a swatch under the result. Every color converter here works the same way, from the general Color Converter to the ones for a single pair, such as HEX to RGB, RGB to CMYK, or HEX to color name: it starts on the formats in its name, and the Source and Target menus switch to any other. Paste a color and the result appears as you type, ready to copy. With Auto detect as the source, which the Color Converter starts on, the tool works out the format from how the color is written. The swap button turns the conversion around.

Examples

Input Target Result
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Color name tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

What you can paste

  • HEX codes with 3, 4, 6, or 8 digits, with or without #. A fourth digit or a last pair sets the opacity.
  • Functions such as rgb(), hsl(), or oklch(), with commas or spaces between the values, and an optional opacity as a fourth value or after a slash: rgba(37, 99, 235, 0.5) or rgb(37 99 235 / 50%).
  • Percentages for red, green, and blue, as in rgb(100%, 40%, 0%), and hues in deg, rad, grad, or turn, as in hsl(0.5turn, 100%, 50%).
  • Plain numbers without a function name, such as 255, 102, 0. Auto detect reads three numbers as RGB, or as HSL when the last two are percentages, and four as CMYK, unless they look like RGB with an opacity.
  • Color names in any case, with or without spaces: Rebecca Purple works.
  • HSB values written as hsb(), and AppleScript colors in braces, such as {65535, 26214, 0}.

How it works

The math is done by color-convert, a JavaScript library for color conversion.

  • Opacity carries over to HEX, RGB, HSL, HWB, OKLab, and OKLCH, which can write it. The other formats leave it out.
  • LAB, LCH, and XYZ are CIE values with the D65 white point. CSS lab() and lch() use the D50 white point, so their numbers differ a little.
  • LAB, LCH, OKLab, and OKLCH can describe colors that screens can't show. Converted to HEX, RGB, or another screen format, such a color has its channels clipped to the 0 to 255 range, so oklch(70% 0.3 145) becomes #00c800.
  • A color name result is the closest of the CSS named colors, so it's exact only for colors that have a name: #ff6600 gives orangered, which is #ff4500.
  • ANSI 16 and ANSI 256 results are approximate, since those palettes have only 16 or 256 colors. ANSI 16 results are foreground codes, 30 to 37 and 90 to 97, and the background codes 40 to 47 and 100 to 107 are read as the same colors.
  • CMYK is worked out with the basic formula, without a printer's color profile, so a print shop's CMYK values for the same color may differ.
  • Grayscale is the average of the red, green, and blue values.

Tips

  • HEX, RGB, HSL, HWB, OKLab, OKLCH, and color name results are valid CSS, so you can paste them into a stylesheet as they are.
  • Auto detect reads a three-digit number such as 208 as a short HEX code, so pick ANSI 256 or ANSI 16 as the source for terminal codes.
  • HSV and HSB are two names for the same model.