12 Online Colour Tools for Building a Palette

The best online colour tools at a glance

A colour tool does one of four jobs: it generates palettes, shows you palettes other people have built, previews a palette on a real layout, or checks that the colours are readable. No single tool does all four well, which is why most designers keep three or four bookmarked. The table sorts the twelve below by the job they do best.

Colour palette generators

Generators are where a palette starts. They are fast and a little random, which is the point: they show you combinations you would not have tried.

1. Coolors

Press the space bar and Coolors gives you a five-colour palette. Click the lock on any colour you like and keep pressing until the rest fall into place. You can start from a photo, adjust each colour by hue, saturation and brightness, and export as PNG, PDF, SVG or CSS code. The free version covers almost everything a designer needs; the Pro plan adds things like larger palettes and unlimited saved projects.

2. Adobe Color

Adobe Color puts a proper colour wheel in front of you with harmony rules: analogous, monochromatic, triad, complementary, split complementary, square and compound. Pick a base colour, pick a rule, and the wheel builds the rest. It can also extract a theme from an uploaded image, and its accessibility tools check a palette for colour-blind conflicts and text contrast. Palettes save to your Creative Cloud Libraries, so they appear inside Photoshop, Illustrator and InDesign.

3. Khroma

Khroma asks you to pick 50 colours you like, then uses that choice to generate an endless stream of pairings, shown as type on a background, gradients, posters and images. It is the most enjoyable of the generators and good at breaking a creative block, but it is less useful when you already have a fixed brand colour to build around.

4. Colormind

Colormind generates five-colour palettes from a model trained on photographs, films and art. Its most useful feature is the UI preview: the palette appears on a sample website, with each colour assigned to a role such as background, accent or button. Lock a colour and regenerate the others, just as in Coolors.

Colour palette inspiration sites

When the brief says "modern but warm" and nothing more, browsing palettes other designers have already balanced is faster than generating from scratch.

5. Color Hunt

A curated collection of four-colour palettes, sortable by popular, new and random, and tagged by mood and theme (pastel, vintage, dark, earth and so on). Click a palette to copy the HEX codes. It is a starting point, not a system: you will still need neutrals and text colours.

6. Happy Hues

Happy Hues shows each palette applied to the whole site you are looking at, and labels which colour does what: background, headline, paragraph, button, illustration stroke. That is how a palette should be judged, because colours that look fine as swatches often fall apart once text sits on them.

7. Pantone Connect

Pantone Connect finds the nearest Pantone match for a HEX or RGB colour, converts between systems and builds palettes with Pantone references. You need it once a brand goes to packaging, signage or printed merchandise, where "the blue on the website" is not a usable instruction for a printer. Full features sit behind a paid plan.

Tools to preview a website colour palette

A website colour palette has to do more than look nice: it has to cover backgrounds, body text, links, buttons and states. These tools show you whether yours does. For the method behind choosing the colours in the first place, see our guide on how to pick a colour scheme for your website.

8. Realtime Colors

Enter five colours (text, background, primary, secondary, accent) and Realtime Colors applies them to a realistic landing page as you type. You can switch between light and dark mode, randomise, and export the result as CSS variables or a Tailwind config. It is the best sanity check before committing to a palette, because you see the headings, buttons and cards together.

9. Paletton

The interface looks dated, but Paletton is still one of the best tools for building tints and shades systematically. Choose mono, adjacent, triad or tetrad, drag around the wheel, and it lays out each hue with lighter and darker steps. It also simulates several kinds of colour blindness.

10. ColorHexa

Type any colour code and ColorHexa returns everything about it: RGB, HSL, CMYK and other conversions, complementary and triadic schemes, tints, shades and a colour-blindness preview. It is a reference tool, the one to open when a client sends a single HEX code and asks for "something that goes with it".

Colour contrast and accessibility checkers

Under WCAG 2.2, normal body text needs a contrast ratio of at least 4.5:1 against its background, large text needs 3:1, and icons and form borders need 3:1 against what surrounds them. A palette that fails these numbers will look washed out on a phone in sunlight and be hard to read for anyone with low vision.

11. WebAIM Contrast Checker

Enter a foreground and background colour and WebAIM shows the ratio and whether it passes AA and AAA for normal text, large text and graphical objects. A lightness slider lets you nudge a failing colour until it passes. Check every text and background pair you plan to use, not just the main one.

12. Accessible Palette

Accessible Palette builds full colour scales (say, ten steps of blue from very light to very dark) where every step has consistent lightness across hues. The result is a scale where you know in advance which steps can carry text on which backgrounds. This is how design systems should be made, and it saves a lot of fixing later.

Is there a colour scheme app for your phone?

Yes. Most colour work is still easier on a desktop, but two apps are worth having:

• Coolors has an iPhone app with the same generate-and-lock routine as the website, plus palette extraction from your photos and saved projects that sync with your account.
• Adobe Capture (iOS and Android) pulls a palette from whatever the camera sees, a shop front, a fabric, a sunset, and saves it to your Creative Cloud Libraries for use in Adobe apps.

Do the final contrast check on a desktop. Phone screens vary in brightness and colour, so a pairing that looks fine on yours may not on a client's.

How to build a palette with these tools

This is the order our designers in Islamabad follow when a client needs a palette for a new brand or website:

1. 01Fix the base colour. If the brand already has one, start there; if not, explore in Coolors, Khroma or Color Hunt until two or three candidates stand out.
2. 02Set the harmony in Adobe Color. Choose analogous for calm, complementary for contrast, and add one accent for buttons and links.
3. 03Build tints and shades for each hue in Paletton or Accessible Palette, plus four to six neutrals for text, backgrounds and borders.
4. 04Preview the palette on a real layout in Realtime Colors, in light and dark mode.
5. 05Check every text and background pair in the WebAIM Contrast Checker and adjust any that fail.
6. 06If the brand will be printed, find the Pantone matches in Pantone Connect.
7. 07Save the final values as named colour styles or variables in Figma, so developers get the same HEX codes the designer approved.

Matching charts and slides to your brand palette

A common question: you have chart data and want the bars and lines in your brand colours rather than the software's defaults. You do not need a separate tool for most of it.

• Excel and PowerPoint: go to Page Layout (Excel) or Design (PowerPoint), open Colors, then Customize Colors, and enter your brand HEX codes as the accent colours. New charts pick them up automatically.
• Google Sheets and Slides: set a custom theme with your colours, or change each series colour in the chart editor under Customize.
• Datawrapper: set custom colours for each series, and save them in a theme if you make charts often.
• Viz Palette: paste your brand colours to see them as chart elements side by side and check whether any two look the same to people with colour blindness.

Brand palettes are usually designed for logos and websites, not for eight data series, so expect to add lighter and darker steps of your main colours for charts. Keep the brand's strongest colour for the series you want people to notice.

Choosing colours for a brand rather than a single website? Read does brand colour matter for what each colour tends to signal and how to choose.