Building color palettes for the modern web
summary
Tailwind CSS color palettes move from sRGB to a P3-targeted workflow using OKLCH as a device‑independent model and Display P3 as the locked gamut, so colors stay predictable on today's screens. A custom palette builder shows sRGB gamut overlays, preview content in light and dark, and steppers for tiny changes; adjustments are manual—often 0.01° shifts—and the final result is subtly more vibrant across mid tones while remaining stable for millions of downloads.
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
30mThe Evolution Of CSS4 Colors
28mThe Colorful Future of CSS
34mThe Evolution of CSS4 Color
43mColor in CSS Or How I Learned to Disrespect Tennis
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
26mThe World Isn't Black and White, It's RGB
46mResponsive Color