DEV Community

Snappy Tools
Snappy Tools

Posted on

HEX, RGB, HSL, and CMYK: A Developer's Colour Format Reference

#webdev #css #beginners #tools

Colours in web and print work live in different worlds. Understanding which format to use — and when — saves you from mysterious colour shifts between your design tool and the browser.

HEX: The Web Default

Hex codes like #2f855a encode red, green, and blue as two hexadecimal digits each (00–FF = 0–255). Three pairs, 16 million possible colours.

color: #2f855a;       /* 6-digit hex */
color: #2f855a80;     /* 8-digit hex with alpha (80 = 50% opacity) */
color: #f06;          /* 3-digit shorthand for #ff0066 */
Enter fullscreen mode Exit fullscreen mode

Use it when: Writing CSS by hand, sharing colours with other developers, working with design systems.

Watch out for: 8-digit hex alpha is broadly supported now but wasn't until ~2017. Check your target browsers.

RGB: The Coordinate System

RGB splits colour into red, green, and blue channels, each 0–255 (or 0%–100%). More readable than hex when you're tweaking individual channels.

color: rgb(47, 133, 90);
color: rgb(47 133 90);           /* modern syntax — no commas */
color: rgb(47 133 90 / 50%);    /* modern syntax with alpha */
color: rgba(47, 133, 90, 0.5);  /* legacy rgba() with decimal alpha */
Enter fullscreen mode Exit fullscreen mode

Use it when: You're programmatically adjusting colour (add 20 to the red channel), or you need precise control over individual channels in JavaScript.

Watch out for: rgba() vs rgb() — modern CSS lets you write rgb(r g b / a) and skip rgba() entirely. Both work.

HSL: The Human Format

HSL (Hue, Saturation, Lightness) maps to how humans think about colour. Hue is 0–360 degrees on a colour wheel. Saturation and Lightness are 0%–100%.

color: hsl(145, 48%, 35%);
color: hsl(145 48% 35%);         /* modern syntax */
color: hsl(145 48% 35% / 50%);  /* with alpha */
Enter fullscreen mode Exit fullscreen mode

Use it when: Building dynamic colour systems in code — darkening a button on hover, generating a palette from a brand colour, or making a colour 20% lighter.

/* Make a colour 15% lighter */
function lighten(h, s, l, amount) {
  return `hsl(${h} ${s}% ${Math.min(l + amount, 100)}%)`;
}
Enter fullscreen mode Exit fullscreen mode

Because lightness is a direct knob, HSL is far better than RGB for programmatic colour manipulation.

Watch out for: HSL doesn't model perceived brightness. Two colours at L=50% look very different in brightness to the human eye (yellow vs blue). For perceptually uniform colour, look at OKLCH.

CMYK: For Print

CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour model for print. CSS doesn't support it natively — it's a print and design tool concept.

If you're handing off assets to a printer or working in Illustrator/InDesign, you'll encounter CMYK. The critical thing: RGB ≠ CMYK. Colours that look vivid on screen can become dull in print because printers can't reproduce some sRGB values.

Conversion is lossy — going from RGB to CMYK loses some gamut. Always convert from RGB to CMYK at the end of your design process, not the start.

#2f855a in RGB → C:65% M:0% Y:57% K:48% in CMYK
Enter fullscreen mode Exit fullscreen mode

OKLCH: The Newcomer Worth Knowing

OKLCH (Oklab Lightness Chroma Hue) is now supported in all modern browsers and solves HSL's perceptual brightness problem.

color: oklch(50% 0.15 145);
Enter fullscreen mode Exit fullscreen mode

The lightness value is perceptually uniform — oklch(50% ... ...) actually looks like the halfway point between black and white, regardless of hue. Great for generating accessible colour palettes algorithmically.

Quick Conversion Reference

Format Best for Editable in code?
HEX CSS, sharing, design handoff Limited
RGB Programmatic adjustment Yes
HSL Dynamic palettes, theming Yes
CMYK Print production N/A
OKLCH Accessible palettes, CSS Yes

Converting Between Formats

If you need to convert between HEX, RGB, HSL, and CMYK online, SnappyTools' free colour picker and converter handles all four formats in both directions — plus includes an eyedropper for picking colours from your screen.

The Practical Rules

  1. Write CSS in HEX — readable, universally supported, paste from anywhere
  2. Manipulate in HSL — adjusting lightness or saturation is one number change
  3. Use RGB for canvas/WebGL — those APIs expect 0–255 values
  4. Convert to CMYK only for print — and use a proper tool, not a formula
  5. Watch your alpha — rgba() is legacy; rgb(r g b / a) is modern

Want to convert between HEX, RGB, HSL, and CMYK without a design tool? SnappyTools' colour picker does it in your browser with no signup required.

Top comments (0)