CSS color pro tips

The color property is one of the first things we learn, and it seems really straightforward, but there is more that you can do with its values than you might have realized!

⌚ Timestamps
00:00 - Introduction
00:35 - you don't need the "a"
2:42 - rgb with percentages
4:51 - hsl is better than rgb
6:23 - hsl can go past 360
7:23 - opacity can be a percentage
8:43 - easily switch between color modes in vs code

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[josvelema]

hsl is my go-to as well, whenever i'm making a site I pick a color from an image, copy it multiple times as variables and for example turn down the saturation a bit and lightness to get a color for boxshadows, use the degrees in opossite direction to get contrasting/complementing color, etc etc . If you do this a lot it's a bit easier to visualize color wheels/spectrums :)

[SerenityForschen]

As the person who manages websites and is the go between developer and designer, I've been so happy to find your videos. My current endeavor is fixing and updating a company site that has quarks like uneven margins, hiding the radio buttons site wide or my favorite thing so far a bottom margin on a specific component is set at 4% which extra boggles my mind.

You have given me some great ideas to fix the CSS and make the site functional.

[katrinaaponte]

Thank you for your awesome tips and tricks Kevin. I think you're the biggest reason that I've come as far as I have when it comes to CSS coding.

[ianpageproduction]

your super awesome i love CSS ive only been coding for 8 months but Im full stack in python, java, javascript...by far my favorite thing to do is CSS and styling i really want to get a front end UI/UX job and im addicted to your channel. Keep the great content flowing your awesome! the hsl tip is gonna be so helpfull!

[reb]

Awesome video. Thanks for the tip on VS Code and swapping between hex, rgb, hsl. I didn't know about that!

[ScriptRaccoon]

03:03 I think this deserves a different explanation. 255 is not just a random number, it is 256 - 1 with 256 = 2^8 being a power of 2 (which is also 16^2, which explains the correspondence to hexadecimal code), exactly what we can store in 1 byte. Since we want to include 0 but also want to have 2^8 possibles values, the numbers should actually end with 2^8 - 1. This also means that when we want to get the half value, we just use 2^7 = 128, namely (2^8 - 1)/2 = 2^7 - 0.5 = 128 - 0.5 = 127.5.

That being said, this was a great video. I simply didn't know that we can use percentages in the rgb function. Very useful!

[TheZyruks]

Weird i was making a color design system with sass and you drop this video. Perfect Timing.

[Gallowtown]

Thanks so much, i register to the responsive layout course hope i begin with it in the next weekend.

[ComeCaramelos_]

Useful tricks! Using hex values allows you to manage the opacity by adding from 00 to FF at the end (#f25f3a99)

[BossPetta]

I don't know how much time I have lost converting between colour units. Only for that… thanks Kevin ♥️

[Stoney_Eagle]

Css color just got harder... Not color itself but chrome decided to add a new property called chrome-autofill when you autofill, which has a higher specificity than any class class set on them and has !important on the color and bg color. 🤬
So I had to resort to drastic measures with: input id starts with.
But thanks to you I know how to deal with specificity 😉

[vertigoz]

4:20 Hsl might as well drop the % altogether

[rmasoni]

This was actually mind blowing! I always hated the commas on rgb(). Also, percentages everywhere? How did I miss all of this?!

[xzchc]

hsl(5000 100% 50%) -- finally we can see beyond ultra violett! ;D

[justkailash]

If i want to create neutral colour shades (or any other colour shades) .. which is better method .. using separate colour code for each shade or use base colour code and add alpha value?

[alexzweers]

thanks very useful, you are a legend 😀!

[MrMairu]

I'm sort-of stuck on RGB still, as the colours I use for my main website I've been using for over 20 years now! It's just so easy to bang in the RGB values, but Photoshop and Illustrator still predominantly use RGB too (unless it's for print), so switching to HSL is a bit of a PITA for me. HSL does seem a lot easier during raw coding when I see you use it in your videos though.

[AlvinIsChipmunk]

quite helpful even for a newbie like me...

[vinaypatil]

Sir please make CSS full pledged modern course/series from beginner friendly to advanced and with awesome project

[arunsaklani]

Can u plz tell me which units good for width height ?