Color Swatch Generator
Generate flexible color swatch palettes
Start from a single base color and instantly create tints, shades, tones, and color harmony palettes with ready-to-use CSS variables for your UI, branding, or dashboards.
Palette controls
Set a base color, choose palette type, and define how many swatches you need.
Base color
Palette type
Number of swatches
5x
Swatch preview
Click any swatch to copy its hex code.
Each swatch shows the hex code and HSL values generated from the selected base color and palette type.
CSS variables
Copy ready-to-use CSS custom properties for your design tokens or layouts.
Copied!