How to Use a Color Palette Generator

A color palette generator turns one starting color into a full, usable system of shades and roles in seconds. Instead of hand-picking a dozen hex codes and hoping they work together, you give the tool a single color and it builds the rest. The good ones also check contrast and let you export the result as code, so your palette is ready for a real product, not just a moodboard.

This guide is for designers and developers who want a palette they can ship, not just admire. I will walk you through the exact steps in the Zepixo Colors workspace: how to input a color, how to lock the shade you care about, how to derive roles like primary and error, how to check contrast against WCAG and APCA, how to preview on real UI, and how to export to Tailwind, CSS variables, JSON, or SCSS. Let us build a palette properly.

What you'll learn

• How to input a starting color and read the generated scale
• Why locking a shade matters and how to do it
• How to derive role colors like primary, success, warning, and error
• How to check contrast with the 11 by 11 grid
• How to preview on real components and export tokens

Why use a color palette generator at all

Picking colors by hand is slow and error prone. You can find a brand color you love, but a product needs far more than one shade. It needs a pale tint for hover states, a mid shade for borders, and a deep shade for text on light backgrounds.

A generator gives you all of those from a single input, in a predictable ladder. It also keeps the lightness steps even, which is hard to do by eye. The result is a system where every shade has a job and every pairing is easy to reason about. Our color theory for branding guide covers the why behind these choices.

Step 1: Input your starting color

Open the Zepixo Colors workspace and enter a single color. You can paste a hex code like #5b5bd6, type an OKLCH value, or use the picker. This is your anchor, usually a brand color or a shade you already love.

The generator instantly builds a scale from that one input. The scale runs from a near-white step at 50 to a near-black step at 950, labeled in the familiar Tailwind convention. Each step is a shade you can use somewhere in your UI.

The scale is generated in OKLCH, a color model where lightness matches what your eye sees. That is what keeps the steps even. If you want the theory, our what is OKLCH guide explains it in plain terms.

Step 2: Lock the shade you care about

Here is the step most people miss. When you input a color, the generator has to decide where it sits on the scale. By default it may shift your exact color slightly to keep the ladder even. If that color is your brand color, you do not want it moved.

Locking solves this. You tell the generator to pin your exact hex at a specific step, usually 500, and rebuild the rest of the scale around it. Your brand color stays pixel-perfect, and every other shade adapts to fit.

How to lock a shade

Click the shade you want to keep, then toggle the lock. The anchor now holds its exact value while the generator recomputes the lighter and darker steps. You can lock more than one shade if you need both a precise brand color and a precise dark text color.

This is the difference between a palette that looks like your brand and one that is almost your brand. Always lock your real brand color before you move on.

Step 3: Derive your role colors

A product needs more than one hue. It needs a primary color for main actions, a secondary and sometimes a tertiary for support, and status colors for success, warning, and error. These are roles, not just colors.

The generator builds each role as its own full scale. So your success green has a 50 through 950 ladder just like your primary indigo does. That means you always have a pale background and a deep text shade for every role.

You can let the generator suggest harmonious roles using color theory, or set each one by hand. For how the harmonies are picked, see color harmonies explained. For how roles map to a system, read the roles docs.

Step 4: Check contrast

A palette is only as good as its readability. A color is never accessible on its own, only against another color. So the next step is to check every pairing for contrast.

Zepixo Colors gives you an 11 by 11 contrast grid. Each scale has 11 steps, so the grid tests every shade against every other shade at once. You can toggle the whole grid between the WCAG ratio and the APCA Lc value with a single click.

What the numbers mean

WCAG 2 asks for a ratio of 4.5 to 1 for normal body text, 3 to 1 for large text and UI elements, and 7 to 1 for the strict AAA level. APCA reports a perceptual Lc value, where a rough rule is an absolute Lc of 60 or more for large text and 75 or more for body text.

The grid makes weak spots obvious. If a pairing you want shows red, adjust a shade and watch the grid update. For the full story, see WCAG color contrast explained and the official WCAG contrast minimum.

Step 5: Preview on real UI

Contrast math is necessary but not the whole story. A palette can pass every grid cell and still feel off on real components. Colors behave differently on a filled button than on a thin border or a small caption.

The workspace renders your palette on real buttons, cards, inputs, and badges. This is where you catch problems the grid cannot show, like a primary color that looks great as text but muddy as a large fill. Walk the resting, hover, and focus states before you commit.

Want to try this now? Open the Zepixo Colors workspace and turn one hex into a full, contrast-checked palette in a couple of minutes.

Step 6: Export your palette

A palette is only useful if your code can use it. The final step is to export the colors as tokens your stack understands. Zepixo Colors exports to Tailwind config, CSS variables, JSON, and SCSS.

Exporting as code beats copying hex by hand. The export carries every shade of every role with consistent names, so nothing drifts. You drop it into your project and the whole system is available at once.

For the export details, see the export reference, and for how to name and structure tokens, read color design tokens. Tailwind v4 ships OKLCH by default, which pairs neatly with the scales the generator builds. The Tailwind colors docs show the defaults.

A quick worked example

Let us run the whole flow once. Say your brand color is indigo #5b5bd6 and you want a shippable palette.

1. Input #5b5bd6 as your starting color and read the generated scale.
2. Lock #5b5bd6 at step 500 so your exact brand color never shifts.
3. Derive roles: keep indigo as primary, add #16a34a success, #d97706 warning, and #dc2626 error, each as its own scale.
4. Open the contrast grid and confirm body text pairings clear 4.5 to 1, like indigo 800 on a 50 background.
5. Preview on buttons and cards in both light and dark, then fix any muddy fills.
6. Export to Tailwind config and drop it into your project.

That is a complete, accessible, code-ready palette from a single hex. The whole point of a generator is to make this fast and repeatable.

Common mistakes to avoid

A few habits will save you rework. First, always lock your brand color before deriving roles, or the generator may quietly shift it. Second, never judge a color in isolation, since accessibility lives in the pairing.

Third, do not skip the dark mode preview, because a pairing that passes in light mode can fail on dark. And finally, export tokens with semantic names rather than pasting raw hex into components, so theming stays easy. For more on that, see dark mode color palette.

Frequently asked questions

What is a color palette generator?

It is a tool that turns one starting color into a full set of shades and roles. You input a color, and it builds an even scale from light to dark, often with status colors too. The best generators also check contrast and export the result as code.

How do I keep my exact brand color in the palette?

Lock the shade. Pin your exact hex at a step, usually 500, and let the generator rebuild the other shades around it. This keeps your brand color pixel-perfect while the rest of the scale adapts.

What contrast standard should I check against?

Check WCAG 2 as your baseline, aiming for 4.5 to 1 for body text and 3 to 1 for large text and UI. You can also watch the APCA Lc value, which is more perceptually accurate and planned for future standards. The Zepixo grid shows both with one toggle.

Which export format should I choose?

Pick the one your stack uses. Tailwind config suits Tailwind v4 projects, CSS variables work anywhere, JSON suits design token tooling, and SCSS suits Sass systems. The values are identical, so it is purely about fit.

Do I need to know OKLCH to use the generator?

No. The generator builds scales in OKLCH for you so the lightness steps stay even. You can input plain hex and ignore the model entirely, though understanding it helps you reason about your scales.

Can I generate a palette from my logo?

Yes. Sample a color from your logo and use it as the starting input, then lock it. The generator builds the rest of the system around that color, which keeps your palette tied to your brand.

Input a color, lock it, derive roles, check contrast, preview, and export. Do that and you will have a real palette, not just a pretty picture. Go build one.