Base Color
Harmony Mode
CSS Variables
:root {
--color-1: #3b82f6;
--color-2: #f63c83;
--color-3: #83f63c;
--color-4: #a8c4f0;
}How it works
The Color Palette Generator creates harmonious color palettes from a base color using color theory relationships — complementary, analogous, triadic, split-complementary, tetradic, and monochromatic — with all colors displayed as hex, RGB, and HSL values.
Color theory defines relationships between colors on the color wheel that are visually harmonious. A complementary pair (colors 180° apart) creates high-contrast emphasis. An analogous palette (3 colors within 30°) creates cohesion and calm. A triadic palette (3 colors 120° apart) is vibrant and balanced. Applying these relationships scientifically produces palettes that look intentional rather than random.
How to use it: pick a base color using the color picker or enter a hex/RGB/HSL value. Select the harmony type. The palette is generated and displayed with color swatches, all format values, and a preview of the palette applied to a sample UI (buttons, cards, text) so you can evaluate it in context before using it.
Shade and tint generation: for each palette color, the tool generates 5 shades (darker) and 5 tints (lighter) by adjusting HSL lightness in 10% increments. This gives you a complete range from near-black to near-white for each palette color — the same format used by Tailwind CSS's color scales.
Accessibility check: each color pair shows its contrast ratio against white and black backgrounds, with WCAG AA and AAA pass/fail indicators. A visually appealing palette that fails WCAG contrast requirements isn't usable for text.
Frequently Asked Questions
- Complementary uses two colors directly opposite on the color wheel (180° apart) — high contrast, striking, but can feel harsh. Split-complementary uses one base color and two colors 150° away on each side — similar contrast but more visually comfortable and easier to work with.
- Three colors evenly spaced 120° apart on the color wheel. Triadic palettes are vibrant and have strong visual tension while remaining balanced. Examples: red/yellow/blue (primary colors), orange/green/violet (secondary colors).
- Select 'Monochromatic' — the tool generates 5–7 colors from the same hue by varying saturation and lightness. This produces a cohesive, professional look. It's the basis for most single-brand color systems (50 shades of blue).
- Not necessarily — the tool shows contrast ratios for each color against white and black backgrounds. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Review the contrast ratings before using palette colors for text.