Are You Making This Mistake With CSS Colors?

Every developer needs to define colors in CSS at some point and generally when a developer defines colors in CSS they use RGB or HEX to write out those colors. Technically there is nothing wrong with doing this, but it is far from the best way to write colors in CSS. This is where HSL shines. It is incredibly intuitive, easy to read, and best of all is perfect for working with CSS variables. Once I started using HSL I couldn't go back to using RGB or HEX. In this video I will show you why.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:20 - Why not using HSL is bad
01:50 - What is HSL?
03:00 - Visual examples of Hue, Saturation, and Lightness
04:40 - Pros of HSL

#CSS #WDS #HSL

[MonsterlessonsAcademy]

What i see in all big projects is that we just create a bunch of css variables with used color schema. primary, secondary, highlighted, etc. In this case it doesn't matter in what format we store this colors.

[Musikur]

Okay, as someone who loves hex colours, I wasn't convinced until you showed the trick with the variables, that's really nice.

[robertholtz]

I actually DO know what a hex value is just by looking at it. First 2 characters are for Red, middle 2 are for Green, last 2 are for Blue. 256 values from go from 00 pure Black to FF pure White. It doesn’t take long at all to get a hang of it. It’s actually super easy.

[GUMMY_MKII]

I wouldn’t call understanding hexadecimals a mistake...

[multiHibu]

I've already gotten too used to rgb/hex. It's not too hard to interpret the colors if you understand additive color mixing and hexadecimal numbers.

[HasanAmmori]

HSL is indeed a very good way of representing a colour. However, I never had much problem with RGB either. It is fairly easy to imagine, how colours combine if you have ever played with paints as a kid. Hexadecimal makes it slightly less intuitive, since there is one more step of conversion, that's why I personally don't use it. But yeah, I can totally see how one may choose HSL as the superior format

[TimYear]

I like how you start your videos with only a few quick words, and then jump straight in to the real juicy stuff.

[paugomez]

I used to code in RGBA because I had a hard time understanding how HSL works because I didn't realize hue works as a 360 degree chart. This video explains it perfectly. Thanks.

[vintprox]

For a set out color palette that takes more into account than progression of all components (H, S, and L), HSL is more trouble than it's worth. Reproducing same color from other color space is PITA, because components don't align and we get fractional part for certain colors, which won't surpass screen's color capability anyway. Although, HSL makes sense for making up colors from scratch.

[YuriiKratser]

Wow, after this video start thinking from the new perspective. it's like a breath of fresh air. I need to think it over again and again.

[NNNedlog]

I'm a hex code guy but I am ready to become a hsl dude 😎

[iamreg]

Great job Kyle, best primer on HSL I've seen to date. Short and to the point with CSS variables thrown in for good measure.

[moukthiketikala]

Thumbnail, with your hair coloured, would have killed it.

[JackalBruit]

Nice blinking down arrows at EOV! Cool effect

[ordaniel]

I usually click the like button on every video of yours, but for this one, I don't feel like it's justified.
You gave a personal tip of yours, but to title the video as all other CSS color methods "are a mistake" is just too exaggerated in my opinion.
The con of using HSL, is that I'm not carrying the color wheel with me, and it's not that I can remember all colors' position on the wheel, unlike RGB, that really speaks for it self in terms of color selection.

Thanks for the video, it's a great tip and I'll use it, then again, I think the title should be renamed from "mistake" to a "preferable way "or a "tip".

[catwhisperer]

I'm convinced. I'm changing all my hex based colors over to hsl. Thanks for sharing this.

[spirit]

I really fell in love with your idea after minute 5 tbh. Great video!

[mayukhbari]

By not understanding RGB or hex you proved yourself to be just another youtuber. Not a coder

[tumbler]

The real magic starts with calc in CSS - so you can e.g. do something like: Make buttons slightly darker on hover/focus by "calc(var(--lightness) - 100)".

[winter-survivor]

Designer's master secret to match color variations:

darker = less brightness; more saturation.
brighter = more brightness; less saturation.