Todos los artículos
Related topics

Design systems and palettes

Turning one brand colour into a full interface palette that stays readable and consistent.

Most interface palettes fail the same way. They get assembled colour by colour until something looks right, then fall apart the first time a new component needs a shade nobody planned for.

A palette built as a system does not have that problem. Start from roles rather than colours — a primary, a neutral ramp, a few feedback colours — and generate the steps rather than picking them by eye.

The neutral ramp matters most, because it covers the vast majority of any interface. Give it a faint trace of the brand hue and it will read as deliberate instead of dead.

What you'll learn here

  • Which roles a palette actually needs, and how few colours that means.
  • How to anchor a primary colour on contrast rather than taste.
  • Why perceptual spacing makes a ramp look even when HSL does not.
  • What to test before shipping, including in greyscale and dark mode.

15 articles

Theming with CSS custom properties, without a build step — CSS.

Theming with CSS custom properties, without a build step

One set of tokens, a light and dark definition, and a toggle that respects the system setting and remembers a choice.

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.

Choosing brand colours: constraints before taste — Design.

Choosing brand colours: constraints before taste

A brand colour has to survive contrast requirements, dark mode, print and being sat next to itself. Narrow the field first, then pick the one you like.

The neutral ramp is 70% of your interface — Design systems.

The neutral ramp is 70% of your interface

Text, borders, backgrounds, dividers and disabled states are all neutrals. Here is how to build a ramp that carries all of them.

Naming colours so the names survive a redesign — Design systems.

Naming colours so the names survive a redesign

blue-500 tells you what a colour is. button-primary-background tells you what it is for. Only one of those survives a rebrand.

Making text readable over a photograph — Accessibility.

Making text readable over a photograph

Text on an image is the hardest contrast problem in interface design, because the background changes under every letter. Four techniques that actually work.

Contrast is not only about text — Accessibility.

Contrast is not only about text

Icons, borders, focus rings, form fields and chart series all have contrast requirements, and they are the ones teams miss.

Building a dark mode palette, not an inversion — Design systems.

Building a dark mode palette, not an inversion

Why flipping your light palette produces muddy surfaces and glaring text, and how to build the dark ramp properly.

How to build a colour palette for an interface — Design.

How to build a colour palette for an interface

A repeatable method for going from one brand colour to a full interface palette that stays readable and consistent.

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.

Designing for colour blindness without designing in grey — Accessibility.

Designing for colour blindness without designing in grey

Around one in twelve men has some colour vision deficiency. Here is what that actually changes about your interface, and what it does not.

Why gradients band, and four ways to fix it — CSS.

Why gradients band, and four ways to fix it

Those faint stripes across a large gradient are not a rendering bug. They are 8-bit colour running out of steps, and there are several ways around it.

CSS gradients: linear, radial and colour stops — CSS.

CSS gradients: linear, radial and colour stops

How gradient syntax really works, why gradients turn muddy in the middle, and the fixes that make them look smooth.

WCAG colour contrast, explained without the jargon — Accessibility.

WCAG colour contrast, explained without the jargon

What the 4.5:1 and 3:1 ratios actually mean, how the number is calculated, and the quickest ways to fix a colour that fails.

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.

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.Colour formats and conversionHow HEX, RGB, HSL, HSV, CMYK, XYZ, LAB, LCH and OKLCH relate to one another, and which to reach for when.