The colour wheel shows hue relationships on a digital RGB/HSL* wheel. The swatches turn those hues into a mix of deeper tones, richer colours and lighter tints for a website.

*Red Green Blue (RGB) and Hue Saturation Lightness (HSL) colouring refers to models of displaying colour on device screens. For a more in depth explanation of these colour spaces, see this page.

You can select from a range of standard colour theory models or select "Custom" and drag the pins around the wheel to create your own palette.

Complementary: a clear focal point
Two hues sit opposite each other, 180° apart. Think teal with coral: let one lead and use the other sparingly for emphasis. Five swatches come from these two hue families.

Analogous: naturally connected
Five neighbouring hues sit 20° apart. Blue through teal to green can feel cohesive and calm. Differences in lightness help separate content when the hues are similar.

Monochromatic: one hue, plenty of depth
One pin sets the hue for all five colours. Darker, richer and paler versions create variety without introducing another hue. Useful for a restrained, consistent visual identity.

Split Complementary: contrast with variety
One starting hue is paired with the two neighbours of its opposite, at 150° and 210°. Blue with warm yellow and red gives you two accent options. Extra tints complete the palette.

Triadic: balanced energy
Three hues are evenly spaced, 120° apart. Use one as the main colour and the other two as smaller accents to keep a lively palette from becoming overwhelming.

Put your palette to work
Try the deeper shade for headings, the main colour for brand elements and the pale shades for backgrounds.

A contrasting accent can draw attention to a key button while still belonging to the palette.

Harmony describes how colours relate but it does not guarantee readable text or buttons. Check the actual foreground and background combinations before using them on your site.

Creating a clear and contrasting colour for links and buttons allow site visitors to understand more clearly what to click on to make a decision, for example, to contact the site owner or to "buy".

Muted, pale buttons can work on an otherwise dark and/or deep background. Otherwise be mindful that "Call to Action" (CTA) buttons need to stand out to be seen easily. 

The Canvas colour: For something a little different to white as a canvas, as white can be quite harsh on the eyes, why not try an off-white "hint of" colour? Stand out; be different. Be bold.