Colour Theory

HTML Palette Generator

Use the red, green, and blue sliders to select a colour that you like. The tool will then generate three palettes of matching colours with their corresponding HTML hex colour codes. You can use this tool to select an assortment of colours for web design.

Pick a starting colour

#D3A064

Base Colour Palette

#463521
#9D7B43
#D3A064
#E2C0A8
#F0EFDB

Similar Colour Palette

#FF7E32
#FF875B
#D3A064
#A1C98D
#7FD296

Complementary Colour Palette

#1F2034
#2D4F67
#3C6FAB
#7294CC
#C9DAEE

How the palettes are generated

The Base Colour Palette uses your selected red/green/blue values and generates lighter and darker versions of the same hue. To create lighter colours, your selected colour is averaged with white (255, 255, 255), and to create darker colours, your selected colour is averaged with black (0, 0, 0).

Assigning r, g, and b as the values in your selected colour, from left to right, the r/g/b values of the Base Colour Palette are:



The Similar Colour Palette modifies the proportions of red, green, and blue from your selected colour while attempting to keep the sum of r, g, and b values the same. To create shades with more red, the red value is increased and the blue and green values are decreased. To create shades with less red, the red value is decreased and the blue and green values are increased.

From left to right, the r/g/b values of the Similar Colour Palette are:



The Complementary Colour Palette is based off the complement of your selected colour. The complement is generated by subtracting from 255 the r, g, and b values of your selected colour. A palette of lighter and darker versions of the complement is created in a similar way to the Base Colour Palette.

From left to right, the r/g/b values of the Complementary Colour Palette are:



2017 colourtheory.orangellous.com
All design, code, and graphics are the property of orangellous.com