Colour Palette Generator

This is a tool to generate a neatly displayed colour palette. Colour palettes can be created from a single initial colour (hex code) or existing colour palettes can be entered as a list of hex values.

Colour palette generation is performed by altering the hue value of the HSL colour wheel. The hue is altered by set values (I like to think of them as rotations). By using evenly spread values, nice colour palettes can be generated. I have included some default options which tend to look nice, but feel free to test your own custom rotations (as a comma separated list).

Once the hues are added, the lightness of the colour is altered from 10% to 90%, to create a nice range of dark and light colours. I probably would avoid using all the shades of each colour, but its nice to have a range of shades for different use cases.

Be aware, the saturation value is constant throughout the colour palette, which means over or under saturated initial colours may create poor colour palettes. I recommend starting with saturation values of about 0.5-0.8, depending on use case.

The url created from generating the colour has all the parameters to create the palette, so feel free to save or share a link if you like a palette. You can also save the palette as an image or as a JSON object (buttons at bottom), perfect for future use.

Colour Picker

126
0.7
0.7

Generate palette from an initial colour:











Want fewer shades?




Plot a custom palette




Want fewer shades?




Accessibility Check

Check how the colours may be seen with different forms of colour-blindness. For this I am using the npm package color-blind to simulate colors. I cannot personally comment on the accuracy of this simulation, but it may be helpful. I've only included the four most common types of colour-blindness, as the proportions of the others are very low (<0.01%). I have taken the proportions from wikipedia - note that colour-blindness disproportionately affects men, so only this proportions are show.

Type of Color Blindness Proportion of Male Population Button
Deuteranomalous 6.3%
Protanomalous 1.3%
Protanopia 1.3%
Deauteranopia 1.2%

Created by Gabriel Ing
Favicon from: School icons created by Freepik - Flaticon