Are you using the WRONG color model in your CSS?

love you mr. Powell from Bangladesh

wow every day i learn something new Kevin thanks for sharing

Hi, Kevin how can choose the numbers in variable name 300,400 and 500 we can take any number or specific rule to select number with variables name.

Lol, I like the part you said when you say "if you write color picker in google you get a color picker". 😹

i feel like the saturation percentage is just how less grey smoke you want on your color

The hex model is not bad at all, it is just not designed for human identification

Not sure if this questions will be answered but, is there an advantage for using HSL vs. HSB? I'm a product designer and I design in HSB. I'm wondering if I should switch to HSL all together if there are clear advantages. Thanks in advance!

I think the usefulness in hex codes would depend on one's background. I grew up doing low-level graphics work in C, so hex is quite intuitive to me. HSV I find baffling.

That "for now" made me laugh so hard, I'm happy I'm watching this at home 🤣🤣

Wow! changing the site I'm working on to HSL. Good stuff.

The first one's probably a pretty light green blue-ish color (I know how to read hex colors since I'm 10 because of a video game's chat hidden feature)

I don't really know for hex color codes with alpha valued, but assuming the alpha value is at the end (5E), it should be somewhere around 30%, since 16/5 ≈ 30%

Hi Kevin! I was wondering... Is it possible to colour a number based on its sign? Like: 1,2,3 are coloured black, but -3, -2, -1 are coloured red. I would love to see a pure CSS solution, no extra code on the server side, like adding an extra class to the number, if it is negative. Something like with even and odd, just with positive and negative.

I learned the vscode trick by mistake actually lol, game changer for sure. I used it most heavily for rgba to add alpha to colors designers give in hex. I'd still need to add the 'a' and a new parameter for the alpha but a game changer for sure to automajically convert between them all.

I tried using hsla colors in my project. But when I check the computed values in the browser, I notice that the rgb and hex values differ from what I see in Figma when I convert the colors. Even the hsla value differs from what I put in my css code. Can you explain what's going on and how I make sure the correct values are being used?

Glad you reminded me of how convenient HSL is. Not only it's enabling faster color inference without assistance from IDE, it's also more meaningful for anything that's going to extrapolate the color palette: fading long shadows, JavaScript customization, etc.

I prefer RGB because I’m a huge nerd and I have enough experience imagining R, G, and B values in my head as ratios. But when I’m designing a mockup on Inkscape, I use HSL when it’s more convenient, so that I can desaturate any color.

Great video!
Thank you Sir!👍👍👍

Your tweaking of the RGB values reminds me of Troy McClure squeezing an orange with his face...

Okay, so use it or no ?

Hey Kevin, since safari supports P3 for so many years and there are many iPhone users, can you make a video about color() function best practices?

Thank you so much for your videos. I listened for all play list videos. Your videos organized my info. about CSS. Now CSS is very obvious for me.
Thank you again, hoping the best for you.
Best Regards

Danke!

I don’t think lch renders properly in safari at this moment. 0% lightness should give a black color but it’s not the case. Maybe this is how it’s supposed to be?

Kevin knows how to touch your heart :D. Joking aside, your contents have been helping me a lot along the way, many thanks!

How can we use HSL in sass variable? I mean,

Let, a color is,
$bg-clr:128,35%,56%;
*
*
*
selector{
Background : hsl+($bg-clr);
*
*
*
Isn’t the correct way. Please show me the correct way. I'm learning Sass for a couple of days.

i guess I'm a wizard huh

I didn't see the saturation and lightness as a percentage value so I didn't put a % sign for saturation and lightness and it wasn't working. I almost thought it's Firefox that doesn't support it.

i think we can all agree, we are using the code editor or devtools to pick color

awesome video!!

HSL and the VS Code colour picker are both great. But I code (for my job) in the real world: that is to say that I get a colour pallette given to me by a designer. In that case hex is just fine. And because we use SASS, we just variablise (if such a word exists) each hex colour with a meaningful variable name. On a side note: I noticed that your website uses CSS variables - so can I assume that you don't use SASS?

I am very experienced with CSS and most of the videos you post are like "knew it already, next..." but this time: Nice one. Will switch to HSL. Very good video. Very well explained. Like it!

The word you were groping for is "Luminance"

HSL is definitely the way to go. But once more I would not have discovered it in CSS without your videos. We just always converted from HSL to RGB. That is just so wonderful with your channel 😀

There was an interesting article (need to find it again) explaining how colors in shadow have a strong saturation and low lightness, whereas colors in bright light have a low saturation and strong lightness. I found that using this principle makes for a very natural color scheme.

But, hehe, for the years now, my team uses a self made luminosity calculator to align the colors in our palettes. So we play with HSL but compare the colors through that tool or let it adjust them.
Will be cool once this is standard in browsers.

180 difference on the hue gives you the complimentary hue.

As a designer trying to learn to code. Yes, some good practices for good color usage in different devices suggest hsl and a a designer I suggest this for you too. It's easier to understand. There's a conference by the Lyft team that talks about colors consistency through devices

I mostly still use hex because it's nice and short. I don't really need to remember them because I use a vscode color palette extension in which I can save my color palette so I don't necessarily need to remember the exact values.

Am I the only one who prefers Hex because it's actually telling you what the hardware is doing? I know RGB does this too, I just don't find it as intuitive, why force a decimal system onto values that are clearly hexadecimal? (I may be biased here, through my conlang geekery I was use to using non-decimal numerical systems long before I did coding of any type.) The HSL system is to far removed from what you are actually telling your computer screen to do. The Hue value in it to be a rather odd and arbitrary. Why split it in the middle of red? Why not go with violet at 360 so were are at least going from the longest to the shortest wavelengths of visible light?

Thank you so much for to explain this

HSL seems like a little bit easier to guess the colors than RGB. Pretty nice. Thanks

I don't agree with using hsl on daily basis. In isolated coding environment it may work. But in the most cases, you work with 3rd parties - applications and people. Copy an RGB colour from/to Photoshop or copy an HSL colour - it's much easier to work with RBG colours in Photoshop. Send an HSL to a marketing agency that don't understand how HSL works and how to use it in Canva to create simple assets. With SASS/SCSS I don't even need to modify colours myself, I have saturate(), lighten(), darken() and they do everything for me. Or I can simply copy an RGB colour from other application, and I would say they all support RGB, unlike HSL (just a part). Plus I don't need to know what colour it is, because IDE tells me that.

Thanks KP for this!

Maybe a button or just an icon of an left-right arrows (<>) to suggest that you can switch between color formats would be nice

I loved your t-shirt <3! Great video, btw!

Hi Kevin, there is one thing that I was hoping you were going to touch on which I came across about 2 weeks ago. I see HSL as a circle of colors which (for me being bad with design and colors, I could not be an interior designer) could be used to your advantage when finding colors that go together. For example, complementary colors are opposite each other so, 180 degrees away from each other. The other is the triad color pairing, which would be about 120 degrees on each side of the color you are on ...then the square scheme is 90 degrees from each other. Just thought I would mention this because I really thought you were going to bring this up. For a non-color coordinated person like me, I find this very useful.