Generate useful color palettes from a base color and export the results in CSS-ready formats.
Base Color
Set a base color, then choose the kind of palette you want to derive from it.
Picker
Type or pick the base color. The palette updates immediately when the HEX value is valid.
Generated Palette
Preview the generated colors as swatches, then copy the exact values from the right rail.
-40°
#37464E
-20°
#373F4E
Base
#37374E
+20°
#3F374E
+40°
#46374E
Palette Type
Validation
Analogous palette generated
Base
#3F3F46
Swatches
5
Palette Output
Copy or download the palette with HEX, RGB, and HSL values.
-40° HEX: #37464E RGB: rgb(55, 70, 78) HSL: hsl(201, 17%, 26%) -20° HEX: #373F4E RGB: rgb(55, 63, 78) HSL: hsl(219, 17%, 26%) Base HEX: #37374E RGB: rgb(55, 55, 78) HSL: hsl(240, 17%, 26%) +20° HEX: #3F374E RGB: rgb(63, 55, 78) HSL: hsl(261, 17%, 26%) +40° HEX: #46374E RGB: rgb(70, 55, 78) HSL: hsl(279, 17%, 26%)
How To Use
Pick a base color, choose the palette type, and inspect the generated swatches on the left.
Use this to create quick UI color families, accent systems, or exploratory palette ideas without leaving the browser.