UI Color Theme Generator

How to use

1. 1️⃣
   Choose your options above
2. 2️⃣
   Click Generate
3. 3️⃣
   Copy your result

Detailed instructions

1. Select Light or Dark from the Mode dropdown to match your project's target interface style.
2. Click Generate to produce a full set of coordinated UI color roles instantly.
3. Review each color role — primary, secondary, accent, background, surface, and text — and note the hex values.
4. Copy the hex codes into your design tool or codebase, assigning each value to its corresponding role or token name.
5. Regenerate as many times as needed until the overall feel and hue direction suit your brand, then refine individual roles from there.

Use Cases

• •Bootstrapping Figma local styles with semantic role names before a client presentation
• •Setting custom color tokens in tailwind.config.js for a new SaaS dashboard
• •Generating a dark-mode palette for an analytics app and mapping hex values to CSS custom properties
• •Populating a Storybook design-token file with harmonized light-mode colors before component builds
• •Getting a base color system to hand off with a Figma component kit and dev handoff notes

Tips

• →Generate several themes in a row and screenshot each one — comparing three or four options side by side reveals tonal range you'd miss evaluating them one at a time.
• →The surface color is often the most overlooked — if it's too close to the background in dark mode, cards will look flat; bump its lightness up by at least 5% if that happens.
• →Before finalizing, paste your primary and accent colors into a contrast checker against both your background and surface values — they will behave differently on each.
• →In dark mode, avoid using pure black (#000000) as your background even if the generator produces it — swap it to #0F0F0F or similar to reduce screen harshness and make surfaces more distinct.
• →Name your Figma or CSS tokens by role, never by color value — calling a token Color/Primary lets you swap the hex later without renaming every component that uses it.
• →Use the accent color exclusively for one interactive element type per screen; if you apply it to both buttons and links, users lose the visual cue that accent signals importance.

FAQ