How to make a color palette
- Choose a base color and a harmony such as analogous or triadic, or switch to "A photo" and pick an image.
- Press Regenerate for new ideas. Lock the colors you like, and edit any color with the pencil button.
- Under Export, copy CSS variables, a Tailwind snippet, or JSON, or download a PNG image of the swatches.
Palettes are built in OKLCH, so lightness steps look even to the eye. A color that does not fit on screen is toned down to the nearest one that does. Check text on your colors with the contrast checker in the Color Converter before you use a pair for text.
Questions
Is my photo uploaded?
No. The photo is read and analyzed by your browser only. It is shrunk to a small copy for color counting and is never sent anywhere.
How are colors picked from a photo?
The tool groups the pixels of a small copy of your photo into as many clusters as colors you asked for (k-means, measured in the OKLab color space, which follows how we see color). Each cluster becomes one color, and the most common clusters come first.
What do the harmony types mean?
Complementary uses the base color and its opposite on the color wheel. Analogous uses neighbors on the wheel. Triadic spaces three hues 120 degrees apart, and tetradic spaces four hues 90 degrees apart. Monochrome keeps one hue and changes only lightness.
How do I keep some colors and change the rest?
Press the lock button on a swatch. Regenerate then replaces only unlocked colors. With a base color, the first locked color becomes the base for the new ones, so they still fit together. Editing a color by hand locks it too.
How do I use the palette in Tailwind CSS?
Pick "Tailwind CSS v4 (@theme)" and paste the result into your main CSS file; you can then write classes such as bg-palette-1. For an older project, pick "Tailwind config (v3)" and add the colors block to tailwind.config.js. Change the name prefix to rename the colors.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.