Help me understand color palettes🌈

Leandro Reschke — Sat, 08 May 2021 01:31:33 +0000

Introduction 🐱‍👤🦊

Hi, I'm Leandro, a game/web developer from Brazil and this is my first time here, please be gentle 🤗🥰.

Many intriguing questions come into my mind every time I work with colors; therefore, let's discuss and see what you guys come up with to help me better understand it.

Why is so hard to make a consistent color palette? 😪🌧

It all begins with my first 3D model, about 10 years ago.

When I had to texture it, I realized how hard it was to understand how colors work. I knew the principles, about complementary colors and yadda yadda. I wanted 16, 32 colors, not 2, 3, or 4 colors.

Today 😏🍃

Recently, I started making my own CSS Framework and suddenly I encountered the same problem I had before, how would I develop a consistent 5 colors palette for My Website.

This is what I ended up with:

Nice colors aren't they? Something wasn't right tho. I couldn't manage to get a better contrast version of Success Button, the text wasn't clear enough to read and I was struggling again with colors.

Suddenly I realized this:

I already knew about this, a color will have different contrast even with the same Lightness and Saturation values because colors aren't the same physically. (This is a technical subject that I'm not going to dive into)

.first-example {
  --textPrimary: hsl(260, 95%, 45%);
  --textInfo: hsl(213, 95%, 45%); 
  --textSuccess: hsl(165, 95%, 45%);
  --textError: hsl(0, 95%, 45%);
  --textAlert: hsl(50, 95%, 45%);   

  --backgroundPrimary: hsl(260, 95%, 70%);
  --backgroundInfo: hsl(213, 95%, 70%); 
  --backgroundSuccess: hsl(165, 95%, 70%);
  --backgroundError: hsl(0, 95%, 70%);
  --backgroundAlert: hsl(50, 95%, 70%); 
}

So, I started to think about it; If all colors had the same contrast on an image, it would become dull and lifeless, it would also make the image disappear if it was grayscaled, it needs this kind of difference to make it pop and have points of interest.

Although, when we are talking about user interface and colors, should it be all consistent even with contrast? I don't know, maybe it should be and maybe only one color should actually pop out, or maybe not. TOO MANY MAYBES.

Well, I found out about LCH(Luminance, Chroma, Hue) and how it helps achieve colors outside sRGB, but also how it was designed to be perceptually accurate which you can change the hue only and it maintains the same contrast.

Take a look:

And the grayscaled version:

As you can see, CSS doesn't support LCH yet(It is coming to CSS4), so I had to convert it to HSL, and the numbers gave me nightmares. Check it out:

.final-example {
  --textPrimary: hsl(249.75, 67%, 70%);
  --textInfo: hsl(197.44, 95%, 47%); 
  --textSuccess: hsl(164.99, 60%, 43%);
  --textError: hsl(2.72,  85%, 68%);
  --textAlert: hsl(24.96, 90%, 53.50%);   

  --backgroundPrimary: hsla(249.75, 67%, 70%, 0.15);
  --backgroundInfo: hsla(197.44, 95%, 47%, 0.15); 
  --backgroundSuccess: hsla(164.99, 66%, 40%, 0.15);
  --backgroundError: hsla(2.72,  85%, 68%, 0.15);
  --backgroundAlert: hsla(24.96, 90%, 53.50%, 0.15); 
}

Am I Crazy? Let's discuss this!🤓🪐☔

I still don't have a clue about how to make colors look consistent and work together, maybe I'm overthinking it and no one will actually inspect the RGB values to see if they are consistent as long as I make the colors pleasing to the eyes I will get away with it.

What do you think? How do you build your color palettes? Do you think I should stick with the first version and just tweak the contrast a bit to make it readable or my final version is the most accurate? Leave a comment PLEASE! Cya 💜

DEV Community: Leandro Reschke

Help me understand color palettes🌈

Introduction 🐱‍👤🦊

Why is so hard to make a consistent color palette? 😪🌧

Today 😏🍃

Am I Crazy? Let's discuss this!🤓🪐☔