UtilityBaseGenerators
Color Palette Generator
Turn one base color into complementary, analogous, triadic, and shade palettes.
Updated July 8, 2026
How to use the color palette generator
- 1Pick a base color with the picker or paste its hex.
- 2Review the six palettes — harmonies on top, tints/shades and muted companions below.
- 3Click any swatch to copy its hex.
- 4Verify text/background pairs in the contrast checker before shipping.
Common uses
- Building a full brand or UI palette from one chosen color
- Finding an accent color that pairs with an existing brand color
- Generating hover, border, and background variants of a primary color
- Picking cohesive colors for slides, thumbnails, or a storefront
Frequently asked questions
Which harmony should I use for a website or brand?
A reliable recipe: base color for primary actions, one complementary or split-complementary accent used sparingly, the tint/shade ramp for hover states and depth, and the muted companions for backgrounds and secondary text. Analogous schemes feel calm and cohesive; triadic feels energetic and needs a dominant color with the other two as accents.
What's the difference between complementary and split-complementary?
Complementary is the exact opposite hue — maximum contrast, but the pair can vibrate when used at equal strength. Split-complementary swaps the opposite for its two neighbors, keeping strong contrast with less tension, which is why it's the more forgiving choice for interfaces.
Why do I need the muted versions?
Full-saturation color everywhere exhausts the eye and buries hierarchy. Real designs are mostly quiet: desaturated tints for backgrounds, mid-tones for borders, dark muted values for text — all sharing the base hue so the design feels unified without shouting. That group is usually the most-copied one.
Are these palettes accessible?
Harmony and contrast are separate questions — a beautiful pairing can still fail WCAG for text. Before shipping any text/background combination from here, run it through the contrast checker; the tint/shade ramp makes it easy to step lightness until a pair passes.
About this tool
The color palette generator expands a single base color into six ready-to-use palettes: complementary, analogous, triadic, and split-complementary harmonies from classic color-wheel relationships, plus a five-stop tint-and-shade ramp and a set of muted low-saturation companions — the two groups that quietly do most of the work in real interfaces as hover states, borders, backgrounds, and on-brand neutrals. Every swatch shows its hex and copies on click. The math is honest HSL hue rotation and lightness stepping, the same relationships behind every color wheel, computed live as you change the base via picker or hex input.
Like everything on UtilityBase, the color palette generator runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more generators here.
Was this tool helpful?
Related tools
Color Picker
Pick a color and get HEX, RGB, and HSL values with shades and tints.
Image Tools
Color Contrast Checker
Check WCAG contrast ratios between text and background colors — AA and AAA.
Developer Tools
QR Code Generator
Create QR codes for URLs, text, or Wi-Fi — download as PNG or SVG.
Generators
Fancy Text Generator
Turn plain text into 𝐛𝐨𝐥𝐝, 𝑖𝑡𝑎𝑙𝑖𝑐, 𝓈𝒸𝓇𝒾𝓅𝓉 and more Unicode styles.
Text Tools
Password Generator
Generate strong random passwords locally with full control over characters.
Generators
Random Number Generator
Generate random numbers in any range — single or in bulk, with or without repeats.
Generators