Complementary
  • Complementary
  • Triadic
  • Tetradic
  • Analogous
  • Neutral
  • Shades
  • Tints
  • Tones

#788d53

120, 141, 83

#68538d

104, 83, 141

Colour Picker

Use the colour picker by clicking and dragging your cursor inside the picker area to highlight a colour on the right. Input Hex, RGB, HSL or CMYK values to search for a particular colour in the fields below the colour swatch; click the swatch to add it to your palette. After selecting a colour, experiment with different harmonies by using the dropdown below the colour picker.

Colour Harmonies

Colour harmonies are particularly pleasing combinations of two or more colours derived from their relationship on a colour wheel. Also known as colour chords, colour harmonies are useful when exploring a possible colour palette, or can be used as a standalone colour scheme.

Complementary Color Harmony | HTML Color Codes
Complementary Color Harmonies | HTML Color Codes

Complementary colours

Colours that are directly opposite one another on the colour wheel are known as complementary colours. Complementary colours have a high contrast and can be very effective as accent colours when paired with a more neutral palette.

Triadic Color Harmony | HTML Color Codes
Triadic Color Harmonies | HTML Color Codes

Triadic colours

Triadic harmonies consist of three colours equidistant from one another on the colour wheel. Like complementary colours, triadic schemes tend to be very bright with a high contrast and work best when one colour dominates.

Tetradic Color Harmony | HTML Color Codes
Tetradic Color Harmonies | HTML Color Codes

Tetradic colours

Tetradic colour harmonies are formed by two sets of complementary colours 60 degrees apart on the colour wheel. Tetradic schemes are an excellent starting point for creating colour palettes; fine tune them using colour shades, tints and tones.

Analogous Color Harmony | HTML Color Codes
Analogous Color Harmonies | HTML Color Codes

Analogous colours

Analogous harmonies are created by selecting the colours directly adjacent to a chosen colour. Frequently found in web design, analogous schemes, when paired with a complementary colour for contrast, can offer great versatility.

Neutral Color Harmony | HTML Color Codes
Neutral Color Harmonies | HTML Color Codes

Neutral colours

Neutral schemes, like analogous harmonies, are formed by taking the colours on either side of a chosen colour but at half the distance. While analogous schemes typically use colours 30 degrees apart, neutral harmonies use colours 15 degrees apart.

Colour Shades, Tints and Tones

Colour shades, tints and tones are created by adding black, white and gray respectively to a chosen colour. They can be very useful in web design for backgrounds and typography, and are often paired with a complementary colour for contrast. Try them with your own colour using the dropdown menu below the colour picker.

Color Shades | HTML Color Codes

Colour shades

Adding black in varying levels to a colour produces gradually darker variants, or 'shades', of that particular colour. Shades work well for link hover effects, or as footer and header backgrounds.

Color Tints | HTML Color Codes

Colour tints

Colour tints are made by adding white to a colour, resulting in increasingly lighter versions. Tints can also be used for CSS hover effects, and perform nicely as modal backgrounds.

Color Tones | HTML Color Codes

Colour tones

Tones are created by adding gray to a colour, and produces an almost endless variety of colours depending on what level of gray is used. Less common in web design, tones could be useful for typographic elements like comments, quotes or highlights.