Are You Making This Mistake With CSS Colors?

Рет қаралды 161,854

Күн бұрын

FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
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:
FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS Variables Video: • CSS Variables Tutorial
CSS Variables Article: blog.webdevsimplified.com/202...
HSL Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

Пікірлер: 486

@MonsterlessonsAcademy 3 жыл бұрын

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.

@Omar_Al_Seddik 3 жыл бұрын

Oh but it does. You can create your color scheme variables much more intuitively through HSL than with RGB with minimal effort and time wasted thinking about colors that go well together. You WILL save time using HSL, regardless of how minimalistic your color schemes are. There’s just no point in using RGB. Ever. Compatibility-wise, Sass avoids compatibility issues with IE8 and below when compiling HSL color values.

@mkimask 3 жыл бұрын

@@Omar_Al_Seddik I think NOBODY creates color schemes by looking at rgb codes or hsl. Designer has his color palette and picks the colors from there, adjusts using his prototyping tool or graphic software and the developer later just uses the codes in whatever format he wants. I personally NEVER EVER in my life encountered a situation where I thought "I wish I knew what colors those characters represent" and as said above now all the colors are stored in variables, so when you use those colors you just write $primary-font or $secondary-font or $dark-bg or whatever.

@dariosantacruz 3 жыл бұрын

As civilized people do.

@code_lift 3 жыл бұрын

@@Omar_Al_Seddik Ehh. dont agree

@marshal3577 3 жыл бұрын

exactly. what modern web dev is actually sliding around color values while writing code? Even if the dev is a freelancer doing their own design, design should done on a prototyping tool with a color picker. Then you just copy and paste the color values from there.

@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 3 жыл бұрын

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.

@martintopolanek448 3 жыл бұрын

Hmm, so what is 20% lighter color of #880000? And how did you get it? I am really interested.

@jeremyivy2753 3 жыл бұрын

This

@jeremyivy2753 3 жыл бұрын

@@martintopolanek448 #660000

@martintopolanek448 3 жыл бұрын

@@jeremyivy2753 Thanks for reply. Can you explain how did you get that number, please?

@jeremyivy2753 3 жыл бұрын

@@martintopolanek448 if 00 is black, and 88 is 20% lighter, then logic says...66 is 20% lighter than that

@GUMMY_MKII 2 жыл бұрын

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

@Laohei0103 2 жыл бұрын

Same here, when reading the 2nd and 3rd element values dropped by about 40% numerically, I knew that the color has changed from some sort of cyan to a darker cyan. Why is it a mistake?

@eugenenovikov671 2 жыл бұрын

i write in hex any color i want, Kyle talking horsefeather

@The-Great-Brindian Жыл бұрын

convert hex to octal big boy, cmon do it 😀 I can do it mostly in my head these days lol nothing to be PROUD of, i feel ashamed of it. Absolutely ashamed of it. No hot female on earth would care about this and yet I sit here convincing myself I am a smart person cos I can do this lol

@Torbikini Жыл бұрын

It reminds me of this: kzfaq.info/get/bejne/jZqCmMWgmMepm40.html

@vapeurdepisse Жыл бұрын

Guys this is not some kind of lame algebra or 1337 coding competition that only awkward Indians participate in. Hexa is not natural since we're born and raised in the decimal system. Nothing wrong with that. Hexa was invented for machines to use less memory. Use your time learning something more useful.

@moukthiketikala973 3 жыл бұрын

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

@eugenenovikov671 3 жыл бұрын

where? i dont see it

@RandomPerson-nd2ey 2 жыл бұрын

@@eugenenovikov671 It's a hypothetical. It "would have".

@eugenenovikov671 2 жыл бұрын

@@RandomPerson-nd2ey aa, thnx, indeed

@user-st4qv2vw7q 3 жыл бұрын

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

@sovereigngreed 3 жыл бұрын

One of the reason why I watch his videos. None of that fake hype up wasting our time. Clear and consice.

@WebDevSimplified 3 жыл бұрын

I try my best not to waste anyone's time

@StefanReich 2 жыл бұрын

I hate how he start his video with a clickbait title. This shit has to stop

