palettegenerator.com

UX Palette Generator (palettegenerator.com) builds a full web color scheme from a single base color you choose. You pick that base color, set a palette size and one of 8 harmony methods, and the tool generates the variants and displays them as a palette list. A live UX preview then shows those colors applied to a web interface so you can judge them in context before exporting. This walkthrough covers the actual inputs, what each control does, and how to verify the result.

The base color is the foundation

The tool states this directly: "Your base color is the foundation. All palette variations are generated from it." Everything downstream — the harmony method, the refinement sliders, the preview — operates relative to whatever base you set.

You have two ways to set it:

• Select Your Base Color — pick a specific color you already have in mind (a brand color, a client-supplied hex, etc.).
• Random Color Code — let the tool pick a starting point when you don't have a fixed brand color and want to explore.

If you're building for an existing brand, use the first option and enter the exact value. If you're exploring, the random option is faster and you can refine from there.

Choosing palette size and harmony method

Two controls shape the output before anything is generated:

The harmony method matters because it decides how the generated colors relate to each other on the color wheel. A monochromatic scheme keeps everything in one hue family (useful for a clean, low-contrast-risk interface), while triadic or complementary schemes introduce opposing hues (useful when you need distinct accent colors that still feel intentional).

The tool also shows a Sort control (options include Score and A-Z), which changes only the display order of the generated list — it doesn't change the colors themselves.

What gets generated

After you set the base color, size, and method, the tool generates the variants and presents them as Your Palette — a list of the resulting colors. From here you can:

• Copy All — grab the whole set at once.
• Lock individual colors — the tool notes that "Locked colors won't be affected by refinement," so you can protect colors you're happy with while adjusting the rest.

The palette view also surfaces quality signals: a Contrast Score, Balance, and Vibrancy reading (the example interface shows 92%, 78%, and 85% respectively). Treat these as directional indicators of how the palette performs, not as a substitute for checking contrast yourself.

Refining the palette

Once a palette exists, the Refinement panel lets you shift the whole set without starting over. The available controls are:

• Brightness (shown at 0%)
• Saturation (shown at 0%)
• Hue Shift (shown at 0°)
• Temperature (shown at 0%)

Each starts at a neutral value, so moving a slider adjusts that property across the palette. This is where locking pays off: lock the colors that are already correct, then move the sliders to fix the rest. Reset returns the refinement controls to their neutral state.

A practical sequence: generate → lock the one or two colors that already work → adjust brightness and saturation → check the preview → reset if it goes wrong.

Checking the result in the live UX preview

The UX Preview is the step that separates this from a plain color-wheel tool. It renders your palette inside a web interface context, with a Background: White / Black toggle so you can see how the colors behave on both light and dark surfaces.

Use it to answer the questions a swatch list can't:

1. Do the text and background colors stay readable on both white and black?
2. Do the accent colors still stand out once they're next to each other in a real layout?
3. Does the palette hold together, or does one color dominate unintentionally?

The tool reports a WCAG Pass figure (96.2% in the example data), which points at accessibility compliance as a design goal. Verify contrast against WCAG yourself rather than relying on the summary number alone.

Exporting the palette

When the palette is settled, Export Palette offers three formats:

• CSS Variables — drop straight into a stylesheet as custom properties.
• JSON — for design tokens, build pipelines, or handoff to developers.
• SVG — for documentation, style guides, or visual reference.

Pick based on where the palette is going: CSS Variables for direct implementation, JSON if it feeds a token system, SVG if it's for presentation.

A worked example

Say you're refreshing a brand and need a monochromatic scheme with 8 shades for a new design system (one of the tool's own example projects).

1. Set Select Your Base Color to the brand's primary color.
2. Set Palette Size to 8.
3. Choose the Monochromatic harmony method.
4. Review Your Palette; lock the shades that already look right.
5. Use Refinement to adjust brightness and saturation until the range reads evenly.
6. Toggle UX Preview between White and Black to confirm text and surfaces work in both.
7. Export Palette as CSS Variables for the dev team and JSON for the token library.

Common sticking points

• Refinement seems to do nothing to some colors — check whether those colors are locked. Locked colors are explicitly excluded from refinement.
• The palette feels flat — a monochromatic method keeps everything in one hue family by design. Switch to triadic or complementary if you need more separation.
• Sort order looks wrong — Sort only changes display order (Score vs. A-Z); it doesn't alter the generated colors.
• Preview looks fine but the real UI doesn't — the preview is a context check, not a guarantee. Confirm contrast ratios against WCAG before shipping.

UX Palette Generator is a browser-based tool for creating color palettes specifically for web UX/UI design. You pick a base color, choose from eight harmony methods, and the tool generates a palette you can refine, preview against a live interface, and export as CSS variables, JSON, or SVG. It's aimed at UI designers and developers building interfaces or design systems who need coordinated colors rather than a single swatch.

How it works

The workflow centers on one input: your base color.

