記事一覧
Related topics

Colour formats and conversion

How HEX, RGB, HSL, HSV, CMYK, XYZ, LAB, LCH and OKLCH relate to one another, and which to reach for when.

Every colour on a screen is the same physical thing: an amount of red, green and blue light. What changes between formats is how that quantity is written down, and how easy each notation makes a particular job.

That matters more than it sounds. Making a button ten percent darker is one number in HSL and pure guesswork in HEX. Building a colour ramp where every step feels evenly spaced is straightforward in OKLCH and quietly impossible in HSL, because HSL's lightness is geometry rather than perception.

These articles work through the conversions with the arithmetic shown, so you can follow the maths rather than take it on trust.

What you'll learn here

  • How to convert HEX to RGB and back by hand, without a tool.
  • Why HSL is the right format for hover and active states.
  • What CMYK conversion can and cannot tell you about print.
  • Why LAB, LCH and OKLCH exist, and where each one earns its keep.

13 articles

Display P3 and wide gamut: when sRGB is not enough — Advanced.

Display P3 and wide gamut: when sRGB is not enough

Most modern phones and laptops can show colours sRGB cannot describe. Here is how to use them without breaking everyone else.

Relative colour syntax in CSS — CSS.

Relative colour syntax in CSS

The from keyword lets you take an existing colour apart, adjust a channel and put it back together — no preprocessor, no build step.

What colour actually communicates in an interface — Design.

What colour actually communicates in an interface

Colour psychology is oversold. What holds up is convention, contrast and consistency — and those are enough to design with.

Working out a contrast ratio by hand — Accessibility.

Working out a contrast ratio by hand

The full calculation behind 4.5:1, worked through with real numbers, and what each step is actually correcting for.

Sampling colour from an image, and the traps in it — Fundamentals.

Sampling colour from an image, and the traps in it

Picking a colour off a photograph looks trivial and quietly is not. Compression, colour profiles and a single-pixel sample all conspire against you.

LAB, LCH and OKLCH: why perceptual colour spaces matter — Colour theory.

LAB, LCH and OKLCH: why perceptual colour spaces matter

sRGB lies about brightness. Here is what perceptual colour spaces fix, and where they belong in everyday CSS work.

Opacity, alpha and transparent are not the same — CSS.

Opacity, alpha and transparent are not the same

Why opacity on a parent dims its children, why alpha does not, and why fading to transparent produces a grey haze.

Every CSS colour function, and when to reach for it — CSS.

Every CSS colour function, and when to reach for it

rgb, hsl, hwb, lab, lch, oklab, oklch and color-mix — what each one is for, with the modern syntax you should be writing today.

HSL vs HSV: the difference, and which one you want — Colour theory.

HSL vs HSV: the difference, and which one you want

They share a hue wheel and a saturation axis, then disagree about the third one. Here is what actually separates them and when each is the right tool.

Colour harmonies, and when each one actually works — Colour theory.

Colour harmonies, and when each one actually works

Complementary, triadic, analogous and the rest — what the colour wheel maths does, and the practical rule that stops any of them looking chaotic.

RGB vs CMYK: why screen colour never prints exactly — Colour theory.

RGB vs CMYK: why screen colour never prints exactly

Screens add light, print subtracts it. That one difference explains every disappointing print run, and what you can actually do about it.

HEX, RGB and HSL: which colour format to use and when — Colour theory.

HEX, RGB and HSL: which colour format to use and when

The three colour formats you meet daily in CSS, what each one is actually good at, and how to convert between them by hand.

What is a hex colour code, and how do you read one? — Fundamentals.

What is a hex colour code, and how do you read one?

A plain explanation of what #4DA374 actually means, how to read it without a tool, and why the shorthand form is more limited than it looks.

Questions about colour, answered briefly

Related topics

Contrast and accessibilityWhat the WCAG contrast ratios mean, how the number is calculated, and how to fix a colour that fails.CSS and gradientsHow gradient syntax really works, why gradients turn muddy, and the fixes that keep them clean.