UI Color Palette Generator
Palettes tailored for interface design — primary, accent and a neutral scale that maps cleanly to design tokens.
CSS variables
:root {
--color-1: #F5F4F6;
--color-2: #D9D5DD;
--color-3: #9A91A1;
--color-4: #4E4554;
--color-5: #1F1B22;
}Tailwind config
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand1: "#F5F4F6",
brand2: "#D9D5DD",
brand3: "#9A91A1",
brand4: "#4E4554",
brand5: "#1F1B22",
},
},
},
};About ui color palette generator
UI palettes are smaller than brand palettes but more disciplined. The job of a UI palette is to give you everything you need to build a complete design system — surfaces, borders, text, states, accents — from the smallest possible set of base hues. The reason for the discipline is consistency: if every component author can pick from ten greens and twelve blues, the interface fragments quickly. A tight palette with a well-spaced neutral scale and one or two semantic colors is the foundation.
The neutral scale is the most important part. Most modern systems use 9-12 neutral steps, with the lightest at 98% lightness (page background) and the darkest at 5-10% lightness (high-emphasis text). The steps are not linear in lightness — they follow a perceptual curve so adjacent steps look equally different to the human eye. Tailwind and Radix Colors both ship pre-tuned scales that follow this curve, which is why palettes built on them feel calibrated.
From this neutral scale, semantic tokens emerge: surface (background), surface-muted (alternate background), border-subtle, border-default, text-muted, text-default, text-strong. The primary and accent colors get their own scales for hover, active, focus and disabled states. A complete UI token set has 40-60 named colors but only 5-7 base hues — every other token is a derived shade or alpha overlay.
Frequently asked questions
How many neutrals should I have?+
Modern UI systems use 9-12 neutral steps, with the lightest at 98% lightness for backgrounds and the darkest at 5-10% lightness for high-emphasis text. The minimal preset gives you a starting set of five — page background, surface, border, body text and emphasis text — which is enough for most products and can be expanded into a full scale as the system matures.
Can I use this with shadcn/ui or Radix?+
Yes. Both shadcn/ui and Radix Themes consume CSS variables, which is what this generator exports. Map the palette to their token names (--background, --foreground, --primary, --accent, --border, --ring, etc.) and you get a working theme without rewriting components. For Radix Colors specifically, follow their 12-step scale convention.
What is the difference between a UI and brand palette?+
A brand palette defines identity (logo, marketing, packaging). A UI palette is the working subset that powers the product. The brand primary often appears in the UI palette at the same value, but the UI adds surface, border, text, hover, active, focus and disabled tokens that the brand palette does not need. UI palettes are also usually slightly desaturated for eye comfort during extended use.
How do I handle hover and active states?+
The standard approach is to derive hover (slightly darker or lighter, depending on light/dark mode) and active (more contrast than hover) variants from the base color, typically by shifting lightness 6-10%. Many systems use a 5-step scale per color (subtle, default, hover, active, contrast) to cover every state without ad-hoc choices in components.
Why use semantic token names instead of color names?+
Semantic names (surface-default, accent-hover, text-muted) describe the role, not the value. If you later swap blue-600 for indigo-600 as your primary, all components keep working because they reference accent-hover, not blue-700. Color-named tokens couple your components to the current palette, making rebranding expensive.