How many colours should a website's palette have?

A practical website colour palette typically consists of: 1 primary colour (your main brand colour, used for CTAs, links, and key UI elements), 1 secondary colour (complementary to the primary, used for secondary actions and accents), 2–3 neutral colours (greys for text, backgrounds, and borders), plus light and dark semantic colours for success, warning, error, and info states. More colours than this creates visual confusion; fewer can feel restrictive. Each 'colour' in the system should have a scale of tints and shades for flexible use.

What is the 60-30-10 rule in design?

The 60-30-10 colour rule is a design principle for achieving visual harmony: use your dominant neutral colour for 60% of the design (backgrounds, large surfaces), your secondary colour for 30% (sidebar, cards, supporting elements), and your accent/primary colour for 10% (buttons, links, highlights). This proportion mirrors how successful interiors and graphic designs are naturally structured. It prevents any single colour from overwhelming the composition while giving the accent colour enough prominence to attract attention.

How to Generate a Color Palette

Create harmonious color palettes from a base color or from any image with our free Color Palette Generator. Export as CSS variables, Tailwind, or hex codes.

Steps

Choose your starting point

Either enter a base colour (your brand primary colour) to generate a mathematical colour scheme, or upload an image to extract the dominant colours from a photo, product image, or design reference.

Select a colour harmony mode

Choose the colour relationship: Complementary (opposite on the colour wheel — high contrast, bold), Analogous (adjacent on the wheel — harmonious, serene), Triadic (three equally spaced colours — vibrant and balanced), Split-complementary (base plus two adjacent to its complement — softer than complementary), or Monochromatic (tints and shades of the same hue).

Adjust individual colours

Fine-tune the generated palette by adjusting saturation, lightness, or specific hue values. Lock colours you are happy with and regenerate just the unlocked ones. For brand palettes, ensure at least one colour meets WCAG contrast requirements for text use.

Generate tints and shades

For each palette colour, generate a scale of tints (lighter versions) and shades (darker versions) for use in design systems. A complete palette typically includes 9–11 steps from very light to very dark.

Export in your preferred format

Export as CSS custom properties (variables), Tailwind CSS configuration, SCSS variables, JSON, or a simple list of hex codes. This lets you import the palette directly into your design system or codebase.

Colour Theory Basics for Web Designers

Colour theory provides mathematical models for predicting which colours work well together. The colour wheel places hues in a circle, and relationships on the wheel predict harmony. Complementary colours are opposite on the wheel (blue-orange, red-green, yellow-purple) and create maximum contrast and visual tension — good for CTAs and emphasis but tiring if used in equal measure. Analogous colours are adjacent on the wheel (blue, blue-green, green) and create a harmonious, cohesive feeling — good for interfaces that should feel calm and professional. Triadic colours are equally spaced (red, yellow, blue or orange, purple, green) and are vibrant and balanced — used in more playful, energetic brand identities. Monochromatic schemes use tints and shades of a single hue — sophisticated and easy to keep consistent, the approach used by many premium brands.