How to Build an Accessible Color System
A practical guide to building an accessible color palette. Learn 50 to 950 scales, choosing pairings, WCAG versus APCA, the contrast grid, dark mode, and exporting tokens.
WCAG Color Contrast Explained
WCAG color contrast explained in plain words. Learn the ratios, the formula behind them, AA versus AAA, large text and UI rules, plus a clear pass and fail table.
What Is OKLCH, and Why It Matters
A plain guide to what OKLCH is and why it matters. Learn the L, C, and H model, how it beats HSL, gamut and Tailwind v4, and build an even scale step by step.
Exporting Color Tokens: Tailwind, CSS, JSON
What color design tokens are, how to name them well, and the main export formats. Move colors from Tailwind to CSS variables to JSON, and use them cleanly in code.
Primary, Secondary, and Accent Colors
What primary, secondary, and accent colors mean and how each is used. Learn how many colors a brand really needs, a clear roles table, and real-world examples.
Extract a Color Palette From Your Logo
Turn your logo into a full brand system. Learn how color extraction works, how to pick the dominant hue, and a step-by-step for building a complete palette from an image.
How to Build a Dark Mode Color Palette
A practical guide to building a dark mode color palette. Learn surfaces, elevation, desaturation, contrast in dark mode, a full swatch table, and the pitfalls to avoid.