Color Palette Generator
Generate beautiful color palettes from a base color, random harmony, or image extraction. Everything runs in your browser.
Click a swatch to see details. Hover to lock/unlock. Press Space for a random palette.
:root {
--color-1: #2563eb;
--color-2: #7c3aed;
--color-3: #db2777;
--color-4: #ea580c;
--color-5: #16a34a;
}Sample Text
The quick brown fox jumps over the lazy dog
How the Color Palette Generator Works
This tool generates harmonious color palettes using HSL-based color theory calculations. Choose a base color and a harmony type (complementary, analogous, triadic, split-complementary, or monochromatic) to generate a coordinated 5-color palette instantly.
You can also extract dominant colors from any image using a k-means clustering algorithm that runs entirely in your browser via the Canvas API. No images are uploaded to any server.
Color Harmony Types
- Complementary — Colors opposite on the color wheel for maximum contrast
- Analogous — Adjacent colors for a cohesive, harmonious feel
- Triadic — Three evenly spaced colors for vibrant, balanced palettes
- Split-Complementary — A base color with two colors adjacent to its complement
- Monochromatic — Different shades and tints of a single hue
Export and Use
Export your palette as CSS custom properties, a Tailwind CSS configuration snippet, or a JSON object with hex, RGB, and HSL values. Click any color value to copy it to your clipboard instantly.
Accessibility
The built-in contrast checker calculates the WCAG 2.1 contrast ratio between any two colors in your palette and shows whether the combination passes AA or AAA standards for normal and large text. This helps you build accessible designs from the start.