Generate harmonious color palettes, copy HEX, RGB or HSL with one click, lock favorites, or extract a palette from any image.
Palette settings
Press spacebar anywhere to generate a new palette.
The five most common colors in your image become the palette. The image never leaves your browser.
Tip: click a swatch to copy its HEX code. Use the lock button to keep a color while the rest regenerate.
Contrast checker
WCAG needs 4.5:1 for normal text and 3:1 for large text. 7:1 or higher is AAA.
Advertisement
How palettes are built
Each palette starts from a random base hue, then the harmony rule places the other colors: complementary takes the opposite side of the color wheel, analogous takes neighbors, triadic takes three evenly spaced points, and monochromatic keeps one hue while lightness varies.
Saturation and lightness are kept in ranges that look good on screens, so you rarely get muddy or neon accidents.
Click any swatch to copy its HEX code, or click the HEX, RGB or HSL buttons under the palette to copy that exact format.
What do the harmony rules mean?
Complementary pairs opposite colors on the color wheel. Analogous uses neighbors. Triadic picks three evenly spaced colors. Monochromatic varies one hue from light to dark.
What does the lock button do?
Locking a color keeps it fixed while the other four regenerate, so you can build a palette around a color you love.
How does palette from image work?
Your image is drawn to a small hidden canvas in your browser, the most common colors are counted and the top five distinct ones become your palette. The image never leaves your device.
What is a good contrast ratio?
WCAG guidelines ask for at least 4.5 to 1 for normal text and 3 to 1 for large text. A ratio of 7 to 1 or higher meets the strictest AAA level.