Building color palettes for the modern web
summary
Tailwind CSS updates its palettes to target wide‑gamut displays by authoring colors in OKLCH then constraining values to the P3 gamut. A custom web tool shows old vs new swatches, content previews in light and dark, and precise steppers so designers make 0.01° adjustments by eye. The library affects millions of sites (over a billion npm downloads historically, ~14 million weekly) and the result is modestly more vibrant tones mainly around the 300–800 ranges rather than a radical redesign.
AI-written summary · about
chapters (13)
- 0:00Color palette redesign intro
- 1:42Tailwind CSS color system
- 2:45Why redesign now
- 3:07History of digital color
- 5:17Color spaces and gamuts
- 7:27RGB vs HSL for gradients
- 8:11sRGB limitations
- 9:12Display P3 advantages
- 10:35OKLCH for uniformity
- 11:59Figma design challenges
- 13:08Custom palette tool
- 14:53Manual palette process
- 15:35Key takeaways
related talks
16mBuilding color palettes for the modern web
20mThe Dark Side of the Web
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
21mWhat’s New in Tailwind CSS v4?
28mThe Colorful Future of CSS
47mPainting With the Web
36mThe Magic of Color
43mColor in CSS Or How I Learned to Disrespect Tennis