Use Photos to Generate Beautiful Colour Palettes

The soft wave photo is uploaded to color.adobe.com.

Upload the photo to a colour-picker. This is color.adobe.com.

The use of colour in a project can attract learners and support the overall message of the learning, or it can distract learners and contradict what you’re trying to convey.

I remember an elearning module I took a few years ago. It had blue buttons that looked great with the overall theme of the module, which was mostly blue and white. But on-hover, the button text turned red. Such a small thing, but it was a distraction. “I can’t believe they did that!” I muttered to myself. Red-on-blue is hard on the eyes and should be avoided in any kind of web-design and that goes for elearning courses too.

Two blue buttons: one with white text, one with red text. The red text is hard to read.

The red text is hard to read.

When I’m hired to produce an elearning module, the client usually has brand guidelines I must follow. The colours and fonts in the brand guidelines give me a starting point. Often I look at some of their other print or online layouts to see what might be expected, or at least not rejected, for the graphic style of my elearning.

But when there are no brand guidelines, where do you start? I start with colour.

To find good colours, I look at photos — usually nature photos — to find something I like.
A great source of free photos is Unsplash, where I found this gem. There are tons of stock photo sites where you can find images.

Soft waves at sunset

Jonathan Bean, Unsplash

Sampling a colour from a photo to create a headline that coordinates with the photo is a well known technique. You’ll see this used on magazine covers all the time. You can use a similar technique to generate a colour palette for your courses.

Three magazine covers where image colour is used in the headline.

Colour from these images was sampled to coordinate the headlines.

Upload your chosen photo to Adobe Color and let it create a five-colour palette for you. There are many colour picker sites, many of which allow you to upload your own photo.

The soft wave photo is uploaded to color.adobe.com.

Upload the photo to a colour-picker. This is color.adobe.com.

Play with the colour mood or adjust the palette, then save it. You’ll need an Adobe ID to save.

Adobe Color gives you both the HEX (useful in Storyline) and the RGB (useful in PowerPoint) values of the colours. The values ensure consistency. I always take a screenshot of the final colours so I have a record of the values. I can insert the screenshot into PowerPoint or Storyline.  You can also download the .ase file to use in Illustrator or Photoshop or wherever you create your graphics.

The HEX and RGB values of the five hues in the soft-ocean photo.

Take a screenshot of the HEX and RGB values.

Insert this image onto a master slide in Storyline so you can leverage the Eyedropper tool from the Create New Theme Colors dialog.

The Eyedropper tool is chosen from Accent 4 in the Create New Theme Colors dialog.

Use the Eyedropper tool to create custom colours for your theme.

Then, for every element in your elearning project, use one of these hues, a tint or a shade. Without even trying, your project will have beautiful, cohesive colour that’s going to make your project more attractive, more engaging and less distracting.

A question, with a feedback layer, shows the colour palette in action.

Here’s a sample layout in Storyline, using the theme colours from the photo.

Everything about your design — the colour, the font, the words, the mood — should support the message you’re trying to get across to your learners. Nothing brash or distracting… unless your training is meant to be brash and distracting.

In Summary:

  • Find a photo you like.
  • Upload the photo to a colour-picker like color.adobe.com.
  • Take a screenshot of the colour values.
  • Use the colours to build themes in Storyline or PowerPoint or wherever you create your graphics.

If you found this post useful, please share it with someone who might enjoy it!

 

6 Responses to “Use Photos to Generate Beautiful Colour Palettes”

  1. Diane Weir

    What a wonderful suggestion, Jane! And thank you for the clear instructions. I am definitely going to try this on my next open design project!

    Reply
    • Jane

      Thanks for stopping by, Diane. I’m glad you find it helpful.

      Reply
  2. Catherine

    Thanks Jane. That was fantastic. I am going to bookmark this and come back to it regularly.

    Reply
    • Jane

      I’m glad you find it helpful. Thanks for stopping by, Catherine.

      Reply
  3. Dawn

    The first course I ever worked on was volunteer for a large, national non-profit. The brand guidelines I was given included 4 colors, and really bold ones. I had a really difficult time putting this fairly large course together with 4 colors. Worse, when I saw the courses that others had designed for them they all contained color suggestions such as yours. So, I knew to ask with other companies in the future. I’m reminded everyday of the project though, since they do billboard advertising on the highway I drive to work! Good suggestions Jane.

    Reply
    • Jane

      Tough spot, for sure, Dawn. Our tools today have much better palettes built-in, so tints and shades are readily available. Thanks for your comment!

      Reply

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

This site uses Akismet to reduce spam. Learn how your comment data is processed.