Help me understand color palettes🌈
Tags: css, color, help, design
Published: 2021-05-08 01:31:33

# 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.

![3D Modeling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9bx95ziajfogpj4tgiw.png)

  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:
![First Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9an3w2zxfiblotg1wra.png)

  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:
![First Palette Grayscale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj9bvy2j9wthdon4kqz7.png)

  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)

```CSS
.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:
![Final Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw4qp3f4westulr634p3.png)

  And the grayscaled version:
![Final Palette Grayscale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w5t29i05go4wz01xu6s.png)

  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:

```CSS
.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 💜**