Are you using the WRONG color model in your CSS?

  Рет қаралды 66,661

Kevin Powell

Kevin Powell

Күн бұрын

Want to step up your CSS Game? I've got courses! www.kevinpowell.co/courses
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell04211
Lea Verou's articles that I mentioned in this video:
Dark mode in 5 minutes, with inverted lightness variables: lea.verou.me/2021/03/inverted...
LCH colors in CSS: what, why, and how? lea.verou.me/2020/04/lch-colo...
My Twitch Channel: / kevinpowellcss
⌚ Chapters
00:00 - Introduction
01:03 - The problem with HEX
02:15 - HSL made easy
03:12 - Skillshare
04:09 - Breaking down HSL
06:37 - HSL vs LCH
08:47 - Outro
#css
This video was sponsored by Skillshare
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 154
@KevinPowell
@KevinPowell 3 жыл бұрын
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell04211
@helly8800
@helly8800 3 жыл бұрын
Thank you for the video. It was great. Unfortunately Skillshare have got some really bad reviews on Trustpilot. I won't use that free trail!
@TomHermans
@TomHermans 3 жыл бұрын
Does this only work when you never previously had an account ?
@iancp123
@iancp123 3 жыл бұрын
i dont know if is just me or not. but the voice is more advance than the actually video
@KevinPowell
@KevinPowell 3 жыл бұрын
@@TomHermans possibly, I'm not sure 🤔
@KevinPowell
@KevinPowell 3 жыл бұрын
@@helly8800 I've used them as a paying customer more than once, or else I wouldn't take them as a sponsor. Always enjoyed the content they have, but I'm sure it's not for everyone
@zachjensz
@zachjensz 3 жыл бұрын
When the article "dark mode in 5min" doesn't have dark mode
@Morrile1
@Morrile1 3 жыл бұрын
agree, but does talk about how it can be achieved.
@PandaTheGFX
@PandaTheGFX 3 жыл бұрын
@@Morrile1 And then proceeds to not achieve it
@vintprox
@vintprox 2 жыл бұрын
Bruh 😂
@cmdrTremyss
@cmdrTremyss Жыл бұрын
I guide others to treasure I cannot possess.
@dreejz
@dreejz 3 жыл бұрын
May the CSS be with you!
@Humpfinger
@Humpfinger 3 жыл бұрын
Just wanted to say that your videos have improved so damn much and are now honestly on pair with my other favorite, fireship. So clear, entertaining, insightfull and unique. I especially love this new style with all the “hidden” tricks & upcoming features. Keep up the awesome work man!
@nicopicco
@nicopicco 3 жыл бұрын
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.
@luchtaj
@luchtaj 3 жыл бұрын
Hey, this is awesome, as usual. Thanks for bringing the LCH up!
@cmyk8964
@cmyk8964 2 жыл бұрын
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.
@FlyAllTime2
@FlyAllTime2 3 жыл бұрын
Very helpful! Love your channel! From Romania:)
@HeedyMooding
@HeedyMooding 3 жыл бұрын
I'm learning css and your videos are really useful to me, my code is getting cleaner and I understand more and more how each element works, thanks a lot for work !
@Morrile1
@Morrile1 3 жыл бұрын
Very useful information that I could use yet didn't know about, well done Kevin.
@codex4046
@codex4046 3 жыл бұрын
I'm colorblind and I regularly use HEX colors to identify what kind of color something is. I prefer it over rgba. HSLA is something I just cant figure out how it works. I personally can identify colors by hex code quicker than by just looking at the color (looking at the color has about 40% chance I'm wrong, looking at hex that's only 5% or less). I guess I'm a wizard.
@junehanabi1756
@junehanabi1756 3 жыл бұрын
The reason why hsl is loved is mainly in the manipulation of colors. In programming, you always want to use the most human workable data format. For example 60 * 60 to mean 1 hour instead of typing in 3600. It's just easier to understand and easy to modify. Even if you're good at reading hex, if asked to lighten by 5%, darken by 10%, or shift the hue by 15 degrees I would be impressed if you could do that instantly without first decompressing hex, converting to a readable format, making the changes, then re-converting back to hex
@junehanabi1756
@junehanabi1756 3 жыл бұрын
Hsl basically means you, a css animation, or a script can easily and directly modify the hue, saturation, and lightness at anytime without fancy code. Creation of themes, color shifting, dynamic colors, or maintenance tweaks. Hsl is just phenomenal with this
@adeleke5140
@adeleke5140 3 жыл бұрын
@@junehanabi1756 that's exactly why I love and use it. It's so easy to create a consistent color scheme with it.
@codex4046
@codex4046 3 жыл бұрын
@@junehanabi1756 while that is true indeed seeing what color it actually is is way more difficult. Every IDE I have used so far has a one click conversion in color formats, so I use HSL for making small changes in lightness or saturation, but then will convert it back to HEX.
@YaroLord
@YaroLord 3 жыл бұрын
you're one of the weird ones and definitely in the minority here with rgb you have to calculate the result of adding 3 values (r + g + b) with hsl you only have to calculate one: the hue - the other two are just how intense/bright the hue will be i literally cannot fathom a scenario where rgb is easier or simpler than hsl for web development
@vintprox
@vintprox 2 жыл бұрын
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.
@karesztrk
@karesztrk 3 жыл бұрын
Flawless tip! I love it ❤️
@VIBORARockbandES
@VIBORARockbandES Жыл бұрын
wow every day i learn something new Kevin thanks for sharing
@integrateur
@integrateur 3 жыл бұрын
Thanks KP for this!
@johnwayne8059
@johnwayne8059 2 жыл бұрын
Great video! Thank you Sir!👍👍👍
@MrSh7766
@MrSh7766 3 жыл бұрын
Very useful info
@ignisAnimus
@ignisAnimus 3 жыл бұрын
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!
@poojagarg9182
@poojagarg9182 2 жыл бұрын
awesome video!!
@homercavazos
@homercavazos Жыл бұрын
Wow! changing the site I'm working on to HSL. Good stuff.
@jennifermagpantay7933
@jennifermagpantay7933 3 жыл бұрын
I loved your t-shirt
@tonskudaigle
@tonskudaigle 3 жыл бұрын
I dove into HSL a bit a few weeks ago during my work project. I mean hex is quite simple, easy to copy&paste and VSCode integration is so seemless. But you brought up an excellent point that crossed my mind as well a few weeks ago: the different shades are so much easier to make. I tend to be very precise when it comes to these things. Not too blue or not too yellow. But creating a simple :root map of the main colours is so easy and awesome to use. I'm still trying to push it through in our company (am not part of the dev team apart from UI/UX stuff). Great video Kevin and I will definitely read up the LCH stuff!
@BenHur872
@BenHur872 3 жыл бұрын
Thanks for this intro, Kevin. Really useful. It would have been great if you'd discussed browser compatibility with these schemes too, to help us understand the level of support each has :-)
@thyssenbot
@thyssenbot 3 жыл бұрын
Awesome! Can you please do a video on CSS for Web App development? Compared to website design, Web apps are more constrained and far more dynamic.
@CrookzArtwork
@CrookzArtwork 3 жыл бұрын
Thanks for sharing
@ignisAnimus
@ignisAnimus 3 жыл бұрын
Additionally I like that you say "Are you using the WRONG color model in your CSS?" and not "You are using the WRONG color model in your CSS!" You are questioning it and provide an alternative, but you don't say: "You are wrong. Do this you fool!" like most other youtubers do.
@abdelghanialmasri6695
@abdelghanialmasri6695 2 жыл бұрын
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
@GaurangDabhi
@GaurangDabhi 3 жыл бұрын
I still feel RGB with opacity has better usage then this... personally I use it more than hsl... Yes if you are creating your own Design then this is very useful. But if a designer already gave the color codes to you then RGB or Hex codes are super easy...
@KevinPowell
@KevinPowell 3 жыл бұрын
HSL has an alpha as well... but yes, I get it if you don't need to change the colours at all :)
@GaurangDabhi
@GaurangDabhi 3 жыл бұрын
@@KevinPowell love your videos. I recently joined your channel. And learning a lot from you. Keep up the good work my friend.
@welling1
@welling1 3 жыл бұрын
wow! had no idea VS Code allowed you to just click on the picker and circle through the modes!
@dave_m98
@dave_m98 3 жыл бұрын
Vs code is goated
@MrMattpnk
@MrMattpnk 3 жыл бұрын
I always thought it was something intuitive
@tonybrown7847
@tonybrown7847 2 жыл бұрын
I think this is in most color pickers?
@shylajaa1568
@shylajaa1568 2 жыл бұрын
@@ismailcreatvt Same. It's a feature in most of the complex IDEs
@pranavnyavanandi9710
@pranavnyavanandi9710 2 жыл бұрын
Me too man.
@hugodsa89
@hugodsa89 3 жыл бұрын
Dude I love your videos 😃
@crousdioll
@crousdioll 3 жыл бұрын
Thank you KEV :)
@ZeeJohansen
@ZeeJohansen Жыл бұрын
That "for now" made me laugh so hard, I'm happy I'm watching this at home 🤣🤣
@flaviomauri
@flaviomauri 3 жыл бұрын
Oh perfect timing, just last week I scoured your channel in search of why you have been using HSL (from some time)! It’s undeniable that this colour space makes it easy to create shades, but I find the premise quite the specific scenario. What I mean is that I don’t think we should create palettes in the editor; it’s, I dunno… too abstract? Arbitrary? Ok when prototyping, but when working on a full blown project I would expect/imagine that a design has been done outside the code editor, the palette has already been set, we should have a style guide and in HTML we are just creating components from the library… so in a proper pipeline I would say that the problem of understanding the colour code is irrelevant, the work has already been done, you are using what’s been provided, even as a solo freelancer. Do you/people work directly in editor? This reminds me of the 37Signals post “why we skip photoshop” from many years ago, approach that I tried myself (and liked it)… but I think it’s really feasible when working on minimal interfaces; utilities, not brochure website. I wonder if at 37S/Basecamp they still skip the design phase (say mock-up). What seems most useful in HSL is the ability to easily manipulate colour dynamically.
@kaanergunlu7836
@kaanergunlu7836 2 жыл бұрын
Kevin knows how to touch your heart :D. Joking aside, your contents have been helping me a lot along the way, many thanks!
@maelstrom57
@maelstrom57 3 жыл бұрын
I like to start by using predefined colors and tweak them depending on my needs
@RevAssassin
@RevAssassin 3 жыл бұрын
Come for the awesome CSS tips, stay for the cool t-shirts Kevin always wears!
@Darkray201
@Darkray201 3 жыл бұрын
Again a very nice video, Kevin ty for that one ✔️ I suggest that the easy conversion is possible in IntelliJ // PHPStorm, too - do you know how it works there?
@VasilyPavlik
@VasilyPavlik 3 жыл бұрын
Brilliant as usual. Even if you know all this theoretically your examples give some extra knowledge and thoughts after watching. Thanks a lot.
@KevinPowell
@KevinPowell 3 жыл бұрын
Glad you enjoyed it
@joincoder
@joincoder 3 жыл бұрын
Thank you so much for to explain this
@kuntaldas2843
@kuntaldas2843 3 жыл бұрын
I really struggle with colors. one in depth video on colors will be awesome.
@RevAssassin
@RevAssassin 3 жыл бұрын
Kevin has a very useful video about Tips on how to pick colors for your project that is simple and doesn't go into color theory stuff
@AbWischBar
@AbWischBar 3 жыл бұрын
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.
@kevinmckraken
@kevinmckraken 3 жыл бұрын
I've used the HSL model for quite a while, because it was the easiest to understand/edit. My favorite part is in Sass, you don't need the percent signs, which makes things even better for me. It should be implied that the S and L are percent, so the requirement for the signs in regular CSS seems redundant.
@aaronrothwell7615
@aaronrothwell7615 3 жыл бұрын
Yes I prefer it in Sass too, so you can set a brand colour, then have other colours auto adjust based on it, using the Sass functions
@KrystianChynal
@KrystianChynal 3 жыл бұрын
Great tip on clicking the color picker to change color modes. BTW, any chance you could do a video on what extensions you use in Visual Studio Code and why.
@BlurryBit
@BlurryBit 3 жыл бұрын
It probably depends. I love 6/8 digit hexes because of simplicity too. For example, I would immediately know DD0000 would be almost Red. 00DD00 will be semi green, 0000DD will be semi blue (by semi I mean darker)... because it's rgb value. Each of the color has 2 hex digits assigned to them from 00 to FF. For 8 digit hashes, the last two are the alpha, and have the same scheme - 00 to FF. Atleast that's the way I learned. :) The same would apply for rgb/rgba as well.. the difference being that here the colors are from 0 to 255 (decimal) instead of 0 to FF (hexa decimal). More complicated colors can be difficult to figure out (for example let's say FFDD99) regardless of the scheme being used. It could be me only. :)
@TristanSchaaf
@TristanSchaaf 3 жыл бұрын
While technically correct, visually a lower brightness value might not always be what you want. So picking the colors, for design, should always be "hand picked". I don't know how LCH will resolve this. On note: The variable in hsl(var(--color), 50%); can be any color space. You can for example, define a color in hex, make it darker/lighter with HSL, and make it translucent with RGBA if you want to. Only ever needing to change one variable color.
@autocosm
@autocosm 3 жыл бұрын
Having the same actual brightness irrespective of a hue's natural luminance is great for contrast (should result in same ratio for same brightness) and data visualization (no spikes at yellow, cyan, magenta).
@davi_singh
@davi_singh 3 жыл бұрын
Personal preference for color values is 1. RGBA -> making it lighter usually just tweaking the alpha value, darker is usually adding the same value for all 3 channels or sometimes just 1 channel 2. HEX -> i guess have just become comfortable with it, lighter usually means adding value to color on the opposite end of the color wheel, getting pretty decent at estimating it these days, darker same as RGB HSL is so alien to me, but will definitely give it a go now.
@neubertdaniel
@neubertdaniel 3 жыл бұрын
Important info would be that if you still have to support IE you need to do some kind of polyfill. (Probably already done for the variables ^^)
@junehanabi1756
@junehanabi1756 3 жыл бұрын
I've been using hsl for years and love it. I'm glad to see people talking about it. Almost no one seems to even know about it and I seem to have to explain why I don't just use hex. I know hex is short and sweet but geez this isn't 1998, there are other options out there. Why after decades is hex seemingly the only thing ever taught still.
@alexisfy
@alexisfy 3 жыл бұрын
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
@jenstornell
@jenstornell 3 жыл бұрын
I agree that hsl is the best approach. Nowdays I'm using Tailwind so I never need to setup a color ever again.
@ocxigin9220
@ocxigin9220 Жыл бұрын
Lol, I like the part you said when you say "if you write color picker in google you get a color picker". 😹
@tedfitzpatrickyt
@tedfitzpatrickyt 3 жыл бұрын
super cool, caniuse shows green across the board for css3 colors. i think in HSL conceptually when i’m designing so to have the model for coding is awesome. i missed if this has alpha? oh wait yes it does, it’s a function hsla(h,s,l,a) - sweet. i wonder how transpilers handle this ...
@RaveKev
@RaveKev 2 жыл бұрын
Danke!
@KevinPowell
@KevinPowell 2 жыл бұрын
And another one, thanks again!
@malcym3394
@malcym3394 3 жыл бұрын
Surely a colour is a colour is a colour. Getting into the depths of the various colour systems is interesting but, at the end of the day, do we really need to know, for example, the difference between additive & subtractive colour systems, or how to derive a colour, tint, shade by changing an element in the colour code? The most important factor in the PRACTICAL use of colour is the relationship of colours in a scheme. For that purpose, the standard colour wheel is the best way to determine which colours work well together. It's easy to determine colour chords, the work with tints & shades for a fully flexible, and easily understood/applied set of colours. How you choose to represent the chosen colours is secondary. We all consume colour via a screen, which ultimately means controlling the output of pixels, How the pixels are activated is pretty irrelevant. I could say that a given colour is called "gloxypantile". I just made that up, but that could be the start of my globally significant colour system. Red would be "antopiarelum" and green "hubbestrium". As long as I can convert those bits of gobbledygook int the RGB values used to set pixels, the underlying methodology is irrelevant. In other words, there's no need to understand the minutiae of colour systems - only to understand what colours work well together.
@captuhu
@captuhu 3 жыл бұрын
2:15 the square color previews that you are clicking: is that default in vscode or is that a plugin?
@inx1819
@inx1819 3 жыл бұрын
default
@AbdulKader-jt5gd
@AbdulKader-jt5gd 3 жыл бұрын
Great ❤️
@BohemianOnTheRoad
@BohemianOnTheRoad 6 ай бұрын
love you mr. Powell from Bangladesh
@cdey3886
@cdey3886 3 жыл бұрын
love your star wars shirt
@rezarahman1782
@rezarahman1782 3 жыл бұрын
Choosing color for gradient is a big problem for me. 🙃
@KevinPowell
@KevinPowell 3 жыл бұрын
Check out uigradients.com 😊
@asiessingh23
@asiessingh23 3 жыл бұрын
I always used to think why use hex and RGB way more than hsl
@cerpow
@cerpow 2 жыл бұрын
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?
@MM-vr8rj
@MM-vr8rj 3 жыл бұрын
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.
@spicywasab
@spicywasab Жыл бұрын
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%
@Vippsi
@Vippsi 3 жыл бұрын
Hey Kevin, I have a question, that I hope you respond to, When using a SASS map to build colors like: --clr-primary-300, how are you able to use those in your sass without using var(variable)? Also from what I understand :root shouldn't compile to css, however mine does..
@Vippsi
@Vippsi 3 жыл бұрын
Also maybe this isn't possible, I was just curious based on reading through your GitHub
@iramimran3117
@iramimran3117 Жыл бұрын
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.
@Victor_Marius
@Victor_Marius 3 жыл бұрын
Maybe a button or just an icon of an left-right arrows () to suggest that you can switch between color formats would be nice
@kitsunekaze93
@kitsunekaze93 3 жыл бұрын
"cant modify hex codes" what? #123 or #010203 is simple, r:1 g:2 b:3, but instead of writing it only between 0-9, you do 0-F, where A B C D E and F is 10 11 12 13 14 and 15, to make the colour darker, just lower the values proportionally, like change #09F to #07D etc
@jameshskim
@jameshskim Жыл бұрын
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!
@KevinPowell
@KevinPowell Жыл бұрын
No hsb in CSS. We only have hex, rgb and hsl at the moment. lch is on the way, which I'm looking forward to :) - EDIT: we also have HWB.
@_tanzil_
@_tanzil_ 3 жыл бұрын
*HSL seems like a little bit easier to guess the colors than RGB. Pretty nice. Thanks*
@prayagprajapati8846
@prayagprajapati8846 3 жыл бұрын
Changing color like VS code is also available in chrome
@JulieVandebosch
@JulieVandebosch 2 жыл бұрын
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?
@caigner
@caigner 2 жыл бұрын
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.
@somnvm37
@somnvm37 3 жыл бұрын
I can kinda make hex myself. And read it. It is not that easy, but possible. I gussed to colour, it was "some kind of cyan, eith mostely green, and it is also not very light".
@tommysmith5479
@tommysmith5479 3 жыл бұрын
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?
@kbcarte420
@kbcarte420 2 жыл бұрын
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.
@klesus
@klesus 3 жыл бұрын
You should be able to be fairly approximate with hex after realizing that hex is just rgb, but in hex. But other than that the only reason to choose one over the other I think is if there's supposed to be any dynamic shifts in color through javascript or something. Otherwise you'll just choose one visually through the tools in your IDE (and if you don't use an IDE that have tools for this then you should) or through other design tools like Photoshop, Kuler etc.
@ch-yq5yn
@ch-yq5yn Жыл бұрын
I've seen Hex used far more often then HSL. I'd recommend to use whatever the requirements of the designer are
@tinpham6413
@tinpham6413 3 жыл бұрын
2:15 no way, i never knew that before
@mahdirostami7034
@mahdirostami7034 2 жыл бұрын
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.
@hugodsa89
@hugodsa89 3 жыл бұрын
There is no twitch link Kevin! :(
@KevinPowell
@KevinPowell 3 жыл бұрын
That was a bit of a fail, just added it :) www.twitch.tv/kevinpowellcss
@vertigoz
@vertigoz Ай бұрын
Why not hsb which is used on Photoshop?
@Po4to
@Po4to 3 жыл бұрын
The color's green value is the highest, with blue somewhat behind, but still way in the upper half, and the red is the lowest - which means it doesn't contribute much color, just makes the mixture of the other two colors a bit brighter. So it's minty green/lime green. The alpha is at 0.38 or so. Come on, hex isn't black magic. It's just RGB translated into hexadecimal. And it's the smallest in byte size - since you don't have to even type out the hex in duplets, a single-digit value will do unless you're super picky. So really, it's apples and #f80; rgb(255, 128,0); hsl(30deg,100%, 50%). Yes, it does get harder with tweaking saturation or lightness, but if you're into challenging tasks/useless exercises in futility, it's doable: lightness is increased by scaling the RGB values proportionately, and saturation can be toned down by proportionately levelling the differences in the RGB values. That LCH thing does look like an interesting development. Not going to change my religion, I guess, I will treat LCH as a preprocessor of sorts and convert it into hex for simplicity - but I do appreciate someone out there thinking about my poor, permanently sore, bloodshot eyes.
@nomadshiba
@nomadshiba 2 жыл бұрын
i think we can all agree, we are using the code editor or devtools to pick color
@Dojan5
@Dojan5 3 жыл бұрын
You don't need to be much of a wizard, just understand hex. It's just base-16 with numbers going from 0 to F. The alpha value at 5 would make it the 6th number out of 16 so around 37-40% alpha. #36D6AB has some red, a lot of green, and a decent chunk of blue. Green and blue makes teal, and given that red isn't that low, and all the other values are decently high, I'd picture a decently bright teal.
@flowerofash4439
@flowerofash4439 Жыл бұрын
i feel like the saturation percentage is just how less grey smoke you want on your color
@percurious
@percurious 3 жыл бұрын
Hey Kevin, thanks for your great videos! I recently stumbled uppon your channel and so far i realy enjoy your style, your perspective and your content overall! But: Aaargh! ;-) HEX is not a colormodel. HEX is RGB, just for nerds... If you understand RGB you can handle "HEX" with a bit of math :-) In the 6 char version, the first to chars represent R(ed) as a value between 0 and 255 (or R * 255) in hexadezimal encoding (0-9 mean what you are used to, a means 10 and f means 15; and you multiply the first digit by 16 and add the second. So A9=10*16+9=169~=0.66). The next two are G(reen), the last are B(lue). With 8 digits, the two additional ones are (op)A(city) ("alpha" realy). And three digits are just shorthand for 6: #f80 = #ff8800 ~= rgb(1.0, 0.5, 0.0) I like hexadecimal rgb much better then the css rgb() syntax for its conciseness. But i do love hsl() for its ease in tinkering just as you describe - and am looking foward to LCH! If youd be realy interested into color models, i' point you to brucelindbloom.com for a deep dive ;-) Thanks again for the video and sorry for the smartass-nerd-rant :-) Bests Simon
@franki01mail
@franki01mail 3 жыл бұрын
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.
@6alonl
@6alonl 2 жыл бұрын
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?
@lenarnie2973
@lenarnie2973 2 жыл бұрын
Okay, so use it or no ?
@rezarahman1782
@rezarahman1782 2 жыл бұрын
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.
@duck8dodgers
@duck8dodgers 3 жыл бұрын
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?
@pcartisan2721
@pcartisan2721 3 жыл бұрын
As said in a comment below, “May the CSS be with you”. So, If CSS is like StarWars, is HTML like Star Trek? Sorry for Kevin. Your videos are great, as usual.
@pablodv87
@pablodv87 2 жыл бұрын
Your tweaking of the RGB values reminds me of Troy McClure squeezing an orange with his face...
@manytrickpony695
@manytrickpony695 3 жыл бұрын
180 difference on the hue gives you the complimentary hue.
@dominic_dl2114
@dominic_dl2114 3 жыл бұрын
The first on is turquoise the oder one is a Semi transparent Orange lol
@BenjaminAster
@BenjaminAster 3 жыл бұрын
I'm now officially a wizard!
@Ginfio
@Ginfio 3 жыл бұрын
*Have a great day.*
@arkadybron1994
@arkadybron1994 3 жыл бұрын
The word you were groping for is "Luminance"
@ChrisFotosMusic
@ChrisFotosMusic 3 жыл бұрын
Lmao I got both of the hex's at the beginning of the video
@guilhermefonseca3067
@guilhermefonseca3067 3 жыл бұрын
Total noob here, just a student but what is wrong with using RGBA? I thought browsers played nice with RGB?
@chhavimanichoubey9437
@chhavimanichoubey9437 3 жыл бұрын
already started using hsl but now.........
Avoid these 5 beginner CSS mistakes
21:38
Kevin Powell
Рет қаралды 70 М.
Flexbox is more complicated than you thought
22:42
Kevin Powell
Рет қаралды 150 М.
1 класс vs 11 класс  (игрушка)
00:30
БЕРТ
Рет қаралды 4,2 МЛН
Универ. 13 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:07:11
Комедии 2023
Рет қаралды 5 МЛН
Are You Making This Mistake With CSS Colors?
6:58
Web Dev Simplified
Рет қаралды 161 М.
How I make UI color palettes
8:51
UX Tools
Рет қаралды 373 М.
5 simple tips to making responsive layouts the easy way
15:54
Kevin Powell
Рет қаралды 744 М.
Generating your color palette in CSS | HTTP 203
28:02
Chrome for Developers
Рет қаралды 17 М.
CSS color pro tips
10:00
Kevin Powell
Рет қаралды 38 М.
A deep dive into CSS color-mix()
18:06
Kevin Powell
Рет қаралды 25 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 702 М.
CSS Color Systems HSL, RGB, HEX - Colt's Code Camp
26:57
Colt Steele
Рет қаралды 13 М.
You are doing :focus wrong (and I was too)
13:24
Kevin Powell
Рет қаралды 154 М.