Color Theory for Branding: The Complete Guide
A complete, practical guide to color theory for branding. Master the color wheel, harmonies, warm and cool, the 60-30-10 rule, psychology, and a real palette workflow.
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.
How to Choose Brand Colors
A practical guide on how to choose brand colors. Start from personality, pick a primary, build secondary and accent, apply 60-30-10, test for contrast, and finalize.
HEX vs RGB vs HSL vs OKLCH
Hex, RGB, HSL, and OKLCH compared in plain terms. What each color model is, a comparison table, why OKLCH makes better scales, and how they convert.
Complementary, Analogous, Triadic: Color Harmonies
Color harmonies explained simply. See complementary, analogous, triadic, and more on a color wheel with real swatches, plus when to reach for each one.
Color Psychology in Branding
A practical look at color psychology in branding: what each color signals, a color-meaning table, real industry examples, and the cultural caveats to respect.
The 60-30-10 Color Rule Explained
The 60 30 10 rule is the simplest recipe for balanced color. Learn the proportions, see a visual diagram, and apply it to a brand and a real interface.
How to Use a Color Palette Generator
A step-by-step guide to using a color palette generator. Input a color, lock a shade, derive roles, check WCAG contrast, preview on real UI, then export tokens.
Generate a Tailwind Color Scale, 50 to 950
A practical guide to building a Tailwind color scale. Learn what each 50 to 950 shade does, generate one in OKLCH, lock your brand color, and export to tailwind.config.
How to Use a Color Contrast Checker
A step-by-step guide to using a color contrast checker. Read the grid, fix failing pairings, check WCAG and APCA, and run a quick accessibility checklist before you ship.
APCA: The New Contrast Standard
APCA contrast explained for designers. Learn what APCA is, how Lc works, why it beats WCAG 2 for dark mode, the Lc thresholds, and how to read it in a contrast grid.
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.
Gradients in Brand Color Systems
How to use brand gradients without muddying your colors. Learn the gradient types, keeping them on-brand, text accessibility on gradients, and clean CSS examples.
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.