Colour palette generator

Choosing the right colour combinations can be the defining factor in creating visually appealing designs, whether you’re a web designer, graphic artist, or someone who simply enjoys experimenting with colour. Understanding and applying colour theory is a challenge, but the results are worth the effort. This is where an online colour palette generator can come into play.

What does the generator do?

The colour palette generator is a simple tool that takes a colour input in various formats, hex or RGB, and instantly provides you with several colour palettes based on fundamental colour theory principles. It does more than just show you random colours. It applies tried-and-tested formulas to create harmonies, providing multiple ways to build palettes that work beautifully together. Whether you’re designing a website, creating a brand identity, or working on digital artwork, this tool can help in picking the right colours quickly and accurately.

Once you input a colour, the tool automatically updates a palette table using eight different formulas: analogous, monochromatic, triad, complementary, split complementary, square, compound and shades. These formulas are well-known in the world of colour theory, each producing a specific kind of harmony. For example, the analogous palette shows colours that sit next to each other on the colour wheel, while the complementary palette contrasts colours from opposite sides. With this tool, you can explore these combinations without needing to calculate anything manually.

• Analogous: The analogous palette consists of colours that are adjacent to each other on the colour wheel. This combination provides a soft and harmonious look, making it ideal for designs where a unified colour scheme is desirable, without much contrast. If you input a blue hue, the analogous palette may include variations of cyan and green. These combinations are often found in nature and are pleasing to the eye. Analogous palettes are great for creating subtle and cohesive designs. They’re often used in website backgrounds, where a calming effect is needed.
• Monochromatic: A monochromatic palette uses variations in lightness and saturation of a single hue. This creates a unified and polished look, as all colours are derived from the same base, offering different shades and tints. A monochromatic palette of red could include a deep maroon, a standard red, and a soft pink. Use monochromatic palettes for projects that require simplicity or elegance, such as product design or branding for luxury items.
• Triad: The triad palette consists of three colours that are evenly spaced around the colour wheel, forming a triangle. This palette tends to be vibrant and balanced. If you select a red hue, the triadic palette might show a combination of red, blue, and yellow. These hues stand out individually while maintaining visual balance. Triad palettes are perfect for projects that require bold, eye-catching designs, like posters, advertisements, or logos.
• Complementary: A complementary palette features colours that are directly opposite each other on the colour wheel. These combinations create a high contrast and are visually striking. If you input a green hue, the complementary colour would be red. Together, these colours create a vibrant contrast. Use complementary palettes when you want to draw attention to certain elements, such as in call-to-action buttons or headlines in a design.
• Split complementary: The split complementary palette offers a variation on the complementary scheme, using one base colour and two colours adjacent to its complement. This formula provides high contrast with less tension than a direct complementary palette. If you choose blue, the split complementary palette might include red-orange and yellow-orange, creating a more nuanced harmony. Split complementary palettes are a versatile choice for projects that need both contrast and harmony, like marketing materials or infographics.
• Square: The square palette is a four-colour combination spaced evenly around the colour wheel, forming a square. Like the triad, this palette offers balance but with a broader range of colours. If you input purple, the square palette might include green, yellow, and orange, creating a vibrant yet balanced scheme. Square palettes work well in dynamic designs where a wide range of colours is necessary, such as in multi-layered graphics or complex web designs.
• Compound: The compound palette, also known as the Split-Complementary palette’s variation, uses colours from both the analogous and complementary schemes. This palette strikes a balance between contrast and unity. For a blue input, you might get a combination of blue-green, red, and orange, offering complexity without clashing. Use compound palettes for designs that require more depth and richness, such as branding or packaging design.
• Shades: The shades palette includes darker variations of a single hue, achieved by adding black. This palette is perfect for achieving a sophisticated and moody aesthetic. A green shade palette could range from light mint to deep forest green. Shades work well for creating a dramatic and elegant look, often used in interior design, fashion, or luxury branding.

Mastering colour theory is a time-consuming process, but you can get a leg up using a generator like this. Allowing you to instantly discover a wide range of colour palettes based on tried-and-true formulas. Whether you’re a web designer, graphic artist, or someone who loves playing with colour, this tool will help you craft stunning, balanced designs every time.

How palettes are calculated

The generator derives palettes by rotating or varying the selected colour’s hue, saturation, and lightness. These are formula-based suggestions, not a judgement that every combination is harmonious, on-brand, or accessible. Very light, dark, or low-saturation source colours can produce similar-looking swatches.

Check foreground and background pairs separately with the colour accessibility checker. The selected source colour is stored in localStorage.

Related tools

• Colour accessibility checker: Easily check colour contrast ratios for WCAG compliance with this widget. Input HEX or RGB values to ensure accessibility for AA and AAA standards.
• Colour converter: Easily convert colours between hex, RGB, HSL, CMYK, LCH, and more with this online tool. Save time, ensure consistency of your design.

Further reading

• Wikipedia: Colour theory
• Wikipedia: Harmony (color)
• Wikipedia: Colour scheme

Widget made with staark