Color Palette for Website

What this tool does

A website does not need many colours, but the few it uses have to work everywhere, across every page, button, and state, and stay readable while they do it. That is a tighter brief than picking colours for a single graphic, and it helps to be able to build and adjust the set directly.

That is what this does. It lets you build an editable website palette: you choose how many colours it holds, change each one until it fits, and read off its codes to use in your build. You are shaping the set yourself, swatch by swatch, rather than being handed a fixed one, so you can assemble the small, deliberate palette a website actually needs.

How to use it

1. Set the number of colours. Use the control to choose how many swatches your palette has, from two to ten.
2. Get a starting set. Use Randomize to fill the palette with colours to react to.
3. Adjust and copy. Click a swatch to change it, add or remove colours, and read or copy each one in hex, RGB, HSL, or HSV.

Choose how many colours you need, randomise a starting set, then click each swatch to tune it and copy the values for your site.

How it works

The tool gives you a row of editable colour swatches, as many as you choose. Randomize fills them with fresh random colours to start from, and clicking any swatch opens a picker so you can change that colour to exactly what you want. The colour you are working with is shown in hex, RGB, HSL, and HSV, using TinyColor.

So the palette is something you assemble rather than something the tool decides. You set the number of colours, seed them with a random set if you like, and then edit each one until the whole group works. Adding and removing swatches changes how many colours the palette holds, and every colour stays editable, so the set is yours to shape from start to finish.

Building a website palette

A website palette is usually small on purpose. Most sites come down to a main colour that carries the brand, an accent or two for buttons and highlights, and a set of neutrals for text and backgrounds. That is often only a handful of colours, but they have to hold up everywhere the site uses them.

Building the palette directly, as this tool lets you, suits that job well. You can start from a rough set and refine it, making sure the colours you end up with are ones you actually want in each role, rather than accepting whatever a generator produces. The aim is a deliberate, workable set, and editing it swatch by swatch is how you get there.

How many colours to use

The palette can hold anywhere from two to ten colours, and you set the number to suit the site. In practice most websites need only a few: a primary colour, one accent, and a couple of neutrals will carry a lot of designs. Keeping the set small is usually a strength, because it keeps the site coherent.

That said, some designs call for more, which is why the range goes up to ten. A larger palette can be useful when you need several distinct accent colours, or a fuller set of neutrals for different surfaces. Adding and removing colours lets you find the right number, and it is worth resisting the urge to add colours you will not really use.

Adjusting each colour

Every colour in the palette is editable. Clicking a swatch opens a picker so you can set that colour precisely, whether you are dialling in an exact brand colour or nudging a shade until it sits right with the others. You can keep tweaking any swatch until the whole set feels balanced.

Alongside editing, you have a few quick moves. Randomize refills the palette with new colours, which is a fast way to explore ideas or break out of a rut, and adding or removing swatches changes how many colours the set holds. Between changing individual colours and reshaping the set, you can work a palette from a rough first attempt to a finished scheme.

From palette to working site

Once the colours are set, it helps to give each one a job. Decide which is your primary, which is an accent, and which are neutrals for text and backgrounds, so the palette maps onto the parts of the site. That turns a set of swatches into a scheme you can actually build with, and the codes for each colour are there to copy into your stylesheet.

One important thing to keep in mind: this tool does not check contrast for you. It lets you build and read the palette, but it does not test whether text will be legible on a given background, which matters for accessibility. Guidelines such as the Web Content Accessibility Guidelines set out the contrast that readable text needs, so when you pair a text colour with a background, it is worth checking that combination separately to make sure it is easy to read.

Questions people ask

What does it do?

It lets you build an editable palette of two to ten colours, change each one, and copy its hex, RGB, HSL, and HSV values for your site.

How do I change a colour?

Click its swatch to open a picker and set it exactly, or use Randomize to refill the whole set with new colours to react to.

How many colours can I have?

Between two and ten. Add or remove swatches to change the count, though most websites need only a few.

Does it check contrast for accessibility?

No. It does not check contrast automatically. You decide which colours to pair, so it is worth checking text against its background separately for readability.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, colour formats used on the web. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor