Color guides
Practical color systems, from a photo to production.
Ten long-form guides on extraction, brand roles, contrast, tokens and dark mode. Each one includes a working tool, real examples and the checks that catch expensive mistakes.
Foundations
Foundations
Start with the source: how to choose an image, read a logo, and separate product colors from lighting.
How to Turn a Photo Into a Color Palette That Survives Production
Extracting five colors takes seconds. Making those colors work in a real interface takes a few deliberate decisions. This is the workflow we use.
Extracting Brand Colors From a Logo Without Chasing Edge Pixels
A logo looks like the simplest possible color source. In practice, anti-aliasing, compression and backgrounds can turn a two-color mark into a ten-color mess. Here is how to get the real palette.
Product Photography and Brand Color: A Practical Workflow
Your product photos are already making color decisions. The question is whether those decisions are intentional, consistent and usable outside the photograph.
Handoff
Handoff
Turn a palette into something a design system and a codebase can actually share.
Tailwind Color Tokens That Stay Maintainable
A raw 50-950 ramp is useful. A semantic layer is what keeps a Tailwind codebase from turning into a pile of hard-coded brand steps.
Build a shadcn Theme From a Photo
shadcn/ui gives you the components. You still have to supply the color contract. Here is how to turn a real image into a theme that holds up in light and dark mode.
Figma Color Variables Without Handoff Drift
A Figma file full of beautiful styles can still hand off the wrong colors. Variables, modes and a shared naming system are what prevent the drift.
OKLCH for Brand Systems: A Practical Introduction
OKLCH is not a trend. It is a better coordinate system for the same colors. Here is where it helps, where it does not, and how to use it without breaking older browsers.
Accessibility
Accessibility
Measure contrast, build dark mode and keep the palette readable as the product grows.
WCAG Contrast for Brand Colors: The Practical Rules
Contrast is the least subjective part of color design. The ratio is a number, the thresholds are published, and a failing pair can be fixed without abandoning the brand.
How to Build an Accessible Brand Palette
Accessibility is not a coat of paint applied at the end. It is a set of constraints that make the palette stronger from the first decision.
Designing a Dark Mode Color System That Holds Up
Dark mode is a second design system, not a toggle. The surfaces, borders, accents and status colors all need their own decisions.