Colour Palette Generator
BACK

Generate harmonious colour palettes using a base colour, supports complementary, triadic, and analogous schemes.

Controls

Count: 5
Shift: 30 degrees

Tip: Lock colours to keep them while regenerating. Drag swatches to reorder. Press C to copy a swatch hex.

Palette

WCAG checked

UI Preview

Your Product

Make confident colour choices with live contrast checks and accessible presets.

Assign any swatch as Primary, Secondary or Accent to preview headings and buttons.

Export

CSS custom properties
JSON
Tailwind colour object

Saved palettes

How to use the Colour Palette Generator

This tool helps you generate harmonious colour palettes – such as complementary, triadic, or analogous – based on a single base colour. It’s designed specifically for web designers who need quick, clean colour suggestions for their web projects.

Steps to use the tool:

  1. Pick a Base Colour: Use the built-in colour picker to select your desired starting colour. This will act as the foundation for your palette.

  2. Select a Palette Type: Choose from the dropdown menu:

    • Complementary: Two colours opposite each other on the colour wheel.

    • Triadic: Three colours evenly spaced on the colour wheel.

    • Analogous: Three colours next to each other on the colour wheel.

  3. Click “Generate Palette” The tool will instantly generate and display a colour palette based on your selections, complete with hex codes and colour swatches for easy reference.

  4. Copy to Clipboard (Optional) Click the “Copy to Clipboard” button to copy the full palette as text. You’ll be prompted to confirm the action for added security.

Colour Palette Generator

How are the colour generated

The Colour Palette Generator uses a mathematical approach based on colour theory and the HSL (Hue, Saturation, Lightness) colour model to generate harmonious palettes from your chosen base colour.

Step-by-Step Process

  1. Convert Base Colour (Hex to RGB): The tool first converts your selected base colour (e.g., #3498db) from hex format into RGB (Red, Green, Blue) values.

  2. Convert RGB to HSL: RGB values are then converted into the HSL colour space, which makes it easier to manipulate colours based on hue angles on the colour wheel.

  3. Apply Colour Harmony Rules: Depending on the palette type you select, the tool shifts the hue value (angle on the colour wheel) to generate related colours:

    • Complementary Palette

      • Adds 180° to the base hue.

      • Result: 2 colours that are opposite on the colour wheel.

    • Triadic Palette

      • Adds 120° and 240° to the base hue.

      • Result: 3 equally spaced colours forming a triangle on the colour wheel.

    • Analogous Palette

      • Subtracts 30° and adds 30° from the base hue.

      • Result: 3 colours that sit next to each other on the wheel.

  4. Convert Back to RGB, Then to Hex: The generated HSL values are converted back to RGB, and then finally back to hex values so they’re ready for use in CSS, design tools, or code.

  5. Display the Palette: The final hex colours are displayed along with colour swatches, making it easy for you to visualise and copy.

Example

If you select #3498db (a shade of blue) and choose:

  • Complementary → You’ll get blue + its opposite: orange.

  • Triadic → You’ll get blue, red, and green.

  • Analogous → You’ll get blue, teal, and purple.

FAQs about Colour Palette Generator

It generates harmonious colour palettes – complementary, triadic, or analogous – based on one base colour you select using a colour picker.

It’s designed for web developers, designers, and anyone who needs to quickly generate colour palettes for websites, apps, or digital projects.

No. This tool runs entirely in your browser – no backend or installation required.

The base colour must be a hex colour code (e.g. #3498db). The output palette is also displayed in hex format.

Click on the small colour box next to “Base Colour”, then choose your desired colour from the native browser colour selector.

  • Complementary: Opposite colours on the wheel (high contrast).

  • Triadic: Three evenly spaced colours (balanced and vibrant).

  • Analogous: Neighbouring colours (harmonious and natural).

The colours are calculated using the HSL colour model, which is a reliable way to generate colour harmonies used in design and digital art.

Yes, the Colour Palette Generator tool is 100% free to use.

There are:

  • No fees

  •  No subscriptions

  • No account needed

It works directly in your browser, so your data stays private and secure. You can use it as often as you like to find and pick the perfect colours for your next web design and graphic design project.

Disclaimer: DCP Web Designers are not liable for damage or loss of profits caused by using the Colour Palette Generator Tool on this page.