Colour Palette Generator Widget

Add a colour palette generator to your design or art page. Readers choose one base colour and get six colour-wheel harmonies at once; each swatch copies its hex code, and the whole set copies as CSS variables.

Design Generator Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/color-palette-generator" title="Colour Palette Generator by A2Z Tools" width="100%" height="780" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The base colour is converted to HSL and its hue is rotated around the colour wheel for each harmony, keeping saturation and lightness, then converted back to hex. The monochromatic row keeps hue and saturation and steps lightness from 15% to 85%. HSL is a simple geometric model rather than a perceptual one, so a rotated yellow can look much lighter than a blue of the same HSL lightness; the note under the palette reminds readers to check contrast before pairing colours for text.

Method

  • Complementary: h + 180
  • Analogous: h - 30, h, h + 30
  • Triadic: h, h + 120, h + 240; split-complementary: h, h + 150, h + 210
  • Tetradic (square): h, h + 90, h + 180, h + 270
  • Monochromatic: same h and s, lightness 15%, 29%, 43%, 57%, 71%, 85%
  • HSL <-> RGB per CSS Color 4; hue taken mod 360; hex rounded to 8-bit channels

Limitations

  • Harmonies are geometric rotations on the screen (RGB) wheel. They are conventions, not rules, and differ from the painters' RYB wheel.
  • HSL is not perceptually uniform: equal lightness numbers do not look equally light, so a palette is not automatically accessible.
  • Greys and near-greys have no meaningful hue, so their harmonies are the same grey.
  • The generator does not check text contrast between swatches; use the contrast checker for any pair you set text in.

Where publishers use it

  • Colour-theory lessons in art and design courses
  • Branding blogs that show options built around a logo colour
  • Website theme documentation offering accent-colour ideas
  • Craft, interior and fashion sites suggesting matching colours

Questions

Which colour wheel is used?

The RGB/HSL wheel used on screens, where red's complement is cyan. The traditional painters' RYB wheel (red opposite green) gives different pairs.

Why do some generated colours look brighter than others?

HSL keeps the same numeric lightness, but the eye sees yellows and greens as brighter than blues and purples at that value. Adjust by eye, and check text contrast.

How do I copy the colours?

Click any swatch to copy its hex code, or use Copy all as CSS variables to get a :root block with every palette.

Can I set the starting colour?

Yes, with v_color=2a9d8f in the embed URL.

Sources

  1. CSS Color Module Level 4 - HSL colours and the HSL-to-RGB conversion - W3C . the colour model the hue rotation is done in; the harmony angles themselves are design conventions, not a standard

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Colour Palette Generator
https://a2z.tools/embed/color-palette-generator

Related widgets

More Design widgets →

Preview

CustomizeGet code