Colour Palette
Build a palette from one colour.
Base Colour
Palette Output
Generated swatches will appear here.
Choosing colours for a design
Use this palette as a starting point for a website, illustration or presentation. Enter a colour you already use, then compare the lighter, darker and related colours before assigning them to backgrounds, text or highlights.
Generate and read your palette
- Enter a hex colour beginning with #, using three or six characters from 0–9 and A–F. The short form expands each character twice.
- Select Generate palette. The first five swatches show two darker variations, your base colour and two lighter variations. Their hex and RGB values describe the same colours in different formats.
- The next five swatches use HSL: hue is the colour's position around the colour wheel, saturation its intensity and lightness how light or dark it is. These colours keep the base saturation and lightness while stepping evenly around the wheel; the first repeats the base hue.
- Select Copy CSS to copy all ten values as named colour variables. Keep the original hex value separately if you want to regenerate the palette later.
Check colours in their intended setting
The darker and lighter variations subtract or add the same amount to each red, green and blue channel. Channels stop at their minimum or maximum, so very dark or light inputs can produce repeated colours. Grey inputs have no saturation, so changing their hue will still produce grey.
A palette does not certify readable contrast between your chosen foreground and background. Test each actual text/background pair, including buttons and focus indicators, and provide labels or symbols as well as colour for important information. Screen brightness, surrounding colours and printing can also change how a colour appears.
Your base colour is sent to Node0a to calculate the palette. No image upload is needed. For layouts that need both images and colours, Fill provides placeholder images. See the privacy policy for website data handling.