Different neon arrows in blue, yellow and magenta
Best colour scheme tools for creatives
In my work as a freelance Webflow designer, as well as in my day job as a digital designer in the eLearning and HR space, being able to create effective colour schemes is essential. So this post is a great opportunity to have another look at different websites and tools for developing colour schemes for websites or branding projects. After looking again and some of my existing resources, I have also gone online to find additional sites that might come in handy for creatives.
The classic resource for any designer wanting to establish a new colour scheme. Adobe lets you mix and arrange up to 5 colours to a scheme. Based on a 'base colour' set by you, you can apply Adobe's colour harmony rules to influence your colours. You can also choose from various colours modes including LAB and CMYK. What's great as well is that with their new accessibility tools you can check how your chosen colours appear for people with various forms of colour blindness. And as Adobe announces on the site, an accessibility contrast check feature is supposed to be implemented soon as well. But wait, there's more! Via Adobe Color's 'trends' and 'explore' sections designers can look at colour schemes and images for colour inspiration. Last but not least designers can upload their own images and use them as reference for their own colour schemes and save their newly created colour palettes into their Creative Cloud account. Nice work Adobe!
More info:
Colormind has quite a different concept than Adobe Color. The site lets you choose 5 different colours which are then applied to sample website elements further down the screen. This means you can see directly how some of your colours would look like together on a dashboard UI or an icon set. You can also use their Bootstrap function which lets you choose a particular colour for each of Bootstrap's standard colours (main brand colour, dark shades, light accent etc.). To be frank, you will still need to try out different colour combinations on some actual mockups in your design software but it's a good start nevertheless if you'd like to get a first impression of how a particular colour could look like in a "live" environment.
More info:
http://colormind.io/bootstrap/
Colour Hunt is not so much a tool for creating colour palettes and mixing colours, but to get inspiration from already developed palettes. The site lets you scroll through a variety of pre-made palettes (you can also search by colour or by categories like new or popular). If you've found a palette or single colour you like, you can either download the palette as a png file or copy the HEX value of a particular colour into your design tool of choice. Additionally you can copy and save the link to a colour palette for future reference or to send it to a co-worker or client for feedback. I see Colorhunt as more of a starting point for establishing a colour palette as it makes it easy for you to pick certain colours and continue working with them elsewhere.
More info:
Coolors calls itself "the super fast colour schemes generator". It reminds me a bit of Adobe Color in terms of available options (different colour modes, creating palettes from uploaded photos etc.) – minus the Adobe CC integration of course. Coolors lets you select and combine up to 5 different colours and save and export those as well. When it comes to exporting your colours, what's quite good is that you've got a great choice of export formats including SVG, PDF or CSS code (amongst others). Just as Adobe's tool it also lets you check how your chosen colours look like to people with colour blindness. The site actually also provides a contrast checker that lets you see if text placed on a coloured background is still readable for people vision impairments. Definitely check out Coolors if you're looking for a colour palette tool similar to Adobe Color but with a simpler interface and some additional features.
More info:
Another tool for colour inspiration is Color Space. It works in fairly simple way: You choose a colour either via their colour selector or directly by typing in a HEX or RGB value. You then press the "Generate" button and the site automatically creates a variety of different colour palettes for you. You can then easily copy and paste the HEX value of each colour into your preferred design tool. But that's not all. What's really nice is that with just the press of a button can also generate a CSS colour gradient or 3 colour gradient. Just specify your colours and you'll be shown the resulting gradient as a full screen background on the site. And: you'll see the exact CSS code for your chosen gradient on the site as well which you can copy directly into your CSS stylesheet (well, if you're using Webflow you can just copy the HEX values and create the gradient visually).
More info:
Hopefully this post has given you some additional ideas on where to find and create new colour schemes online. And if would like to brush up your knowledge on how to develop great colour palettes, check out this useful article by InVision: https://www.invisionapp.com/inside-design/quick-guide-color-palette/
If you've got any other sites worth mentioning in this space - be sure to let me know!
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
