How to use it
Palettes are built on the color wheel (HSL):
- Analogous: neighbours on the wheel (±20°, ±40°), calm and cohesive.
- Complementary: the opposite hue (180°) for strong contrast.
- Triadic: three hues 120° apart.
- Tetradic: four hues 90° apart.
- Monochromatic: one hue at different lightness.
- Shades 50–900: tints and shades for a full design system, Tailwind-style.
Worked example
From green #0f6e56, the complementary scheme gives a rose red near #6e0f27 — good for attention-grabbing buttons.
Frequently asked questions
How do I pick website colors?
Start from your brand color, use its shades for backgrounds and text, and a complementary color for key buttons.
How do I use the CSS variables?
Paste them into your stylesheet, then use e.g. color: var(--color-3).
Are the colors accessible?
Check text contrast with the HEX to RGB tool — it shows the WCAG contrast ratio.