Color Palette Generator
Generate harmonious color palettes using HSL color theory. Pick a base color and a harmony type.
hsl(271, 91%, 65%)
rgb(168, 85, 247)
hsl(271,91%,65%)
rgb(168,85,247)
Base
AA ⚫ 5.3hsl(91,91%,65%)
rgb(163,247,85)
Complement
AA ⚫ 16.0| Swatch | HEX | HSL | RGB | WCAG AA Text |
|---|---|---|---|---|
| #A855F7 | hsl(271, 91%, 65%) | rgb(168, 85, 247) | black · 5.31:1 ✓ | |
| #A3F755 | hsl(91, 91%, 65%) | rgb(163, 247, 85) | black · 15.99:1 ✓ |
About this tool
The Color Palette Generator creates harmonious color schemes from any base color using color theory relationships. Choose from complementary, analogous, triadic, split-complementary, tetradic, and monochromatic harmonies. Each palette shows HEX, RGB, and HSL values ready to copy. Every swatch also shows a WCAG AA contrast badge, comparing the color against both white and black text and picking whichever passes — so you can see at a glance which palette colors are safe to use as a background behind body text and which need to stay decorative-only.
When to use it
- →Picking a cohesive UI color scheme from a brand's primary color
- →Generating accessible foreground/background color pairs
- →Creating theme variables for design systems and CSS custom properties
- →Exploring complementary accent colors for data visualizations
- →Checking which palette colors pass WCAG AA before using them behind text
Tips
- ◆Start with a mid-range saturation (40-60%) for the base — extreme saturation makes harmonics look garish.
- ◆Monochromatic palettes (same hue, varied lightness) are the safest for UI backgrounds and text.
- ◆Triadic palettes (3 colors 120 degrees apart) create vibrant contrast — use one as dominant, one as accent, one as neutral.
- ◆The WCAG AA badge on each swatch shows the best of white-text or black-text contrast — a failing badge means avoid that color as a text background.
Frequently asked questions
What is color theory and how does it apply to UI design?
Color theory is the study of how colors relate to each other and affect human perception. It describes which colors look harmonious together (based on their positions on the color wheel) and how color choices affect mood, contrast, and readability. In UI design, color theory guides palette selection to ensure brand colors, backgrounds, text, and accents work together without clashing.
What is the difference between complementary and analogous colors?
Complementary colors sit opposite each other on the color wheel (e.g. purple and yellow). They create strong contrast and visual tension — effective for call-to-action buttons and emphasis. Analogous colors are adjacent on the wheel (e.g. blue, blue-green, green). They are naturally harmonious and calming — good for backgrounds and multi-element layouts.
How do I create accessible color combinations?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Use your palette colors for text/background pairs and verify the contrast ratio with an accessibility checker. Generally: dark text on light backgrounds or light text on dark backgrounds. Mid-range colors (50% lightness) are hardest to make accessible on either.
What is the 60-30-10 rule for color usage?
The 60-30-10 rule is a design guideline for distributing colors in a composition. 60% is the dominant color (usually neutral: white, gray, dark background). 30% is the secondary color (brand or complementary). 10% is the accent color (draws attention to CTAs and key UI elements). This ratio creates visual balance while giving highlights enough contrast to stand out.