@sovereigngreed 2 жыл бұрын

@@StefanReich I would suggest if you hate it, stop watching his videos and downvote. If I come across any click bait videos/creators I do that and move on.

@HasanAmmori 3 жыл бұрын

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

@ChrisLuigiTails 2 жыл бұрын

Actually RGB colors don't mix like paint (subtractive) but like light (additive) But I agree

@iamreg1965 3 жыл бұрын

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.

@Fooljuice 3 жыл бұрын

So true for the button presses. So intuitive! Thanks for the video Kyle 👌

@YuriiKratser 3 жыл бұрын

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.

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

@NNNedlog 3 жыл бұрын

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

@bujakowski_dev6739 3 жыл бұрын

it depends of need- i guess You use a lot of teansitions

@THE_PLAYER_ZER0 2 жыл бұрын

My two favorite colors are specifically #9370DB and #AAFFAA

@ezp721 3 жыл бұрын

Designer's master secret to match color variations: darker = less brightness; more saturation. brighter = more brightness; less saturation.

@ezp721 3 жыл бұрын

@Swagitsu Jutsu Hi! I'm actually a back-end developer. I saw this quote a few years ago and saved as reference. By this simple rule you can create color variations that looks pretty. About color combinations I think the first step is understand the fundamentals of Color Theory so you know what colors you can "safely" combine.

@christopherlawes9286 3 жыл бұрын

@Swagitsu Jutsu I use a site like this: color.adobe.com/create/color-wheel

@charlesselrachski34 3 жыл бұрын

@@christopherlawes9286 f-adobe, github.com/sharkdp/pastel , pastel random = FTW

@goury 2 жыл бұрын

@Swagitsu Jutsu just think about some real world item you like and pick colors from it

@de_sodavibe9822 2 жыл бұрын

Thanks ma man. Always looking for this tip.

@avneet12284 3 жыл бұрын

Exactly what I needed. Can't thank you enough, Kyle. Thank you so much

@ariMuayad 3 жыл бұрын

Thank you for your amazing content. Keep them coming.

@tumbler9428 2 жыл бұрын

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)".

@samgod 2 жыл бұрын

Wow, thank you for that gem. To think that 20 years ago, I was using messy HEX to HSL conversion formulas in JS to generate entire color palettes. And now it's just cake.

Жыл бұрын

Yooo ...💎💎💎💎💎

@kevinat71 3 жыл бұрын

thanks kyle, your content is so usefull... like you say, make de webdev simplified

@multiHibu 3 жыл бұрын

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.

@multiHibu 3 жыл бұрын

@Stephen W I'm not saying people shouldn't learn how to interpret HSLa, or that I'm not open to use HSLa. The whole premise of the video is to show the benefits of the human-readable format of HSLa as opposed to RGBa. My point is that color scheme interpretation is very subjective, for you HSLa may be easier to understand, for others HEX/RGBa may be easier. This really isn't like a new technology being introduced, and by no means you'd be 'left behind' for not using this.

@bujakowski_dev6739 3 жыл бұрын

hex is readable like regex hsl is readable like paints try to find simmilar hex in text, instead of similar hsla...

@multiHibu 3 жыл бұрын

@@bujakowski_dev6739 Just as you perceive hex to be as complex as regex, there are people out there who really don't see any benefit of HSLa over RGBa. However, it is worth knowing and understanding both of them, to help you become a proficient developer.

@bujakowski_dev6739 3 жыл бұрын

@@multiHibu perhaps HEX is good to keep thinking logic, but You know - code is minor in project :) more brain time is foe planning so hex is unnescesy unless You don't meed transitions (for that i use #rrggbbtt scheme) some like more to search colorname by hex, then implement it in code

@multiHibu 3 жыл бұрын

@@bujakowski_dev6739 I agree with all that you've mentioned. However, in my case, (and in the case of others I'm sure), interpreting hex has become second nature and it requires little effort. In any case, you should use what your team uses in your project or whatever floats your boat if the project is individual. :p

@markducharme9282 Жыл бұрын

Wow. This is one of those things you never knew you needed. Thank you so much!

@onee 3 жыл бұрын

