Understanding Colours
Working with colours for your Campaign is a crucial step in good design. Colours can affect the mood and emotion conveyed in your content, and have the ability to bring various elements under a clear brand. So let's explore all things colours.
Skip Ahead To
The Importance of Colours
Colours are powerful. They have the ability to alter moods and change emotions. They can give a web of content a coherent calmness and order. Colours are powerful and there is a whole psychology behind them. So when we look to use colour, taking a breath before we pick our favourites can be really fruitful for your campaigns. Though a colour's effect on someone can be quite subjective, there are some helpful considerations we can make before locking in our decisions. Here are a few questions to ponder:
Does the colour fit the context?
Does the colour suit the brands personality?
Does the colour represent the audience we are reaching?
Does the colour harmfully exclude certain people?
This is not to say you need to play it safe, but it is an advantage to be considered.
Choosing the Right Colours
What you are looking for is a palette: a small section of colours, when placed alongside one another, will sing in harmony. This doesn't soft pastels but can mean huge, bold colours. But how do you pick from the vast selection? Lets look at some options:
- Go with your brand colours
If you have a clear visual brand for your organisation, then the selection of colours can be easy for you. Brand recognition is an important element in building trust with donors and fundraisers, so better than going rogue is to understand these guidelines and follow them - Go with your brand & something unique for the campaign
If you are creating multiple campaigns a year, especially if some are targeting smaller demographics within your database, then adding in some new accent colours can be a great help. Using a tool like coolors.co is a great way to find complementary accent colours that will work with your brand. - Go minimal
Whether you have pre-selected brand colours or not, its worth considering if you could go tonal. Using black and white as your base, and all your shades between, you can create some striking visual effects with a campaign. - New colours for a new campaign
If you are just after some brand new colours and you can select any, then a great tip is to base your colours off a hero image (primary campaign image) you are using. Using a colour picker (in your photo editor or in your Chrome Browser), hover over an image and see what colours may be available. Tying your colours in with you hero image can produce a real coherence for your campaigns site. Pick a strong primary colour, a fun accent colour, and a darker colour you can use for your text. And don't forget white (or a shade of).
Colours and Accessibility
It is worth mentioning that your use of colours has a single primary rule you should abide by (or risk certain doom): your colours must be accessible. If your colour selection makes it hard for the viewer to consume the content, then you likely need a different colour. This is often most relevant to your font colour selection. It's easy to make the mistake of using white text on a number of coloured backgrounds, but this can limit readability. There are also just some colour combinations (fluros for sure) that will make it almost impossible for your viewer to hold their attention.
Raisely helps you with accessibility by highlighting when colour combinations are inaccessible and then providing some alternatives. Look out for these notices to help you make good decisions on colours.
You can check out Adobe's new colour accessibility tool for some great guidance in this area!
Setting Up Your Colours
Within Raisely's Page Builder, you have the flexibility to change individual row, column, or text blocks to the right background or content colour you like, just within the settings.
To make it easy for you, Raisely's design settings allow you to add global brand colours that will then generate a 16 colour complementary palette, which is a great place to start. From both the primary and secondary colours you choose, the palette creates 4 lighter shades and 3 darker shades of each.
To change your global brand colours, from the sidebar select Design > Brand to access your primary and secondary selections.
Raisely also gives you complete freedom to set your colours in your CSS Stylesheet. You can access your stylesheet or add a new stylesheet with your Design settings from the sidebar, or there is a shortcut within the Page Builder.
FAQ
### accordion
## expand
# How does Raisely generate the colour palette?
The default colour palette contains 16 colours with 8 greyscale tones. The colours are lighter and darker shades of the Primary and Secondary colours defined in your Design > Brand settings. Each colour is also given a name, which can be used in your CSS. Here's an example of a primary colour defined:
## expand
## expand
# How are the colours defined for different blocks, like the Progress Bar or Donation Forms?
Each block incorporates the colour palette generated from your Primary and Secondary colour selection. Depending on the placement of the blocks within the template, will determine the default colour used. Raisely's templates are designed to incorporate the colour palette in a way that promotes accessibility and aesthetic. To change colours within blocks, changes to your CSS will need to be made.
## expand
### accordion
Cannot find the support guide you are after? Head on over to our YouTube channel 📺 for more creative content to help you go further. You can even leave us comments, suggesting new content ideas 🤯