Build a purposeful palette
Define brand colors as theme variables when they represent stable design tokens. A palette should include enough contrast and semantic meaning for primary actions, surfaces, text and states.
Color formats
Tailwind v4 theme variables can use modern CSS color formats such as OKLCH. This can make color systems easier to reason about perceptually, while standard hex, rgb and other valid CSS colors remain possible.
Do not overload color names
Use names that communicate design roles or a coherent scale. If brand is your product color, keep its shades consistent instead of creating unrelated one-off names for every component.
ADVERTISEMENT