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 💜
Top comments (2)
I don't think you're overthinking this - but I don't think people will be look at the RGB to determine if things are consistent. People using the site will more than likely only subconsciously notice the difference if your colors aren't consistent (in terms of using slightly different reds or something).
The Tailwind team has posted a few threads about picking colors before and it's very intense work to find the colors that look nice together and feel consistent :)
The science behind colors is super interesting since I'm not very good at picking themes 😅 Loved seeing you break down what color issues you've had and how you're working to overcome them!
That's so nice of you 🥰. Of course I had many more battles with colors harmony before, but I wanted an easy to read article, like you said, to show the whys and wherefores of this SUPER INSTERESTING topic.
About the Tailwind's thread, I'm sad that I missed it, his approach feels like a balance between what I had before and after. And yes, it's very hard to find a perfect yellow that sits great with other colors, that's why I'm not completely done with my colors, evenly contrast is great but makes green and yellow so dull that I had to push it toward teal and orange respectively. 🧃🦊