How I learnt about color theories and made my best color palettes in one month

#7 — Seventh month of my challenge: 12 topics to learn in 12 months

Some colors plates… we will come back to that, don’t worry

Preparation

  1. Finding a mentor
    Once again I chose Vera as my mentor. She was my colleague in my previous company, she is very talented and she was my mentor while learning about design and creativity.
  2. Defining the scope of the topic
    The scope of the topic is quite simple, I want to understand the theories behind colors, and how to build myself a color palette.
  3. Choosing a learning resource
    My learning resources for color theories are various:
    - The book “Interaction of Color — Albers Josef”, recommended by my mentor and many medium articles, about color interactions
    -
    A slideshow based on “How pictures work — Molly Bang”, recommended by my mentor, about shapes, colors, sizes and emotions created
    - Two articles coming from: https://learn-anything.xyz/design/colour-theory, about Color Theory Basics and Practical Color Theory
    for People Who Code

    - Other links from Google and articles from Wikipedia
  4. Defining a project
    My main goal is to design 3 color palettes and one of them will be used for my Portfolio that I want to rebuild in the future, after a few more learning challenges. My second goal is to build a tool to help finding good color palettes based on my learning and different from existing services.

Color theories

I started reading the book “Interaction of Color — Albers Josef” which is mainly about a professor experimenting how colors can look when put together, the feeling they can give, or about color illusions. It’s more about practicing before making theories 😊.

Theory about colors. The Basics

Terminology

Let’s begging with the not so fun but very important part to be able to understand colors, the main terminology.

  • Saturation or Chroma — the overall intensity or brightness of a color
  • Value — the lightness or darkness of a color
Source: http://interkom.ca/the-world-of-colour-part-iii-taking-a-spin-on-the-colour-wheel/

Color systems

The color systems are the spaces that define a color. You can see below what are the main ones and how are they defining them.

  • Red Green Blue — RGB
  • Cyan Yellow Magenta Key — CYMK
  • Hue Saturation Value — HSV
  • Hue Saturation Lightness — HSL
  • Natural Color System — NCS
  • CIE Lab
  • CIE XYZ
HSV in space — Source: https://en.wikipedia.org/wiki/HSL_and_HSV
RGB in space — https://en.wikipedia.org/wiki/RGB_color_model

Meaning of colors

There is not only one truth about the meaning of colors. It can be very relative to each person and also to each culture, for example in in Hanunó’o a language from The Philippines there are only 4 words to describe colors. If you want to know more about colors and countries watch the video below.

Source: Vox — The surprising pattern behind color names around the world
  • Orange — cheerful, passion, pleasure, enthusiasm, fascination, creativity, fun, frivolous, flamboyant, crass, low Class
  • Yellow — optimism, childish, freshness, law, education, arrogance, cowardice, illness, betrayal
  • Green — wealth, money, calming, trees, ambition, endurance, healing, calm, generosity, natural, completion, protection, envy, jealousy, immaturity
  • Blue — security, trustworthy, stability, loyalty, wisdom, trust, friendliness, preservation, courage, science, sadness, depression, cold, immoral, staid
  • Purple — magic, mystery, spirituality, the sub-conscious, creativity, dignity, royalty, mourning, cruelty, arrogance, conceit
  • Black — powerful, mysterious, elegance, sophistication, functionality, death, morbid, plague, aloof
Goethe color system’s equilateral triangle

Interaction between colors

Did you know that 1 color could look like 2? or that 4 different colors could also look like 3 😜? They are illusions, some strange psychological effects, produced by our brain, which cannot distinguish well colors when they are used together with others, no matter if they have the same or different contrast.

1 color looks like 2— Source: https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9
The two little squares in the middle of each big rectangles look the same but have different colors, you can see them reverted and next to each other on the bottom of the plate
The contrast between edges of the slightly differing shades of gray — The Mach bands effect — source: https://en.wikipedia.org/wiki/Mach_bands
  1. Blue
  2. Green
  3. Orange
  4. Yellow (least prominent)

Practice. How to build the perfect color palette

There are two different approaches for building color palettes. The first is programmatically by using color schemes: you chose one color and a color scheme / algorithm will give you some others. The second is with the eye 👀, by practicing and trying ourselves to match colors together.

