How harmony schemes work
Every scheme is a rule for moving around the colour wheel. Analogous stays within ±30° of the base hue — calm, cohesive, low contrast. Complementary jumps 180° for maximum tension. Triadic uses three hues 120° apart, vivid but harder to balance. Monochrome holds the hue and varies lightness, the safest base for a UI.
Turning a palette into a design system
The export gives you CSS custom properties. From there, assign roles rather than names: --surface, --text, --accent, --accent-hover. Roles survive rebrands; colour names do not.
Contrast is still your job
- Check every text/background pair with the WCAG tool
- Keep at least one very light and one very dark tone for surfaces and text
- Reserve the most saturated colour for small accents, not large areas
- Test the palette in greyscale to confirm hierarchy survives
Why HSL-driven palettes beat hand-picking
Rotating hue and shifting lightness keeps saturation consistent, which is what makes a palette look intentional. Hand-picking tends to drift in saturation and produce palettes that feel noisy at small sizes.
Frequently Asked Questions
How many colours do I need?
Four to six covers most products: a surface, a text colour, a primary accent, a secondary accent and one or two support tones.
Can I export to Tailwind or Figma?
The CSS variables copy straight into a Tailwind config or Figma variables file with minor renaming.
Why is my triadic palette harsh?
Three evenly spaced saturated hues compete. Desaturate two of them or use tints for the support colours.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.