Didn't know this. Thanks this is great. Will definitely give it a try. 👍

@intergalaxen 3 жыл бұрын

That was an awesome explanation Kyle, big thanks!!

@mollyallen1957 2 жыл бұрын

Great video. I struggle with colors, and this helps tremendously. Thank you!

@mariopizzaro 2 жыл бұрын

i've come across this video recently . thanks a lot mate great job !

@paugomez477 Жыл бұрын

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.

@spirit1292 Жыл бұрын

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

@Born2DoubleUp 3 жыл бұрын

this is a great piece of information. this is going to save me loads of time when trying to come up with color combinations. 👍

@g_mb Жыл бұрын

This was just epic !! Loved it

@Metalvain4 Жыл бұрын

This is so cool! Time to update my project! Thank you 🙏

@mk9834 3 жыл бұрын

whoa thanks for the quick tip, definitely gonna practice this!

@m3mory_leak344 3 жыл бұрын

Yeah while taking stimulants and pills

@Omar_Al_Seddik 3 жыл бұрын

@@m3mory_leak344 WTF is your problem?

@m3mory_leak344 3 жыл бұрын

@@Omar_Al_Seddik s,.tfu

@LukasNachtigall 2 жыл бұрын

Makes much more sense to me now ;) . Thanks!

@peterwan小P 2 жыл бұрын

Wow didn’t know that at all! Thanks man!

@shivnirmal3670 3 жыл бұрын

this was very helpful, thank you

@martinheywang4962 2 жыл бұрын

You can also adjust Firefox's Dev tools settings to always display color as hsl, no matter how it's written in the CSS

@novo99 2 жыл бұрын

I loved this! I never paid much attention to hsl values before

@BrunoBarbosaweb 2 жыл бұрын

Excellent advice, thanks a lot! Neve have thought of color notation in terms of coding productivity.

@ordaniel7699 3 жыл бұрын

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

@gillall4828 2 жыл бұрын

Easy to learn, great for themes! Thx!

@JR-mk6ow 3 жыл бұрын

HSL is a waste of time if your are not making transformations or gradients. Still, it's a nice thing to know

@ahmadbadran6524 3 жыл бұрын

I disagree with u, it's very helpful and it will help me a lot when I code a project.

@Omar_Al_Seddik 3 жыл бұрын

Give me one advantage RGB has over HSL. Just one.

@jugibur2117 3 жыл бұрын

@@Omar_Al_Seddik I'll give you one for Hex as if the comment starter perhaps compared it to Hex: It's faster to only have to copy a single value from a design app (or wherever your mockup came from) But for adjusting while programing I prefer HSL too (over all kinds of color notation types)

@JR-mk6ow 3 жыл бұрын

@@Omar_Al_Seddik we can define transparency faster using Hex. Just add the alpha at the end. For example just add '1A' to the end of an hex value to create the same color with 10% opacity. Most people can already 'read' Hex so it's not that hard

@Omar_Al_Seddik 3 жыл бұрын

@@JR-mk6ow Uh… You can do the same with HSL though. Just add the alpha at the end…

@JesusFriend 3 жыл бұрын

Great content you explained in perfectly!!

@ericdimarzio5756 11 ай бұрын

What a great video! Thank you!!

@imqqmi 3 жыл бұрын

Hsl has its place but purely looking at the numbers rgb is much more intuitive than hsl angle number to represent the location on the color wheel. Hsl is great for picking different colors with the same saturation and luminousity, or the same color and different luminousity. Css4 supports cmyk as well, which is great for graphics designers that also design for print.

@cleverdood Жыл бұрын

Super useful, thanks!

@christopherlawes9286 3 жыл бұрын

Great video. I use rgb/rgba and pick colors from Google color picker. They also show HSL so it would be easy to switch and thanks to your clear explanation make a lot of sense. Especially if you make color schemes where you allow uses to change to their pref e.g. dark mode, dyslexic.

@takdanaicheepsaritdipong9381 3 жыл бұрын

Wow. I will start uaing hsl from now on for the rest of my life. Thank you so much.

@TheSoybean3r 3 жыл бұрын

