Every color format describes the same thing in a different language: HEX for stylesheets, RGB for screens and code, HSL for building palettes, CMYK for print. Pick the conversion you need and get the exact value, a live preview and the formula behind it.
The four color formats
What is HEX?
A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.
- Syntax:
- #RRGGBB
- Best for:
- CSS, design handoff, brand guidelines
What is RGB?
RGB describes a color as three channels of light (red, green and blue), each from 0 to 255. It mirrors how screens actually work: all three at 255 give white, all at 0 give black. RGB is the right choice whenever you need to calculate with a color, and rgba() adds transparency on top.
- Syntax:
- rgb(R, G, B)
- Best for:
- code, canvas, transparency with rgba()
What is HSL?
HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.
- Syntax:
- hsl(H, S%, L%)
- Best for:
- palettes, tints and shades, theming
What is CMYK?
CMYK is the four-ink model used in printing: cyan, magenta, yellow and key (black), each as a percentage from 0 to 100. Ink subtracts light instead of emitting it, so CMYK covers fewer colors than a screen, which is why bright screen colors often look duller once they are printed.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Best for:
- print, packaging, press-ready artwork