Design Tool
Enter any hex colour and instantly generate harmonious 5-colour palettes. Copy individual swatches or export the full CSS custom property block for your Canvas HTML Template project.
:root {
--color-primary: #1abc9c;
--color-secondary: #78deca;
--color-accent: #0a8068;
--color-contrast: #bc1a3a;
--color-muted: #bae9df;
}This is how your palette looks applied to a card component. The background uses your primary colour.
Live preview using the Balanced palette
Colour theory is the set of principles used to create harmonious colour combinations. In web design, the right palette establishes brand identity, guides user attention, and creates emotional resonance. Poor colour choices confuse users and reduce trust; harmonious palettes make interfaces feel polished and intentional.
This generator uses five established harmony rules: Balanced (primary + subtle variations), Complementary (opposites on the colour wheel for high contrast), Analogous (neighbouring colours for cohesive, calming schemes), Triadic (three evenly spaced hues for vibrant, balanced designs), and Shades (tints and tones of a single hue for minimalist elegance).
Every palette outputs as CSS custom properties — paste them into your Canvas HTML Template :root block and reference them with var(--color-primary). This single-source approach means updating your brand colours site-wide takes seconds.
Enter a hex colour code or use the colour picker to choose your base colour.
Switch between palette types — Balanced, Complementary, Analogous, Triadic, or Shades.
Click any colour swatch to copy its hex value to your clipboard instantly.
Click 'Copy CSS' to get the full custom property block ready for your stylesheet.
Use the live preview to see how the palette works on a real card component.
Hit 'Random' to discover unexpected colour combinations you might not have considered.
| Type | Rule | Best for |
|---|---|---|
| Balanced | Primary colour + subtle HSL variations | General UI, branding, safe defaults |
| Complementary | Base + colour 180° opposite on wheel | CTAs, alerts, high-contrast sections |
| Analogous | Base + colours 15–30° either side | Calm, cohesive designs, nature themes |
| Triadic | Three colours 120° apart | Vibrant, playful, creative portfolios |
| Shades | Tints and tones of single hue | Minimalist, elegant, monochrome sites |
A colour palette generator is a tool that creates harmonious colour combinations from a single base colour. It uses colour theory rules — complementary, analogous, triadic, and monochromatic — to produce sets of colours that work well together in web design, branding, and UI design.
The five main types are: Complementary (opposite colours on the wheel), Analogous (colours next to each other), Triadic (three evenly spaced colours), Monochromatic (shades/tints of one colour), and Split-Complementary (a colour plus the two adjacent to its complement). This generator produces Balanced, Complementary, Analogous, Triadic, and Shades palettes.
CSS custom properties (variables) let you define colours once and reuse them throughout your stylesheet. Define them in :root { --primary: #1abc9c; } and reference with color: var(--primary). This makes theme changes instant — update one value and every instance changes. Canvas HTML Template uses CSS variables extensively for theming.
Enter a 6-digit hex colour code with or without the # symbol. Examples: #1abc9c, #FF5733, or 1A1D1F. The generator auto-formats your input and produces 5-colour palettes based on colour theory. You can also use the colour picker for visual selection.
Canvas Builder generates production-ready Canvas HTML Template pages with your custom colour palette baked in.
Try Canvas Builder