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.

This website (dcpweb.co.uk) uses cookies to improve your browsing experience and help us understand how our site is used. By continuing to browse this website, you agree to our use of cookies.

To learn more about how we collect, use, and protect your data, please read our Privacy Policy.

ACCEPT COOKIES

Since 2004, we have designed and developed websites for companies across a wide range of industries, from local service businesses to ecommerce brands and professional organisations.

Our focus is on creating websites that not only look professional, but also perform well in search engines, attract the right audience and support long-term business growth.

If you are looking for experienced web designers who understand how to build websites that deliver real results, our team is here to help.

Privacy Policy

Last Updated: 01/07/2024

Different Colour Productions Ltd (“we,” “us,” or “our”) is committed to protecting your privacy. This Privacy Policy outlines our practices concerning the collection, use, and disclosure of personal information when you visit our website or engage with our services. By using our website and services, you consent to the terms outlined in this Privacy Policy.

1. Information We Collect

We collect various types of information to provide and improve our services. The types of information we may collect include:

1.1. Personal Information: This may include your name, email address, phone number, and any other information you provide when you contact us, request information, or subscribe to our newsletter.

1.2. Log Data: When you visit our website, we automatically collect information, such as your IP address, browser type, pages visited, and the time and date of your visit.

1.3. Cookies and Similar Technologies: We use cookies and other tracking technologies to improve your experience on our website. You can adjust your browser settings to reject cookies or be alerted when cookies are being used.

2. How We Use Your Information

We use the collected information for various purposes, including:

2.1. Providing Services: To provide web design and related services you have requested from us.

2.2. Communication: To respond to your inquiries, send updates, and provide customer support.

2.3. Analytics: To analyse and improve our website and services, as well as monitor usage patterns.

3. Information Sharing and Disclosure

We do not sell or rent your personal information to third parties. However, we may share your information with third parties under the following circumstances:

3.1. Service Providers: We may share your information with trusted service providers who help us deliver our services, such as hosting providers, analytics providers, and marketing services.

3.2. Legal Obligations: We may disclose your information when required by law, to comply with legal processes, or to protect our rights, privacy, safety, or property.

4. Your Choices

You have choices regarding your personal information:

4.1. Access and Update: You can access and update your personal information by contacting us.

4.2. Marketing Communications: You can opt out of receiving marketing communications from us by following the unsubscribe instructions in our emails or emailing [email protected]

5. Security

We take appropriate measures to protect your personal information from unauthorised access, disclosure, alteration, or destruction.

6. Links to Other Websites

Our website may contain links to third-party websites. We are not responsible for the privacy practices of these websites. We recommend reviewing their respective privacy policies.

7. Changes to this Privacy Policy

We may update this Privacy Policy from time to time to reflect changes in our practices. Any changes will be posted on this page, and the date at the top will indicate the latest update.

8. Contact Us

If you have any questions or concerns about this Privacy Policy or our practices, please contact us at: [email protected]

By using our website and services, you acknowledge that you have read and agree to this Privacy Policy. Different Colour Productions Ltd is committed to safeguarding your personal information and respecting your privacy rights.

ThreeBestRated Top 3 Website Designers in London 2026 award for DCP Web Designers Certificate