6 ModesLock ColorsMulti ExportFree
#C33A22rgb(195, 58, 34)
H
S
L
#D2982Drgb(210, 152, 45)
H
S
L
#BDD147rgb(189, 209, 71)
H
S
L
#D16189rgb(209, 97, 137)
H
S
L
#D279C5rgb(210, 121, 197)
H
S
L
Export as:
Press the spacebar or click Generate to create new palettes. Lock colors you like.
How It Works
1
Choose Mode
Select a harmony mode like analogous or complementary.
2
Generate & Lock
Click Generate for new palettes. Lock colors you like.
3
Export
Copy as CSS Variables, Tailwind Config, SCSS, or JSON.
Frequently Asked Questions
What harmony modes are available?
Random, Complementary, Analogous, Triadic, Split-Complementary, and Monochromatic.
Can I lock colors?
Yes, lock individual colors and regenerate the rest. Locked colors stay fixed.
What export formats are available?
CSS Variables, Tailwind Config, SCSS Variables, and JSON.
What are contrast ratios?
WCAG contrast ratios measure readability between two colors. 4.5:1 passes AA, 7:1 passes AAA.
Can I adjust individual colors?
Yes, use the HSL sliders below each color to fine-tune hue, saturation, and lightness.
Part of these workflows
Explore More
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools