Color Palette Generator – Create Harmonious UI Palettes
About the Color Palette Generator
The Color Palette Generator takes one base color and builds a five-color scheme around it, working out a light background tint, a soft light shade, your primary, a shifted-hue accent, and a dark contrast tone. Lock any color you want to keep, regenerate the rest, and export the result as CSS custom properties or JSON in HEX, RGB, or HSL.
The math runs in HSL rather than HEX or RGB, and that choice is the whole reason the output holds together. HSL describes a color as hue, saturation, and lightness, which are the three things you actually want to manipulate: hold the hue and drop the lightness and you get a darker version of the same color. Try the same operation in RGB and you have to adjust three interdependent channels to achieve what is conceptually a single change, which is why palettes assembled by eye in HEX so often contain shades that do not quite belong together.
The structure of the five slots reflects how interfaces are actually built. Most of a screen is background and surface, which is what the two light tones are for. The primary carries buttons, links, and anything the user is meant to act on. The accent exists to be used sparingly, for the one element that needs to break out of the primary color. The dark tone handles text and high-contrast edges. A common mistake is treating a palette as five equal colors and distributing them evenly; interfaces read better when one color dominates and the rest support it.
The locking mechanism is what makes exploration practical. Brand colors are usually fixed constraints rather than starting points, so lock the color you have to keep and regenerate around it until the supporting tones work.
One thing the tool does not do is verify accessibility. A palette can be visually harmonious and still fail contrast requirements, particularly when a mid-tone accent lands on a light background. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and that is worth checking on any color pairing you plan to put text on before it reaches production.
The design side of the BigToolSite team ran the palette algorithm across saturated, muted, very light, and near-black base colors, and through repeated regenerations with different combinations locked, confirming the generated shades stay balanced and that the CSS and JSON exports match the values shown on screen.
When your starting color needs to come from something that already exists — a logo, a product photo, a screenshot — the Image Color Picker pulls the exact value out of the image.
Two colors from a finished palette make a natural gradient, and the CSS Gradient Generator builds the declaration with control over angle and stop positions.
If a value comes back in a notation your project does not use, the Color Converter translates between HEX, RGB, and HSL in either direction.
How to Use the Color Palette Generator
- Choose a Base Color with the picker, or click one of the preset swatches to start from a known-good hue.
- Select your Format: HEX for CSS and design tools, RGB for code that manipulates channels, HSL when you want to adjust shades by hand afterward.
- Click Generate Palette to produce the five-color scheme.
- Click the lock icon on any color you want to keep, then generate again. Locked colors stay put while the others are recalculated.
- Click any color block to copy that single value to your clipboard.
- Use Copy CSS for a ready-to-paste
:rootblock, or Download JSON to save the palette for a design system or a build script. - Before using a pairing for text, check the contrast between the text color and its background against WCAG minimums.
Example Usage
Input: Base color #2563eb
Output: a light background tint, a soft light shade, #2563eb as the primary, a shifted-hue accent, and a dark contrast tone, exported as:
:root {
--color-1: #EFF4FE;
--color-2: #BFD3FA;
--color-3: #2563EB;
--color-4: #EB8A25;
--color-5: #0E2255;
}
In practice that maps onto an interface roughly as: --color-1 for the page background, --color-2 for card surfaces and borders, --color-3 for buttons and links, --color-4 for a single call to action or notification badge, and --color-5 for body text.
A useful workflow when you have a fixed brand color: set it as the base, generate, then lock the primary and regenerate several times. Each pass gives you different supporting tones around the color you cannot change, which is faster than trying to reason your way to a complementary scheme manually.
If the accent feels too loud, that is usually correct. Accent colors are meant to be used on a small fraction of the screen, and a color that looks overwhelming as a large swatch often looks exactly right on a small badge or a single button.
Frequently Asked Questions
It works in HSL, holding your base hue and adjusting lightness to produce the light and dark tones, then shifting the hue for the accent. Working in HSL is what keeps the shades related rather than merely adjacent.
It keeps that color fixed when you regenerate, so the remaining slots are recalculated around it. This is how you build a palette around a brand color you cannot change.
Yes. Copy CSS produces a :root block with five custom properties you can drop into a stylesheet and reference as var(–color-1) and so on.
HEX and RGB both specify a color by its red, green, and blue values, just in different notation. HSL describes hue, saturation, and lightness, which makes it far easier to create a lighter or darker version of the same color by hand.
No. It generates harmonious colors, not accessible pairings. Check any text-on-background combination against the WCAG minimums of 4.5:1 for normal text and 3:1 for large text before shipping it.
Unevenly. Let the light tones cover most of the screen, use the primary for interactive elements, reserve the accent for a small number of things that must stand out, and use the dark tone for text.
Consistent relationships between the colors. Shades that share a hue and differ in lightness read as a family, and an accent placed at a deliberate hue offset reads as intentional rather than accidental.
The colors are defined for screen use in RGB terms. Printing requires CMYK conversion, and some vivid screen colors have no accurate CMYK equivalent, so expect a shift and proof before committing to a print run.
Displays vary in calibration, color gamut, and brightness. A palette tuned on one monitor will not appear identical everywhere, which is why relying on contrast ratios rather than how something looks on your screen matters.
Feeding the palette into a design system, a theme configuration, or a build script rather than pasting values by hand. It keeps the same colors consistent across a codebase.
