Colour is an essential part of design, and a good colour scheme is a fundamental part of any well-designed brand, website or product. However, choosing an appealing colour palette can be quite a challenge. Integrating your company's mission and personality through a range of colours can seem overwhelming - and it is. Luckily, there are many tools that can help you find the perfect combination for your needs, whether you're looking for complementary colours or starting from scratch.
A UX designer's view of colour palettes
As mentioned earlier, colour is a very essential part of design. As a UX designer, you have an eye on the whole interface and the best interaction. Colours play a big role in interaction as they guide people's eyes. In the worst case, a poorly chosen colour palette can affect the user experience and even make it difficult or impossible to use a website, app or product. The effect of colours is quite complex. It is very important to understand the basic meaning of colours, the influence of culture on colour perception and the general impact of the main colours, such as primary, secondary and tertiary colours.
The combination of colours can have a big impact on how a user reacts to the website and what kind of impression it leaves. It is beneficial to be clear about your target audience when choosing a new colour palette. After you have found the perfect colour palette, you should also not forget to test the accessibility, as this will greatly improve the user experience. We've put together a list of handy colour scheme generators to help you create the right colour scheme for your website. We are sure that at least one tool on this list will become your favourite resource.
Adobe Color Wheel: https://color.adobe.com/create
Adobe Color Wheel is an advanced colour scheme generator developed by Adobe for professional designers. It allows you to either play with the colour wheel and create palettes based on your chosen colour, or upload an image and let the tool generate a colour palette based on that image.
Paletton: http://paletton.com/
Paletton allows you to set your base colour and then displays different options with similar hues. Paletton also allows users to tweak the palette by selecting 'neighbouring colours' and changing the hue and spacing. In addition, the preset effects, such as light pastels, can be used to fine-tune your new palette. You can also test how the palette would look to colour-blind viewers.
Coolors: https://coolors.com/
Coolers is a colour scheme generator that allows you to upload an image and create a colour palette based on the colours in that image. There is also an app for Android or iOS smartphones and a plugin for Adobe Photoshop and Adobe Illustrator.
Palettr: http://palettr.com/
Palettr is a tool that creates colour palettes inspired by photos uploaded by users. You can search for photos using keywords (e.g. by theme or location). The tool then displays photos related to your keyword, along with the colour palette inspired by each image.
Khroma: http://khroma.com/
Khroma is an AI-based colour tool. You first select 50 colours that you like and use them to train the AI, which then generates a large number of colour combinations. You can also look at other people's palettes for inspiration. You can also see how your colours will look with text, as a poster or as an image overlay.
Range of materials: https://www.materialpalette.com/
This is a simple tool inspired by Google Material Design, lets you select two colours from the tiles displayed. A colour palette is then created incorporating the two colours you selected. The tool also offers suggestions for the placement of each colour on your website, such as the primary colour, the secondary colour, the primary text colour and the secondary text colour.
ColourCode: http://colourco.de/
ColourCode is essentially a big colour wheel. You can create a colour palette by clicking on the colour on the screen and then see a variety of automatically created palettes. You can also add new shades or remove ones you don't like, and view your palette in categories such as monochrome, analogue, and so on.
Eggradients: https://www.eggradients.com/
Eggradients is a simple tool for creating gradients that can then be easily copied and used in your projects. Simply find a gradient you like (or create your own) and copy the CSS.
Conclusion
Choosing a colour palette can be a difficult task even for the most experienced designers. Luckily, there are many colour scheme generators that will help you find the perfect colour combination for your needs. We hope these tools will help you with whatever type of project you are working on. If we've forgotten any of your favourite colour palette tools, let us know!
.svg)
.svg){kind=small}