What do all these color formats actually mean?

A color is just a set of numbers, and different tools expect those numbers in different shapes. CSS often wants HEX (#ff6600) or RGB (rgb(255, 102, 0)). Print design uses CMYK because it maps to ink. Design tools favor HSL or HSV because hue, saturation, and lightness are easier for humans to reason about than raw red, green, and blue channels. Older terminals and some CLI tools only understand ANSI codes. None of these formats are "the real color", they're just different ways of writing the same value.

Tool description

The Color Converter takes a color in almost any format and converts it to another. Paste a HEX code, an rgb() string, an HSL value, a CMYK value, or even a plain color keyword like tomato, and it auto detects the format for you. Pick the format you want as output, and it also shows a live color swatch so you can confirm it picked up the right color before you copy anything.

Examples

  • Input: #ff6600 (auto detected as HEX) → Output as RGB: rgb(255, 102, 0)
  • Input: rgb(37, 99, 235) → Output as HEX: #2563eb
  • Input: hsl(210, 82%, 53%) → Output as CMYK: cmyk(84%, 42%, 0%, 8%)
  • Input: rebeccapurple (keyword) → Output as HSV: hsv(270, 67%, 60%)

Features

  • Auto detects the input format, so you don't need to know if you're pasting HEX, RGB, HSL, or a keyword
  • Converts between 13 formats: RGB, HEX, HSL, HWB, CMYK, keyword, ANSI16, ANSI256, HCG, LCH, XYZ, LAB, and HSV
  • Shows a live color swatch preview and flags invalid values before you convert

Supported formats

  • RGB: rgb(255, 102, 0), red/green/blue channels from 0 to 255
  • HEX: #ff6600, the hexadecimal format used everywhere in CSS
  • HSL: hsl(24, 100%, 50%), hue/saturation/lightness
  • HWB: hwb(24, 0%, 0%), hue/whiteness/blackness
  • CMYK: cmyk(0%, 60%, 100%, 0%), cyan/magenta/yellow/key used for print
  • Keyword: named colors like tomato or rebeccapurple
  • ANSI16 / ANSI256: terminal color codes for CLI output
  • HCG: hue/chroma/gray
  • LCH: lightness/chroma/hue in a perceptually uniform space
  • XYZ: the CIE 1931 color space used as a base for other conversions
  • LAB: lightness/a/b, another perceptually uniform space
  • HSV: hue/saturation/value (also called HSB)

When would you use this?

Grabbing a brand color from a design file that's in HSL but your CSS needs HEX, converting a CMYK value from a print spec sheet into RGB for a website, or checking what a color keyword like cornflowerblue actually looks like and what its RGB equivalent is.