Color isn't just about making things look pretty. It's about hierarchy, consistency, and guiding users through your interface without them even realizing it. After spending years in photography and building full-stack applications, I've learned that the same color theory principles apply everywhere, but UI design has its own technical constraints that make it uniquely challenging.

The Biggest Mistake: Too Many Colors

Walk through any app store and you'll see it everywhere. Interfaces drowning in color. Bright purples, neon greens, and aggressive oranges competing for attention. Visual chaos.

Here's the truth: you only need a handful of colors. For most applications, you need neutrals for text and backgrounds, a primary for your main actions, and accents for errors and warnings.

That's it. Maybe add one or two more if you're building a complex dashboard, but even then, restraint wins.

The moment you start adding colors because they look cool, you've lost the hierarchy. Every color should have a job. If it doesn't, cut it.

Neutrals Are Your Foundation

Most developers pick a primary color, slap it everywhere, and use pure black for text. The interface feels harsh and unbalanced.

Neutrals are the unsung heroes of UI design. Your grays, your off-whites, your subtle backgrounds. They make up most of your interface, and if they're wrong, everything feels off.

Good neutrals have proper contrast ratios, subtle warmth or coolness, and enough variety for hierarchy. Pure gray is boring.

In Tailwind, I typically use slate or zinc as my neutral base. They're well-balanced and work in both light and dark modes without feeling dead.

Consistency Is Non-Negotiable

Simple rule that will instantly improve any interface: the same interaction should always use the same color.

If your primary button is blue, every primary button should be blue. Not blue here, green there, and purple on the settings page. Your users build mental models, and breaking consistency breaks trust.

This applies to button variants, interactive states, feedback colors, and text hierarchy.

When I'm building, I create a strict component system where these colors are locked in. No exceptions. Tailwind's color system makes this easier since I can reference the same color tokens across the entire app.

Why I Use OKLCH

Let's talk color spaces. Most developers default to hex codes because that's what they learned first. But hex is terrible for understanding color relationships.

RGB isn't much better. Sure, it's what screens use, but try explaining why rgb(59, 130, 246) is blue. You can't visualize it.

OKLCH is different. It's a perceptually uniform color space, which means colors that look equally bright actually have the same lightness value, you can generate entire palettes by adjusting one value, and it's easier to create accessible color combinations.

Here's what OKLCH looks like: oklch(0.6 0.15 250). L is lightness from 0 to 1, C is chroma or saturation from 0 to 0.4, and H is hue from 0 to 360. That 250 is blue.

Want a darker version? Lower the L value. Want less saturation? Lower the C. It's intuitive once you get it, and Tailwind now supports OKLCH natively in v4.

The Role of Accents

Accents aren't decorations. They're signals.

Red for errors and destructive actions. Yellow for warnings. Green for success. Blue for CTAs and emphasis.

These colors should be used sparingly. If everything is red, nothing feels urgent. If every button is your primary color, nothing stands out.

I typically reserve my primary color for one, maybe two actions per screen. The things I actually want users to do. Everything else gets neutrals or subtle variants.

Color Harmonies From Photography

Photography taught me about color harmonies, and they translate directly to UI design.

Analogous colors sit next to each other on the wheel and create calm, cohesive interfaces. Complementary colors are opposites and give you high contrast, use them sparingly for emphasis. Triadic colors are three colors evenly spaced, good for dashboards that need more variety.

Most successful apps stick to analogous color schemes with one complementary accent for key actions. This keeps the interface balanced while still providing enough contrast for hierarchy.

My Actual Workflow

Here's how I build color palettes.

Start with Coolors.co to generate a base palette. I'll lock in a primary color and let it suggest harmonious combinations.

Check accessibility in Figma. I create sample components and use Figma's contrast checker to ensure text meets AA standards. That's 4.5:1 for body text, 3:1 for large text.

Map to Tailwind's color system. I don't fight Tailwind's scale. I find the closest Tailwind colors and adjust from there, or extend the theme with my custom colors at the same scale.

Test in context. Colors look different on white versus dark backgrounds, on large areas versus small elements. I build actual components to see how they feel in use.

Iterate ruthlessly. If a color isn't pulling its weight, I cut it. The best color systems are boring in a good way. Users shouldn't notice the colors, they should just feel the hierarchy.

The Technical Side: Contrast Ratios

WCAG defines minimum contrast ratios for a reason. If your text is hard to read, you've failed.

AA standard is the minimum. 4.5:1 for normal text, 3:1 for large text. AAA standard is enhanced at 7:1 for normal text, 4.5:1 for large text.

I always aim for AA at minimum. Tools like WebAIM's contrast checker or Figma's built-in accessibility features make this easy to verify.

Here's the thing: good contrast isn't just about accessibility. It's about usability. If your users have to squint or adjust their screen brightness, your color choices are working against them.

Dark Mode Deserves Its Own Palette

Don't just invert your colors and call it dark mode. It doesn't work that way.

Colors behave differently on dark backgrounds. Saturation looks more intense so you need to dial it back. Contrast requirements flip because light text on dark backgrounds needs adjustment. Pure white is harsh, use off-white. Pure black feels empty, use dark grays.

I create separate color tokens for dark mode in Tailwind. Yes, it's more work, but it's the only way to make both modes feel intentional.

Final Thoughts

Good color systems are invisible. Users don't think "wow, great color palette," they just navigate your app effortlessly, find what they need, and complete their tasks.

That's the goal. Color is a tool for hierarchy, consistency, and usability. Everything else is secondary.

Keep your palette tight, your contrasts strong, and your interactions consistent. The rest will fall into place.