Design Tool
Generate a 5-colour palette from any hex colour — base, light, dark, complementary, and analogous. Export as CSS custom properties and drop directly into your Canvas HTML Template or Bootstrap 5 project.
A colour palette is the defined set of colours used consistently across a website — backgrounds, text, buttons, borders, and accents. A well-chosen palette creates visual harmony, communicates brand personality, and improves usability. Colour relationships are described by colour theory: complementary colours (opposite on the wheel, high contrast), analogous colours (adjacent on the wheel, harmonious), and triadic colours (three evenly spaced hues, vibrant).
In CSS, palettes are best managed with custom properties (CSS variables): :root { --color-primary: #1abc9c; }. This makes it trivial to retheme a site by changing a handful of variables. Bootstrap 5 uses this pattern internally — --bs-primary, --bs-body-color, etc. The Canvas HTML Template exposes its own CSS variable layer on top of Bootstrap 5, making it easy to retheme with a few variable overrides.
This generator takes your base colour and automatically derives light and dark tints (by adjusting HSL lightness) plus complementary and analogous hues. The result is a ready-to-use 5-colour palette that maintains harmonic relationships, exportable as CSS custom properties.
Enter your brand's primary colour as a hex code (e.g. #1abc9c) or use the colour picker.
Click Generate — the tool instantly derives light, dark, complementary, and analogous colour variants.
Review each swatch. Click the copy icon on any individual colour to copy its hex value.
Click 'Copy as CSS Variables' to get the full :root { } block ready to paste into your stylesheet.
Paste the CSS variables into your Canvas HTML Template's custom CSS or the <style> block in your page.
Use the Contrast Checker to verify that text colours in your palette meet WCAG AA requirements.
| Colour | Associations | Best used for |
|---|---|---|
| Blue | Trust, reliability, calm, professionalism | Finance, healthcare, SaaS, corporate |
| Green / Teal | Growth, health, freshness, success | Wellness, fintech, environment, CTAs |
| Red / Orange | Energy, urgency, passion, appetite | Food, retail, sales, call-to-action |
| Purple | Luxury, creativity, wisdom, premium | Beauty, fashion, education, premium SaaS |
| Yellow | Optimism, warmth, attention, caution | Hospitality, children, caution states |
| Black / Dark | Elegance, power, sophistication | Luxury, photography, high-end brands |
| White / Light | Cleanliness, simplicity, space | Medical, minimalist, tech, backgrounds |
| Grey | Neutrality, balance, professionalism | Borders, secondary text, subtle UI |
A complementary colour is the colour directly opposite on the colour wheel — 180 degrees away in hue. Complementary pairs create strong visual contrast and are commonly used for call-to-action buttons against a background. For example, teal and coral, or blue and orange. In CSS, you can find the complementary hue by adding 180 to the H value in hsl().
Most professional web design systems use 5–7 colours: 1 primary brand colour, 1 secondary/accent colour, 1–2 neutral colours (dark text, light background), and light/dark tints of the primary. More colours create visual noise. The Canvas HTML Template's built-in colour system uses a similar model — a primary, a few semantic colours (success, danger, warning), and neutral greys.
Define your palette in :root with CSS custom properties: :root { --color-primary: #1abc9c; --color-dark: #1A1D1F; --color-muted: #6F767E; }. Then reference them anywhere: color: var(--color-primary). Canvas HTML Template uses this pattern extensively. Copying the CSS Variables export from this tool gives you a ready-to-paste :root block.
Generating a beautiful palette is only half the job — you also need to ensure sufficient contrast between foreground text and background colours for WCAG accessibility compliance. A palette's light tint might look great but fail AA contrast at 3:1. Always check your palette colours against each other with a contrast checker, especially for text on coloured backgrounds.
Canvas Builder generates production-ready Canvas HTML Template pages with your custom colour palette, typography, and copy baked in.
Try Canvas Builder