1. Select your base color — either pick one manually or use the random color code option. The site describes this as "the foundation" from which all palette variations are generated.
2. Set palette size — the default shown is 6 colors.
3. Choose a harmony method — there are 8 variants available (the site references schemes like monochromatic, triadic, and complementary in its example projects).
4. Generate — the tool produces a palette, with options to sort by score or A–Z.
5. Refine — adjust brightness, saturation, hue shift, and temperature with sliders. Colors you lock stay fixed while the rest shift, so you can protect the ones you've settled on.
6. Preview — a UX preview shows the palette against white and black backgrounds, which helps catch contrast problems before you commit.
7. Export — copy all colors or export as CSS variables, JSON, or SVG.

What you get out of it

The site also surfaces aggregate stats — palettes created, colors saved, exports, and a WCAG pass rate — plus a "Recent Projects" area showing example palettes (a brand refresh using a monochromatic scheme, a dashboard theme using triadic, a mobile app using complementary with AA compliance). These read as illustrative examples of what the tool produces rather than your own saved work.

Who it's for

• UI designers building a color system for an app or site who need a full ramp, not just a primary color.
• Developers who want palette values in a format they can paste straight into code (CSS variables or JSON).
• Teams working on design systems where consistency across components matters and accessibility needs checking.

The combination of harmony methods plus a live preview is the practical draw: you can see how a generated palette actually behaves on an interface before exporting it, rather than judging swatches in isolation.

Practical notes

• The tool runs in the browser, so there's nothing to install.
• The refinement sliders are the part worth spending time on — a generated palette is a starting point, and locking your key colors before adjusting the rest keeps the palette coherent.
• The contrast score and WCAG pass figure are useful signals, but verify final contrast against the specific text sizes and backgrounds in your own project.
• Exporting to CSS variables or JSON is the fastest path from palette to code if you're wiring colors into a stylesheet or theme file.

If you just need a quick set of coordinated colors for a web project and want them in a code-ready format, this covers that end to end. If you need print color management or brand-guideline tooling, that's outside what the site describes.

Refinement in UX Palette Generator is done through four sliders — Brightness, Saturation, Hue Shift, and Temperature — that apply on top of your generated palette. Any color you lock is excluded from those adjustments, so refinement is the step where you tune a palette you already like instead of regenerating from scratch. This works best after you've picked a base color and a harmony method, and before you export.

Where refinement fits in the workflow

The tool generates a palette from a base color using one of 8 harmony methods, at a palette size you choose (the interface shows 6 as an example). Refinement comes after generation, not before. The page describes it as a way to adjust the generated palette without starting over, which is the practical reason to use it: your harmony relationships stay intact while you nudge the overall feel.

A typical sequence:

1. Select your base color (or use Random Color Code).
2. Choose palette size and harmony method.
3. Review the generated palette and its scores.
4. Lock the colors you're happy with.
5. Move the refinement sliders to adjust everything else.
6. Export when the result is balanced and usable.

The four refinement controls

Each slider starts at 0% (Hue Shift at 0°), so the generated palette is your baseline. Small moves are usually enough — these are global adjustments, not per-color edits.

Locking colors so refinement leaves them alone

The lock behavior is the key mechanic: locked colors won't be affected by refinement. That means you can protect a brand color, a primary action color, or any swatch that already passes contrast, and let the sliders reshape the rest around it.

A practical pattern for UI work:

• Lock your primary/brand color first.
• Lock any color you've already validated for text contrast.
• Refine the remaining colors for background, surface, and border roles.
• Re-check contrast after each meaningful slider move, since brightness and saturation changes can push a color below an accessibility threshold.

The tool surfaces a WCAG Pass figure and per-palette contrast scoring, so treat refinement as something that can invalidate a passing combination — verify rather than assume.

Reading the scores while you refine

The interface shows Contrast Score, Balance, and Vibrancy alongside the palette. These are useful as directional feedback during refinement:

• Contrast Score — watch this if your palette is headed for text and UI elements.
• Balance — useful when one hue starts dominating after a hue shift.
• Vibrancy — rises with saturation; helpful for marketing surfaces, risky for dense data UI.

If a slider move improves vibrancy but drops contrast, that's the trade-off to decide on, not a bug.

Resetting and exporting

There's a Reset control for refinement, so you can return to the generated baseline without losing your base color and harmony settings. Once the palette holds up, export it as CSS Variables, JSON, or SVG — CSS Variables for direct use in a stylesheet, JSON for design tokens or tooling, SVG for documentation and handoff. The UX Preview (with White and Black background options) lets you sanity-check the refined palette in a light and dark context before you commit.

Common sticking points

• Refining before locking. If you move sliders first and lock later, you've already changed the colors you meant to protect. Lock first.
• Large slider moves. These are global shifts; big jumps tend to break harmony relationships that made the palette work.
• Skipping the preview. A palette that looks balanced in swatches can fail on a white or black background — check both.
• Forgetting contrast after refinement. Locking a color protects it from sliders, but it doesn't guarantee the unlocked colors still pair well with it.