CSS color pro tips

[@josvelema2362]

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 :)

[@KOBE42__]

I do this as well but using hexa colours. Only problem with hexa colours is that I have to use an online tool to find complimentary/split complimentary/ Monotone colours. Will definitely start using HSL from now on and try and get used to the colour wheel.

[@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!

[@peterholzer4481]

To expand a bit on this, 0 to 255 is the range of integers which can be stored in a single byte, so it's kind of natural to choose this range for something stored in a computer. It' not necessary, though. There have been graphics cards with less (e.g 5 bits) or more (10 bits) per RGB channel, and there are graphics formats with 16 bits per channel. They will generally always use a power of two to avoid wasting space.

[@peterholzer4481]

It's easier to do math with these numbers if you do mental arithmetic in hex 😀

[@avisian8063]

@@peterholzer4481 "expand a bit" i see what you accidentally did there

[@peterholzer4481]

@@avisian8063 That wasn't an accident.

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

[@katrinaaponte4787]

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.

[@bobbysilver272]

A nice, useful video Kevin. Thanks.

[@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!

[@reb569]

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

[@rmasoni]

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

[@TheZyruks]

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

[@onetoptv1404]

So informative, thanks a lot!

[@Gallowtown]

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

[@BossPetta]

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

[@ComeCaramelos_]

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

[@xzchc]

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

[@vertigoz]

4:20 Hsl might as well drop the % altogether

[@salmanfarshisajib6512]

Always love your videos.👍

[@dariussturge9686]

The CSS King/Jedi

[@JohnBortins]

Outstanding!

[@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 😉

[@tombyrer1808]

Have a link please? "Autofill" is the worst term to Google....

[@Stoney_Eagle]

​@@tombyrer1808 Kevin has a video on css specificity where he explains how CSS rules take priority over others. but for now you can add this to your CSS: input[id^="yourIdPrefix-"] { background-color: blue !important; color: red !important; } And give all your input fields an id that starts with "yourIdPrefix-" StackOverflow and google are my 2 best friends 😉

[@lofiandchill6062]

The color switching mode trick does not work on my vscode for some reason. It only switches to hex and rgb. And when I manually type in hsl, the color picker disappears! its like vscode cannot recognise it.

[@alexzweers]

thanks very useful, you are a legend 😀!

[@laweffect]

Are hex values not recommended?

[@RaviSharma-rz4eh]

great content

[@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?

[@vinaypatil8009]

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

[@MrMairu555]

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.

[@nagualdesign]

The Photoshop color picker shows RGB (hex), red, green and blue, hue, saturation and lightness, _and_ L, a and b, all in one panel.

[@arunsaklani9890]

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

[@AlvinIsChipmunk]

quite helpful even for a newbie like me...

[@brandonsayring]

I have been doing a lot of work in GLSL lately and I really wish the css rgba values were compatible with fragment shader 0 to 1 float values.

[@KevinPowell]

If it's RGB, I looked at how you can use 0% - 100% values instead of 0 - 255 in the video. Using percentages should be equivalent but with some extra 0s at the end. Not exactly the same, but at least you don't have to change your mental model to get it to work.

[@brandonsayring]

@@KevinPowell yes, a fragment shader's color output is a 4 dimensional vector where each vector represents an RGBA channel. You're right, the conversion from a percentage into a 0-1 float is a lot easier to mentally process than a 0-255 int, though the conversion is the same (divide the value of a channel by its maximum potential value). I just think it would be a bit nicer if it was less hacky when using Dom element color values as shader uniform input data for example.

[@mauricebuchi]

Nice but i still like the 'a' for clarity sake

[@DavidMermelstein]

That VScode color switcher is being hidden is ridiculous. I found it a couple of yrs ago because I was going to install a plugin for it.

[@skillzorskillsson8228]

when writing hsl colors you dont even need %. You can just write hsl(130 100 50) and it works :)

[@anandca4096]

I very much like css tips videos provided my you

[@tienkhaihuynh1287]

"Be Vietnam Pro" 😆

[@mhasancoder]

color: rgb(50% 100% 255); this is not worked in my chrome browser body{ font-size: 3rem } .red{ color: rgb(100% 0% 0%); } .green{ color: rgb(0, 255, 0, .5); } .blue{ color: rgb(50% 100% 255); } Red Green Blue

[@arunsp767]

I've always used percentage as my stupid @$$ brain doesn't like starting with a dot. I have to anyways start with a zero. Thus turns out writing percentage is easier 😄

[@suelingsusu1339]

🙏🙏🙏🖖🖖🖖🖖🖖

[@Skillthrive]

First!

[@alexg4927]

Fifteenth!

[@Skillthrive]

@@alexg4927 LETS GO!

[@DeveshKumar-hs4qo]

How to make everything complicated.

[@krccmsitp2884]

With great flexibility comes great responsibility. 😉

[@photomat]

"This is in Chrome right now" --> worst browser for doing colour demos as Chrome is not representing colours properly ....

[@cdey3886]

third :D