I get you’re reaching for content, but this is a stretch even for you, my dude. I’m going to be checking your future css for hsl, mister! Can’t wait for the next video though

@realtalk3736 3 жыл бұрын

Wow, man!! That blows mind, thank you

@boomondobade706 3 ай бұрын

You even made it easier for me, Thanks👍

@FahimMahmudChisti 3 жыл бұрын

Awesome Man!!

@JackalBruit 3 жыл бұрын

Nice blinking down arrows at EOV! Cool effect

@stevenharder308 Жыл бұрын

I'll definitely find some time to play around with this.

@kluchtube7042 3 жыл бұрын

Thank you! really helpful video.

@k.chriscaldwell4141 3 жыл бұрын

Great info. I've always used RGB/Hex selected from a chart or list. However, tweaking a color a RGB/Hex color has always been a pain: No longer. Thanks.

@joeyalter6883 3 жыл бұрын

Thanks for the advice man

@catwhisperer911 8 ай бұрын

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

@BaradharajanAyanappan 3 жыл бұрын

Very nice tutorial, Thanks

@thelastninja4825 2 жыл бұрын

wow thanks for this tip, great video as usual

@thatsalot3577 2 жыл бұрын

One thing I've realised about using hsl is it's very declarative,for eg unlike rgb you don't need to mix the exact hex code of red with hex code of blue in the right proportions to get a purple color with good shade. You can just choose the base as an average of two and then whatever saturation and lighting you want in percentages.

@praveen_sinnur 3 жыл бұрын

You are a life saver bro 🙌🏻

@joelcool1027 3 жыл бұрын

This is very useful. Thanks

@eddier.6749 3 жыл бұрын

Very good and useful. Thank you.

@MiSt3300 2 жыл бұрын

That's very very helpful! It's so difficult for me to choose the correct color with HEX

@billlee8881 3 жыл бұрын

Thanks Kyle , always mine blowing

@AbdicateDotNet 3 жыл бұрын

Revolutionary!!! While I'm sure for many your vid is a DOH!! moment, I'm incorporating it into my css template!!! Thanks so much!!

@massus6830 3 жыл бұрын

thank you, i just found out about the use of hsl

@kylediamond8598 3 жыл бұрын

I like how he tells u what he knows and also how he gives examples

@marloeleven 2 жыл бұрын

my goodness. never knew hsl was this easy. thanks!

@anhtuanvu5603 Жыл бұрын

Honestly I don’t see this better than hex. When you start a project, you should define color variables that will be used and add more as you go. With this approach, when I read a variable such as $primary, $secondary, I know what they are. Or simply name them like $charcoal: #222222. So hex, hsl, or whatever you wanna use really doesn’t matter here. The only case when I think hsl is more useful is when you allow the users to change the colors.

@dojaajayi4569 Жыл бұрын

Thanks; this was for me

@tyafizi 2 жыл бұрын

Incredible, thank you

@user-ie7md3mm6x 3 жыл бұрын

thank you for content man!

@ovskihouse5278 2 жыл бұрын

Thanks a lot body amazing idea. 💡

@somehappyguy6598 3 жыл бұрын

Amazing explanation!

@MaxPicAxe 2 жыл бұрын

That's pretty cool. I remembered trying it before.

@kidudnet3692 Жыл бұрын

Thanks for helpful great video.

@asmodeus4310 3 жыл бұрын

This is the best advice ive got in 2021

@rishawraj 3 жыл бұрын

Thanks for this awesome content 👍.

@sebaaismail1951 3 жыл бұрын

very clever thank you.

@DiakoSharifi 3 жыл бұрын

Amazing, thank you

@official.mhm13 3 жыл бұрын

That was informative 😍

@deanhantzis9630 2 жыл бұрын

Brilliant. Thanks.

@samuellamimdecarvalho 3 жыл бұрын

Uh, what about follow a specific graphics scheme provided by the UI Designer? Better ahm? That way u can use whatever color profile you want.

@colinedwards3160 2 жыл бұрын

Love your channel :)

@Hari983 Жыл бұрын

That was such a game changer hack for its simplicity. :) Still can't wrap my head around the fact that it's not that known!