Programmatically

All the color schemes start with one thing: the color wheel. In order to generate a palette of color, you select your main primary color from this wheel. Then you apply one of the rules we will see below to generate the others. To simplify, it will rotate the wheel from a set of predefined angles to find the other colors. For example add 180° and you will get the complementary color! You don’t have to think more it’s as simple as mathematics 🙌!

The color wheel — source: https://www.franklinpainting.com/blog/home/choosing-colors-interior-painting/
Color schemes — source: https://www.shopify.com/retail/119923395-why-all-sale-signs-are-red-the-science-of-color-in-retail

By practicing

There are many reasons why the programmatic way is not always perfect. One of them is the interaction of colors, that they can look different when match with different ones. Another explanation is that some colors have more weight, they are more prominent as we have seen above. Finally, there is another reason: some colors are taking more space in the wheel while looking the same, it’s the color tolerance.

Good painting, good coloring, is comparable to good cooking. Even a good cooking recipe demands tasting and repeating tasting while it is being followed. And the best tasting still depends on a cook with taste — Josef Albers

That is why the other approach is by practicing. Just play with colors, until you find the perfect balance. Checking how each color of the palette match with the other, and thinking about how you will use these colors in practice.

Colors are like ingredients, put them together and see how they react!

Color palette creation process 📋

So here is the process I suggest and I applied, to start defining the brand and website color palette (from scratch) you can indeed skip the steps if you have already the primary color defined.

  1. Find the color that matches the most these adjectives and values either from the list in the meaning or by finding an existing brand with similar values
  2. Using a tool like Adobe Color, try to find the first color, and apply different schemes rules
  3. Once you find something that you liked the most try it in another tool like Colors Interactor (that I built, you will understand why below) to see how the colors interact or Colormind or how it would like in a real website
  4. Check it in grayscale in photoshop to see how it would look like for color blind
  5. Define your primary, secondary and tertiary color, keeping in mind this rule, 60% of use for the primary, 30% for the secondary and 10% for the tertiary.
  6. Use achromatic colors for reading

Useful tools

Here are a few useful tools that I listed:

  • Colormind — To generate AI based palettes and try them on a website template
  • BrandColor — To get the colors of the most famous brand
  • ColorHexa — To get color’s information
  • TintUI — Color palettes from Google, Twitter, and others
  • ColorHunt — Curated list of color palettes
  • ColorLisa — Color palettes coming from master pieces
  • Webcolourdata — Colors from websites

Let’s build some tools and palettes

The tools

Before building my palettes I wanted to build a tool to help me to play with the colors, and see the relativity of colors on top of others as you could see in the first picture of the article. Also, playing with colors in Photoshop is a bit annoying, so that’s another reason why I decided to build this. I used Vue.JS, a framework that I wanted to learn, it gave me a quick overview of it. I named this tool ‘Color Interactor’ which is also open source 😀.

The palettes

I first built two palettes using the tool I created. It was mostly to play with the colors, these two palettes don’t have any real use case … yet.

My current portfolio
  1. Creative
  2. Technology
  3. Innovation
  4. Expertise
Here is Airbnb’s palette from my analysis

The final results

Color palettes

Here are the 4 palettes I created. Feel free to use them!

Colors interactor

Here is my tool to interact with color by generating color plates and random colors that look good: https://colors.learn.uno

Here is a screenshot of Colors Interactor — as you can see it generated different plates including one in grey scale

SASS Colors playground

Here is the SASS script https://codepen.io/sandoche/pen/KyzMZe that you can easily use to generate colors by changing the first color variable. It is coming from Practical Color Theory for People Who Code.

Feedback from this learning month

What went well

  • Time scope — I finished the 4th of November
  • Collaboration with my mentor
  • I feel a lot more confident now when I choose colors
  • Building ‘Colors interactor’ in a few hours with Vue.JS

What to improve

  • Practice more while reading the book, I mostly practice after reading the book while reading the articles
  • Build more color palettes to learn more by doing

If you liked this post, please click the clap 👏button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!

Hello, I’m Sandoche Adittane. I learn about one topic every month and write a post about it!