Blog

Tutorial-grade guides on color models, accessibility math, and modern CSS color syntax — written for developers and designers who want the actual formulas, not just the summary.

• What Is OKLCH, and Why It Matters

  OKLCH fixes a real defect in HSL and Lab — here's the actual math behind it, the CSS syntax, browser support reality, and when it's worth switching.

• WCAG Contrast Explained (With the Actual Formula)

  The relative luminance and contrast-ratio math behind every AA/AAA pass-fail badge, worked through with real numbers instead of taken on faith.

• How to Build an Accessible Color Palette

  A concrete workflow — not just the WCAG numbers in isolation — for building a palette where every real text/background pairing in your product passes, on the first pass rather than a late-stage fire drill.

• Hex vs. RGB vs. HSL: Which Model, When

  Three notations for the same underlying value, each optimized for a different job — a practical decision guide, not just a syntax comparison.

• Color Theory Basics for Developers

  The color wheel rules design school teaches, translated into the hue-angle math you can actually implement, plus the RYB-vs-RGB gotcha nobody warns you about.

• Designing for Color Blindness

  The real prevalence numbers, what protanopia/deuteranopia/tritanopia actually do to a palette, and the concrete simulation matrices behind this site's color-blindness simulator.

• Modern CSS Color Functions: A 2026 Reference

  oklch(), color-mix(), relative color syntax, and color() — what shipped, what it replaces, and the syntax you'll actually reach for.

• Building a Design Token Color System

  The primitive/semantic two-tier pattern that survives a rebrand, a dark-mode launch, and six new product surfaces without a hardcoded hex value anywhere.

• Dark Mode Color Palette Guide

  Dark mode isn't light mode with colors inverted — elevation, saturation, and contrast all behave differently once the surface is dark. Here's what actually changes.

• Color Psychology in UI Design

  Color carries real cultural and psychological weight, but far less universally than most marketing content claims — an honest look at what's genuinely established versus what's folklore.

• CSS Gradients: A Practical Guide and Current Trends

  The technical mechanics of linear, radial, and conic gradients, why the default interpolation is the most common source of muddy gradients, and where the aesthetic is actually heading in 2026.

• Picking Brand Colors: A Practical Process

  Differentiation, reproducibility across gamuts and print, and accessibility all matter more in practice than which emotion a hue is supposed to evoke — a process, not a mood board.

• Understanding Color Gamuts: sRGB, P3, and Rec. 2020

  Not every color a designer picks is representable by every screen or printer — the practical difference between gamuts, and when it's actually worth caring.

• Accessible Color for Data Visualization

  Charts have a stricter accessibility bar than UI chrome — more categories, smaller marks, frequent grayscale printing, and real color-blind readers trying to distinguish them all at once.

• CSS Variables for Theming: The Runtime Mechanics

  Custom properties make light/dark theming and brand switching a runtime concern instead of a build step — here's the cascade behavior that makes it work, and the flash-of-wrong-theme bug everyone hits once.

• Complementary vs. Analogous Colors: A Direct Comparison

  The two most commonly reached-for harmony rules solve opposite problems — maximum contrast versus natural cohesion — and mixing up which one a project actually needs is a common, avoidable mistake.

• Print Color: CMYK vs. Screen RGB

  RGB and CMYK aren't just different notations for the same colors — they're built on opposite physical principles, and the conversion between them genuinely loses information. Here's what actually happens and how to avoid a bad print surprise.