@JamesScholesUK Жыл бұрын

You can also perform calc() operations on CSS vars and therefore build an entire graduated theme from your initial values by e.g. defining "lighter" as calc(var(--lightness) * 1.2); We use this (plus some edge case detection) to allow users to retheme our product while maintaining consistency across elements

@baboulinet2254 3 жыл бұрын

It's like saying the polar coordinates are right and the cartesian coordinates are wrong. Don't call it a mistake, YOU have trouble visualizing RGB space and hexadecimal representation, but this is not the case of most dev. It's easier to understand that #00FF00 is pure green rather than 120 is the pure green angle of the chromatic circle with 100% saturation and 50% lightness. #da25d7 is high value of red and blue, low value of green, so it's purple. Easy. I don't have to remember that 301 is the H value of purple in hsl coordinates.

@goury 2 жыл бұрын

Scriptkiddies are not devs

@user-gk6ey6hq2b 2 жыл бұрын

trying to read colors at all is the real mistake

@Something9008 7 ай бұрын

Choosing the exact same color but a lighter / darker version can look drab (muted.) You often want to shift the hue a bit when getting related hover interaction colors to an element - until muted colors come back in style.

@anisdz6618 3 жыл бұрын

Brilliant like Always ^ - ^

@sonu5846 Жыл бұрын

I am new to web development but this information just solved all of my CSS color related problems.😄

@puspamadak 3 жыл бұрын

I always used to use RGB colours since it is very familiar to me. But now I will be using HSL for stuff related to visual perception 😎

@jeremydiaz6494 3 жыл бұрын

As a noob coder I can already see the benefit. In my personal project I have hex, rgba, or named values all over and going through converting to hsla has already been more intuitive and my color scheme is matching much better. Thanks Kyle.

@The-Great-Brindian Жыл бұрын

been coding/writing markup/programming/wasting endless hours debugging awful code by lazy developers since 2001.. and I STILL refer to myself as a 'noob coder' dont be hard on yourself. Nobody knows everything. I've yet to meet the man who does lol

@SperkSan 3 жыл бұрын

Thanks this is something i can use when not using VS Code 👍🏻

@mubafaw Жыл бұрын

Nicee! 😊Straight to the point no BS

@kristinonrina3802 2 жыл бұрын

I understand your point and maybe for a complete beginners it's interesting and for sure it's handy to know how it works, but ... - preprocessors - variables - background you're coming from I would say most of the developers nowadays are using some kind of preprocessor (LESS for me). It means that you have some variable eg. @brand-primary and you can use darken(), lighten(), fade() functions. No need to fiddle with the color itself. Actually you don't care about the color at all. It depends from which background you're coming from as well. I used to be a designer, so for me HEX color is perfectly readable.

@ozzyfromspace 2 жыл бұрын

I only clicked on this video because: 1) I was eating a bowl of cereal and wanted to watch something interesting to pass the time, and 2) I generally think that Kyle does such an amazing job with his videos. Yet, little did I know how informative this simple video would turn out to be. Mad props to you! I know a lot of people didn't like the whole "RGB and everything else is a joke" vibe from the title, but lets be honest, HSL is actually kinda clever when you think about it properly. Seeing the example with the hover state really sold me on it.

@frankthedsigner558 3 жыл бұрын

Ok, fair enough. I would say HSL would definitely be beneficial in your personal capacity, however becomes irrelevant to bigger teams working on brand defined styles, where a designer would supply the developer with set colour codes which would never change. But cool video, I’m definitely using HSL in my portfolio website so I have flexibility on making colour changes.

@oddity4650 3 жыл бұрын

Another fantastic video

@MasterOfMisc 2 жыл бұрын

Love it.. Awesome

@sarahakpeti6829 3 жыл бұрын

I'm interested in how you styled the hue color wheel, conic gradients maybe?

@jauffre-bl6lu 26 күн бұрын

you could also modify brightness, hue and saturation of a color by using relative color syntax instead of setting 3 css properties for each hsl value. something like hsl(from #0000FF h s calc(l + 20)), this increases the color's lightness by 20%. probably wasn't available when this video was made