Everything we know about color - history, theory, accessibility, design systems and more.
A friendly deep dive into the three dimensions of color - hue, saturation, and value - and how every digital color picker is built on top of them.
Six color models, six trade-offs. A practical guide for designers and developers picking the right format for design tokens, gradients, and accessibility.
Forty-thousand years of pigments, prisms, and pixels. How humans went from grinding rocks to defining color spaces in math.
Seven battle-tested color harmonies - complementary, analogous, triadic, tetradic, split, square, and monochromatic - with examples.
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Here is how to design for them without making your interface ugly.
What 4.5:1 actually means, why 3:1 is enough for big text, and how the new APCA algorithm changes everything.
Red is not always urgency, blue is not always trust. A nuanced look at how culture, context, and saturation shape meaning.
A peek under the hood of k-means clustering, color moods, and how to turn any photo into a usable design system in seconds.
HSL feels intuitive but lies about brightness. OKLCH is the perceptually uniform replacement now native to CSS. Here is when to use each.
The buttery, multi-color backgrounds you see on Stripe, Linear, and Vercel are mesh gradients. Here is how they work, and how to build one without leaving the browser.
WCAG 2.1 contrast ratios are reliable but blunt. APCA is the modern perceptual alternative shipping with WCAG 3. Here is when to pick which.
A repeatable recipe for turning one HEX into a 12-step OKLCH ramp, semantic tokens, dark mode, and dev-ready exports - in under ten minutes.
How Tailwind picks its 22 colors, what the 50-950 scale means, and how to extend it with brand colors that play nicely with the defaults.
brand-500, primary, action-base, accent-strong: the same color, four naming schools, very different futures. A practical guide to picking names that survive a rebrand.
Three gradient functions, three personalities. When to use each, how to ease them, and how to interpolate in OKLCH so the middle stays clean.
A field guide to picking 5-12 colors that pass WCAG, work for color-blind users, and still look like a brand - not a compliance report.
P3 lets you ship oranges, reds and greens that sRGB literally cannot display. Here is what works in 2025, what does not, and how to fall back gracefully.
Why "warm palettes feel cozy" is half the story. A practical look at how temperature shifts attention, depth, and emotional weight in interface design.
A naive invert turns brand reds into teals and breaks every gradient. Here is how to design a dark mode that feels intentional, not auto-generated.
sRGB is the safe default, P3 is what your phone already shows, Rec.2020 is the future. A practical map of where each space lives in 2025.
Why "50% gray" is not actually halfway between black and white, and why your gradients sometimes look muddy. The shortest possible primer on gamma.
color-mix() lets you blend any two CSS colors at runtime. Six practical patterns: hover states, tints/shades, theming, focus rings, and more.
One line of CSS turns icons, borders, focus rings, and SVG strokes into theme-aware components. Why currentColor still beats every alternative in 2026.
A pragmatic guide to making your screen show colors the way real users will see them - using only macOS, Windows, and a free test pattern.
Your screen is RGB-additive. Your printer is CMYK-subtractive. Here is what survives the trip from screen to paper, and how to stop being surprised.
The View Transitions API ships native cross-fade and morph animations for any DOM change - including theme swaps. Here is how to wire it up for color tooling.
Container queries unlock context-aware components. Combined with color-mix() and CSS custom properties, every card can pick its own legible theme based on the surface it lands on.
SCSS lighten()/darken() shipped in 2007 and have been quietly wrong since 2014. CSS color-mix() does the same job better, at runtime, with theme awareness. Here is how to migrate.
The W3C Design Tokens Community Group format is becoming the lingua franca for token interchange. A practical look at how to author, reference, and theme color tokens in DTCG.
OKLCH lets you describe colors that no screen can show. Understanding why - and how browsers map them back into reality - turns gradients and tokens from guesswork into intent.
Picking colors that look great and pass accessibility standards doesn’t have to be a chore. Here is the exact workflow we use to build inclusive design systems.
Ever wondered why a sunset palette feels calming while a neon cyberpunk theme feels electric? It’s not just taste—it’s math and psychology.