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.
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.
@@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.
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.
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.
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?
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
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.
@@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.
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".
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
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.
@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 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.
@@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
@@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
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)".
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.
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.
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.
@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.
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.
Is it possible to promote HSL use without bashing RGB or Hex use? I mean, some of us actually understand Hex. Some of us understand RGB codes. It's ok to use them without being told by the whole dev community that it's a mistake.
@@dragonarch0 Couldn't agree more. And I love that people like Kyle introduce and explain these alternatives, new and old, so that you can find out if it suits you.
You can write 10 lines of code to print 10 valued array or use a loop. I was thinking like you before watching this video. Program still works but you wasted more time than others.
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.
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.
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.
@@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)
@@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
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
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.
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.
If you are choosing colors right there in CSS file, you are doing something very wrong. Usually you should be choosing colors beforehand, in a image or sketch editor like Photoshop or Figma where you have the designs.
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
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.
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
HSL is a higher level than RGB, this means that HSL can be converted to any colorspace with any chromatic resolution (hello theoretical HDR), but if you put a little effort into learning the Hex RGB, you will literally see what the regular display will show; those are literally the binary values that hit the user’s graphics processor when it renders the page, and they are literally the bits that are sent (if colorspace is the standard RGB) to the display. Neither is better, they are 2 things for different things: one is for describing color abstractly, one for describing color concretely.
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.
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.
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
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.
If you're using SCSS or SASS you can write a simple function to help with shades or tints or any other colour modifications you might like to make. If you define all your brand colours in the design from your graphic designer and hover / focus states then you can ensure consistency and you won't need to guess colours as you code. Plus SCSS has many other benefits. HSL could be useful in your JavaScript if you're doing algorithmic things like game graphics/shaders.
lol @ SASS kill the man who invented SASS. I give you my authority and 'go ahead' to do it. Before SASS, it was simply called 'how to fcuking write good css' heh
Thing is, I've worked so much with hex values that I kinda know exactly what color I get when I enter a value and how the red, green and blue mix to get other colors. But I gotta say that the HSL system looks quite good.
In nature, colors change not only brightness, but also saturation. Tint and shade. If you want to make color in shadow, then you need to reduce brightness and increase a little saturation. Try to inspect photo with colored wall with shadow on it. And increase brightness and reduce a little saturate - if you want brighter color.
well It's not that hard. If you know basic colour theory, and do a bit of practise, it becomes easier. In three tries, I could pick any colour (maybe light value is hard).
One thing to note though is that HSL is only 22-bit, while RGB is 24-bit. So you do lose a little bit of precision. This only becomes really important though when you have to follow a CI to the T.
In a real life project you would use a pre-processor to take care of lighten/darken and put colors in a variable. Sure hsl can be intuitive the way you described it. But doesn't mean using other interpretation of colors is a mistake. Sometime all colors come form a UI designer are already defined and you as a developer doesn't need to make any color decisions.
I think colors are the least thiing people should worry about. It's better to know how to create responsivness, grid, flex. How to avoid buggs etc. Color means nothing. Atleast that's my opinion. If you are a designer and you need to know which color goes together with another color, then yea sure, but other than that usually colors are given. You just need copy and paste.
I am just after a CSS for Beginners course. The possiblity of using HSL is new to me - and good news. It seems to be simpler than the other two methods.
You explain very well and you have a pleasant and clear voice. Although my English is weak, I fully understand your explanations. Your teachings help me a lot. I hope your life is always full of happiness and success.
Try coding with HWB or write a quick conversion for HCWB and you'll find it to be one of the most intuitive color spaces to visualize in your head and work with.
The thing is that it doesn't really matter if you already have the colour palette for your company's look and feel in descriptive variables already. You wouldn't use #333. You would use $dark-grey. But I agree that HSL seems easier to work with if you are both the designer and the developer. In my experience, I couldn't use it because the palette was already defined in Hex and it would be time wasted converting. Also, the prototyping tool my designer uses provides colours in Hex too. Also also, the IDE shows you what colour that is. It was showing to you during your explanation. You don't need to save to understand it.
HSL and HSLA are great. but people always stick to rgb. everywhere we could see them. But using HSL makes more sense of using a color which we dont now the value of by simple tweaking one simple Hue value, rest are simply adding lightness or saturation
While I think that hex code is kinda easy to understand (same as rgb as its the same just in normal numbers). What I like about hsl is the part with brightness, that seems to be alot easier to change. But normally I use extern tools for such stuff anyways
One issue of HSL is when you're dealing with a library that doesn't interpret HSL values (Hello Plotly.js), but RGB is universal. Coming from a designer and digital painter background, adapting to RGB was no issue at all, and feels more like true "color mixing" than using HSL.
I agree, that HSL is an easy concept to grasp. However, very often as a developer you (as in: people) will get into existing projects, and you will not have the luxury of deciding to change all the existing color definitions. Plus, I would expect a developer to understand what they're doing since I expect them to do the research. If they have trouble understanding RGB, which can be very easily explained, too, then they might not be the developer that I'd like to hire. It indicates a general lack of basic knowledge. You learn to understand HSL by using a UI and playing around with it. Though you might understand the logic on an intellectual level without, you will really get a feel for it when you use it. And the same goes for RGB, CMYK and other color systems. All of them share how color is mixed in different mediums. Understanding how that works, will make the different representations simple. I therefore suggest the mistake would be, to not get behind the concept of all relevant color systems. It would be a mistake to say "I use only HSL".
I learned how to interpret hex in college due to programming. It's base16 math, and we also learned the basics of base2 math (binary). FF in hex is equal to 255 in decimal, and the 6 digits in a hex color code are set up the same as rgb colors, so your first two are red, second are green, and last are blue. FF0000 is just pure red with max saturation and 50% lightness. To keep the same hue and increase the lightness you just increase all of the 0's to the same values. If you want darker you reduce the F's.
Yeah yeah, but hsl is easier to read even if I know all the number systems. The only time I’ll find my self using hex or binary is when developing logic gates
@@noelgarces9189 I disagree... As someone who learned #RRGGBB too but nether bothered to understand HSL. I found it unreadable because... I never learnt it (and because hue is a weird word for non native english speakers like me ^^ and because you still have to guess about the hue value) I always found the logic behind RGB way easier. Now, I'll gladly admit that it could be easier for someone who never learnt any of these AND with good explanations like these (but biased here btw: this "You don't know what this is..." felt like an "OK boomer" xD and is false given a lot of senior devs know it just too well)
@@VelGoesBrrr The only reason you find RGB more intuitive is because you didn't bother spending one minute of your time trying to understand HSL. Every programmer worth their salt needs to learn hexadecimal but even if you are a human hexadecimal calculator HSL would still be more intuitive and convenient to use. I can't believe this is even an argument. HSL is made to more closely align with the way human vision perceives color-making attributes by its nature. Not only is it easier to perceive, but it's also much more convenient to use as well. Examples: 1. Want to generate a complementary color? Add or subtract 180 from the hue. 2. Want a neutral color scheme? Add/Subtract 10~90 from the hue. 3. Want a triadic color scheme? Add/Subtract 120 from the hue. 4. Want to make a monochromatic color scheme? Make varying degrees of saturation while keeping the same hue and lightness. 5. Want to make a dark theme? Invert the lightness. How do you pull things like this intuitively with RGB? You do not. There's not a single advantage that RGB holds over HSL other than "I'm too used to it." You are web developers. Adapt. Go out of your comfort zones. You will be thankful later.
@@Omar_Al_Seddik lol sorry for hurting your feelings princess. Now maybe if you actually read what I wrote you would have saved half the salt you spilt there. Now another thing: you shoving sentences down the throat of other people over internet doesn't make it true. You didn't give ONE argument that is not just an opinion. Just because you feel more comfortable with decimal system doesn't mean it's more "natural", US have other systems for example, a lot of ancient civilization did also, nowadays you still count eggs by dozens too...
@@VelGoesBrrr I didn’t provide an argument…? I provided 5 examples… You want more? Or do you want me to show you how RGB does each task in comparison? (I was assuming you know how tedious RGB is at doing these color conversions so I didn’t include it) I forgot to talk about animations and gradients in my last comment. Add that to the pile. Nobody talked about the decimal system here. It’s not any more readable than hexadecimal for a person that knows how to read both. And since we’re web developers we should assume everyone working with code does. HSL using decimals isn’t what makes it more intuitive than RGB. You missed the point by a fucking mile lol.
Honestly the closer the value is to 00 the darker it is. RGB so R:00 G:00 B:00 would be black. Like pure black. Dark red would be #770000. A lighter red that's closer to white would be #77ffff. 50% would be f0. Pretty simple.
Okay, as someone who loves hex colours, I wasn't convinced until you showed the trick with the variables, that's really nice.
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.
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.
@@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.
As civilized people do.
@@Omar_Al_Seddik Ehh. dont agree
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.
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.
Hmm, so what is 20% lighter color of #880000? And how did you get it? I am really interested.
This
@@martintopolanek448 #660000
@@jeremyivy2753 Thanks for reply. Can you explain how did you get that number, please?
@@martintopolanek448 if 00 is black, and 88 is 20% lighter, then logic says...66 is 20% lighter than that
I wouldn’t call understanding hexadecimals a mistake...
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?
i write in hex any color i want, Kyle talking horsefeather
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
It reminds me of this: ruclips.net/video/W4Rebo3aEkY/видео.html
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.
I like how you start your videos with only a few quick words, and then jump straight in to the real juicy stuff.
One of the reason why I watch his videos. None of that fake hype up wasting our time. Clear and consice.
I try my best not to waste anyone's time
I hate how he start his video with a clickbait title. This shit has to stop
@@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.
Thumbnail, with your hair coloured, would have killed it.
where? i dont see it
@@eugenenovikov671
It's a hypothetical. It "would have".
@@RandomPerson-nd2ey aa, thnx, indeed
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".
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
Actually RGB colors don't mix like paint (subtractive) but like light (additive)
But I agree
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.
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.
@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.
hex is readable like regex
hsl is readable like paints
try to find simmilar hex in text, instead of similar hsla...
@@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.
@@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
@@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
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)".
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 ...💎💎💎💎💎
I'm a hex code guy but I am ready to become a hsl dude 😎
it depends of need- i guess You use a lot of teansitions
My two favorite colors are specifically #9370DB and #AAFFAA
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.
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.
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.
You can also adjust Firefox's Dev tools settings to always display color as hsl, no matter how it's written in the CSS
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.
So true for the button presses. So intuitive! Thanks for the video Kyle 👌
Designer's master secret to match color variations:
darker = less brightness; more saturation.
brighter = more brightness; less saturation.
@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.
@Swagitsu Jutsu I use a site like this: color.adobe.com/create/color-wheel
@@christopherlawes9286 f-adobe, github.com/sharkdp/pastel , pastel random = FTW
@Swagitsu Jutsu just think about some real world item you like and pick colors from it
Thanks ma man. Always looking for this tip.
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.
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.
Is it possible to promote HSL use without bashing RGB or Hex use? I mean, some of us actually understand Hex. Some of us understand RGB codes. It's ok to use them without being told by the whole dev community that it's a mistake.
Dave please get up on the right side of bed tomorrow. I wish I hade known of HSL much sooner.
@@tomasandersen8718 Nothing against HSL. I just don't like that everyone keeps saying 'If you're not doing this, you're doing it wrong?'
@@DaveCollison It should be more like stick to whatever suits you best. Then again, that's how dev communities are.
@@dragonarch0 Couldn't agree more. And I love that people like Kyle introduce and explain these alternatives, new and old, so that you can find out if it suits you.
You can write 10 lines of code to print 10 valued array or use a loop. I was thinking like you before watching this video. Program still works but you wasted more time than others.
I really fell in love with your idea after minute 5 tbh. Great video!
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.
I like how he tells u what he knows and also how he gives examples
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.
whoa thanks for the quick tip, definitely gonna practice this!
Yeah while taking stimulants and pills
@@m3mory_leak344 WTF is your problem?
@@Omar_Al_Seddik s,.tfu
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.
Scriptkiddies are not devs
trying to read colors at all is the real mistake
HSL is a waste of time if your are not making transformations or gradients. Still, it's a nice thing to know
I disagree with u, it's very helpful and it will help me a lot when I code a project.
Give me one advantage RGB has over HSL. Just one.
@@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)
@@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
@@JR-mk6ow Uh… You can do the same with HSL though. Just add the alpha at the end…
I'm convinced. I'm changing all my hex based colors over to hsl. Thanks for sharing this.
thanks kyle, your content is so usefull... like you say, make de webdev simplified
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
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.
Wow. This is one of those things you never knew you needed. Thank you so much!
Thank you for your amazing content. Keep them coming.
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.
If you are choosing colors right there in CSS file, you are doing something very wrong. Usually you should be choosing colors beforehand, in a image or sketch editor like Photoshop or Figma where you have the designs.
It is no mistake to use HEX and RGB. I appreciate you covering the topic, but don't call it a mistake.
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
Great video. I struggle with colors, and this helps tremendously. Thank you!
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.
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
HSL is a higher level than RGB, this means that HSL can be converted to any colorspace with any chromatic resolution (hello theoretical HDR), but if you put a little effort into learning the Hex RGB, you will literally see what the regular display will show; those are literally the binary values that hit the user’s graphics processor when it renders the page, and they are literally the bits that are sent (if colorspace is the standard RGB) to the display.
Neither is better, they are 2 things for different things: one is for describing color abstractly, one for describing color concretely.
By not understanding RGB or hex you proved yourself to be just another youtuber. Not a coder
I am new to web development but this information just solved all of my CSS color related problems.😄
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.
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.
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 😎
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
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.
i've come across this video recently . thanks a lot mate great job !
Didn't know this. Thanks this is great. Will definitely give it a try. 👍
If you're using SCSS or SASS you can write a simple function to help with shades or tints or any other colour modifications you might like to make. If you define all your brand colours in the design from your graphic designer and hover / focus states then you can ensure consistency and you won't need to guess colours as you code. Plus SCSS has many other benefits.
HSL could be useful in your JavaScript if you're doing algorithmic things like game graphics/shaders.
lol @ SASS
kill the man who invented SASS.
I give you my authority and 'go ahead' to do it.
Before SASS, it was simply called 'how to fcuking write good css' heh
Thing is, I've worked so much with hex values that I kinda know exactly what color I get when I enter a value and how the red, green and blue mix to get other colors. But I gotta say that the HSL system looks quite good.
In nature, colors change not only brightness, but also saturation. Tint and shade.
If you want to make color in shadow, then you need to reduce brightness and increase a little saturation. Try to inspect photo with colored wall with shadow on it. And increase brightness and reduce a little saturate - if you want brighter color.
Nice blinking down arrows at EOV! Cool effect
this is a great piece of information. this is going to save me loads of time when trying to come up with color combinations. 👍
This is so cool! Time to update my project! Thank you 🙏
I can actually interpret hex...and I'm too comfortable with it.
same here, i even use it along with alpha, #0000 = transparent, #0005 = semi-transparent
well
It's not that hard.
If you know basic colour theory, and do a bit of practise, it becomes easier. In three tries, I could pick any colour (maybe light value is hard).
@@victory_lucky Only that 50% alpha is actually #0008
what about rgba? where you can change the alpha value to modify the transparency while you still know what color it is
One thing to note though is that HSL is only 22-bit, while RGB is 24-bit. So you do lose a little bit of precision. This only becomes really important though when you have to follow a CI to the T.
You even made it easier for me, Thanks👍
In a real life project you would use a pre-processor to take care of lighten/darken and put colors in a variable. Sure hsl can be intuitive the way you described it. But doesn't mean using other interpretation of colors is a mistake. Sometime all colors come form a UI designer are already defined and you as a developer doesn't need to make any color decisions.
I think colors are the least thiing people should worry about. It's better to know how to create responsivness, grid, flex. How to avoid buggs etc. Color means nothing. Atleast that's my opinion. If you are a designer and you need to know which color goes together with another color, then yea sure, but other than that usually colors are given. You just need copy and paste.
Thanks; this was for me
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!
Excellent advice, thanks a lot! Neve have thought of color notation in terms of coding productivity.
Before I saw HSL function I used to add or subtract equal values from hex RGB representation.
I am just after a CSS for Beginners course. The possiblity of using HSL is new to me - and good news. It seems to be simpler than the other two methods.
I love how your living space seems to be devoid of objects entirely except for your guitar. I support your lifestyle.
Thanks a lot body amazing idea. 💡
You explain very well and you have a pleasant and clear voice. Although my English is weak, I fully understand your explanations. Your teachings help me a lot. I hope your life is always full of happiness and success.
Try coding with HWB or write a quick conversion for HCWB and you'll find it to be one of the most intuitive color spaces to visualize in your head and work with.
The thing is that it doesn't really matter if you already have the colour palette for your company's look and feel in descriptive variables already. You wouldn't use #333. You would use $dark-grey.
But I agree that HSL seems easier to work with if you are both the designer and the developer. In my experience, I couldn't use it because the palette was already defined in Hex and it would be time wasted converting. Also, the prototyping tool my designer uses provides colours in Hex too.
Also also, the IDE shows you what colour that is. It was showing to you during your explanation. You don't need to save to understand it.
That was an awesome explanation Kyle, big thanks!!
Thanks this is something i can use when not using VS Code 👍🏻
Makes much more sense to me now ;) . Thanks!
I loved this! I never paid much attention to hsl values before
HSL and HSLA are great. but people always stick to rgb. everywhere we could see them. But using HSL makes more sense of using a color which we dont now the value of by simple tweaking one simple Hue value, rest are simply adding lightness or saturation
While I think that hex code is kinda easy to understand (same as rgb as its the same just in normal numbers). What I like about hsl is the part with brightness, that seems to be alot easier to change. But normally I use extern tools for such stuff anyways
One issue of HSL is when you're dealing with a library that doesn't interpret HSL values (Hello Plotly.js), but RGB is universal. Coming from a designer and digital painter background, adapting to RGB was no issue at all, and feels more like true "color mixing" than using HSL.
Exactly what I needed. Can't thank you enough, Kyle. Thank you so much
Wow didn’t know that at all! Thanks man!
this was very helpful, thank you
Wow. I will start uaing hsl from now on for the rest of my life. Thank you so much.
What a great video! Thank you!!
How to handle the alpha channel with HSL?
Revolutionary!!! While I'm sure for many your vid is a DOH!! moment, I'm incorporating it into my css template!!! Thanks so much!!
Easy to learn, great for themes! Thx!
I agree, that HSL is an easy concept to grasp.
However, very often as a developer you (as in: people) will get into existing projects, and you will not have the luxury of deciding to change all the existing color definitions.
Plus, I would expect a developer to understand what they're doing since I expect them to do the research.
If they have trouble understanding RGB, which can be very easily explained, too, then they might not be the developer that I'd like to hire. It indicates a general lack of basic knowledge.
You learn to understand HSL by using a UI and playing around with it. Though you might understand the logic on an intellectual level without, you will really get a feel for it when you use it.
And the same goes for RGB, CMYK and other color systems.
All of them share how color is mixed in different mediums. Understanding how that works, will make the different representations simple.
I therefore suggest the mistake would be, to not get behind the concept of all relevant color systems.
It would be a mistake to say "I use only HSL".
What about ARGB colors? argb(..,..,..,..) works nicely for one and many people are familiar with hex values and default colors.
my goodness. never knew hsl was this easy. thanks!
This was just epic !! Loved it
I learned how to interpret hex in college due to programming. It's base16 math, and we also learned the basics of base2 math (binary). FF in hex is equal to 255 in decimal, and the 6 digits in a hex color code are set up the same as rgb colors, so your first two are red, second are green, and last are blue. FF0000 is just pure red with max saturation and 50% lightness. To keep the same hue and increase the lightness you just increase all of the 0's to the same values. If you want darker you reduce the F's.
Yeah yeah, but hsl is easier to read even if I know all the number systems. The only time I’ll find my self using hex or binary is when developing logic gates
@@noelgarces9189 I disagree... As someone who learned #RRGGBB too but nether bothered to understand HSL. I found it unreadable because... I never learnt it (and because hue is a weird word for non native english speakers like me ^^ and because you still have to guess about the hue value) I always found the logic behind RGB way easier.
Now, I'll gladly admit that it could be easier for someone who never learnt any of these AND with good explanations like these (but biased here btw: this "You don't know what this is..." felt like an "OK boomer" xD and is false given a lot of senior devs know it just too well)
@@VelGoesBrrr The only reason you find RGB more intuitive is because you didn't bother spending one minute of your time trying to understand HSL. Every programmer worth their salt needs to learn hexadecimal but even if you are a human hexadecimal calculator HSL would still be more intuitive and convenient to use. I can't believe this is even an argument. HSL is made to more closely align with the way human vision perceives color-making attributes by its nature.
Not only is it easier to perceive, but it's also much more convenient to use as well. Examples:
1. Want to generate a complementary color? Add or subtract 180 from the hue.
2. Want a neutral color scheme? Add/Subtract 10~90 from the hue.
3. Want a triadic color scheme? Add/Subtract 120 from the hue.
4. Want to make a monochromatic color scheme? Make varying degrees of saturation while keeping the same hue and lightness.
5. Want to make a dark theme? Invert the lightness.
How do you pull things like this intuitively with RGB? You do not. There's not a single advantage that RGB holds over HSL other than "I'm too used to it." You are web developers. Adapt. Go out of your comfort zones. You will be thankful later.
@@Omar_Al_Seddik lol sorry for hurting your feelings princess. Now maybe if you actually read what I wrote you would have saved half the salt you spilt there.
Now another thing: you shoving sentences down the throat of other people over internet doesn't make it true. You didn't give ONE argument that is not just an opinion. Just because you feel more comfortable with decimal system doesn't mean it's more "natural", US have other systems for example, a lot of ancient civilization did also, nowadays you still count eggs by dozens too...
@@VelGoesBrrr I didn’t provide an argument…? I provided 5 examples… You want more? Or do you want me to show you how RGB does each task in comparison? (I was assuming you know how tedious RGB is at doing these color conversions so I didn’t include it)
I forgot to talk about animations and gradients in my last comment. Add that to the pile.
Nobody talked about the decimal system here. It’s not any more readable than hexadecimal for a person that knows how to read both. And since we’re web developers we should assume everyone working with code does. HSL using decimals isn’t what makes it more intuitive than RGB. You missed the point by a fucking mile lol.
I'll definitely find some time to play around with this.
Good video - I didn't know about hsl. Thanks
Do you have an area for suggested video tutorial needs?
As someone that has always loved and used RGB I have to admit this is brilliant!
Great content you explained in perfectly!!
I'm interested in how you styled the hue color wheel, conic gradients maybe?
Please make video on TypeORM with node.js..!😌
Honestly the closer the value is to 00 the darker it is. RGB so R:00 G:00 B:00 would be black. Like pure black. Dark red would be #770000. A lighter red that's closer to white would be #77ffff. 50% would be f0. Pretty simple.