Blog del color
Guías prácticas sobre formatos de color, armonías, contraste y CSS, escritas por quienes construyen esta herramienta.
Most colour advice on the web is either a wall of theory with nothing you can act on, or a list of tips with no explanation of why they work. These articles try to be neither. Each one takes a single practical problem — converting a value by hand, fixing a failing contrast ratio, stopping a gradient going muddy — and works through it with the arithmetic shown.
Every number quoted comes from the same code that powers the colour pages on this site, so you can check any claim by pasting the colour into the picker and reading it back.
What you'll learn here
- How HEX, RGB, HSL, HSV, CMYK, LAB, LCH and OKLCH relate to one another, and which one to reach for in a given situation.
- How the WCAG contrast ratio is actually calculated, why green dominates it, and the quickest ways to fix a colour that fails.
- Why CSS gradients go grey in the middle, and the three fixes that work.
- How to turn one brand colour into a full interface palette that stays readable in both light and dark mode.
Lo más recienteDisplay 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
The from keyword lets you take an existing colour apart, adjust a channel and put it back together — no preprocessor, no build step.
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
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
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
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
blue-500 tells you what a colour is. button-primary-background tells you what it is for. Only one of those survives a rebrand.
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.
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
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
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
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
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
Around one in twelve men has some colour vision deficiency. Here is what that actually changes about your interface, and what it does not.
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.
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.
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.
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.
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.
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.
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
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
Screens add light, print subtracts it. That one difference explains every disappointing print run, and what you can actually do about it.
