Color Palette Generator
Press Spacebar to generate a new palette.
Saved / Recent Palettes
How To Use the Palette Generator
Press Spacebar
Simply hit the spacebar on your keyboard or click the "Generate" button to instantly create a beautiful, new 5-color palette.
Lock Your Favorites
See a color you love? Click the lock icon (🔒) on that specific color. When you generate again, your locked colors will stay perfectly in place.
Export to Code
Once you have the perfect scheme, click Export to instantly copy it as CSS Variables, SCSS, or a Tailwind CSS configuration file.
Advanced Generator Features
Smart Harmony Algorithms
Switch from Random to Analogous, Monochromatic, or Triadic modes. The engine uses HSL math to ensure the colors logically blend together.
WCAG Contrast Adapting
Notice how the text inside the colors changes from black to white? The tool automatically calculates luminance so you can always read the HEX codes.
Browser Local Storage
Never lose a masterpiece. Click 'Save Current Palette' to store it in your browser's local memory, allowing you to access it even after refreshing the page.
Frequently Asked Questions
A monochromatic palette uses a single base color (hue) and expands upon it by changing its shades (adding black) and tints (adding white). This creates a highly cohesive, clean, and elegant design often used in modern UI/UX design.
When you click Export > Tailwind Config, we automatically generate the exact JavaScript snippet required for your tailwind.config.js file. You can simply paste it into your theme's extend section to use your new colors as utility classes (e.g., bg-color-1).
Yes! Just click on any of the HEX codes at the bottom of the color columns, type in your 6-digit hex code, and hit Enter. The column will immediately update to your new color, which you can then lock in place.
Analogous colors sit next to each other on the color wheel (like blue, teal, and green), creating a calm and unified look. Complementary colors are on opposite sides of the wheel (like blue and orange), creating high contrast that makes elements pop.
Absolutely. When you use the "Save Current Palette" feature, the colors are stored locally in your browser's memory (localStorage). They are never sent to a server or shared with anyone else.
The HEX, CSS, and Tailwind codes generated here are meant for digital displays (RGB). If you plan to use these colors for physical printing, you will need to convert them to CMYK format using a design tool like Photoshop or Illustrator to ensure accurate ink colors.