Advanced Color Palette Studio
Build, refine and test a complete color system with harmony tools, accessibility checks, tonal scales and developer-ready exports.
See how your palette behaves in a clean interface before you export it.
Primary actionCheck accent colors against both bright and dark surfaces.
Primary actionCreate a polished color system instead of collecting random swatches. Edit colors precisely, explore harmonies, test contrast, preview UI usage and export the palette in practical formats.
About This Tool
Advanced Color Palette Studio is a browser-based workspace for building reusable color systems. Start with a base color, edit it in HEX or HSL, and generate analogous, complementary, triadic, split-complementary, tetradic or monochromatic combinations. Individual colors can be locked while the rest of the palette is randomized, and the workspace keeps an undo history for palette changes. Accessibility tools calculate the contrast ratio between two palette colors and show WCAG AA and AAA results for normal and large text. A tonal scale helps you explore lighter and darker variations, while light and dark interface previews provide quick visual context. When the palette is ready, copy HEX, RGB, CSS variables, SCSS variables, Tailwind-style color data or JSON, or download a presentation-ready PNG swatch sheet.
How to Use
- Select a palette swatch, then edit it with the color picker, HEX field or HSL controls.
- Choose a color harmony and click Generate Harmony to build a coordinated palette from the selected base color.
- Lock colors you want to preserve, then use Randomize Unlocked to explore alternatives without losing those choices.
- Choose foreground and background colors in the Accessibility controls to review the contrast ratio and WCAG results.
- Open Tonal Scale to inspect lighter and darker variations of the selected color.
- Copy the palette in the format you need or download the palette as a PNG.
Example
Start with #2563EB and generate a split-complementary palette. Lock the blue you want to keep, randomize the remaining colors, compare your intended text and background colors in the Accessibility panel, then copy the CSS variables for your project.
Frequently Asked Questions
What is the difference between a palette and a color harmony?
A palette is the complete set of colors you plan to use. A harmony is a color relationship based on hue positions, such as analogous, complementary or triadic, that can provide a useful starting structure.
What happens when I lock a color?
Locked colors stay unchanged when you use Randomize Unlocked. You can unlock them at any time and continue editing normally.
How is the contrast ratio calculated?
The accessibility panel uses relative luminance and the WCAG contrast-ratio formula to compare the selected foreground and background colors.
What do AA and AAA results mean?
They indicate whether the selected pair reaches common WCAG contrast thresholds for normal and large text. Contrast is only one part of accessible interface design.
Can I use the palette in CSS or design systems?
Yes. The studio can copy HEX, RGB, CSS custom properties, SCSS variables, Tailwind-style color data and JSON.
Does the tool upload my palette anywhere?
No. Palette editing, contrast calculations and PNG generation run in your browser.