CSS Colors Tutorial for Beginners

🔗In this CSS colors tutorial for beginners you will learn how to set a background color and how to set a text color. We will explore rgb, rgba, hex, and hsl color values along with HTML color names.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Colors Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:10) How to set a background color with CSS
(02:57) How to set text color with CSS
(03:46) rgb color values
(04:46) Alpha channel - rgba
(05:53) hex color values
(08:59) VS Code Color Picker
(10:30) hsl color values
(12:52) The color value choice is yours
(13:38) Color contrast checkers and palette generators

⚙ Web Dev Tools:

📚 References:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about CSS Colors for beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #colors #tutorial

[yatin]

If someone is confused about HSL:
-Hue: Like Dave said a Color wheel; purely for selecting color. 0:Red >> 120:Green >> 240:Blue >> then 0:Red again.
-Saturation: Related to "how much Gray" is in the color. 100% is no Gray; pure color. 50% is 50% Gray and 50% color. 0% is only Gray; no color.
-Lightness: 50% means.. 50% light given to color. Towards 0% it goes darker-black; less light. Towards 100% it takes goes lighter-white; more light.
Hope this helps.

[maddog]

This channel is really helpful. I've been utilizing these videos for a week now and I can see my improvement. Thanks Dave

[GabrielSouza-yyrq]

Your tips for external resources are always great. Thank you so much!

[aladina]

Awesome tutorial. Finally able to comprehend CSS colors. And the tools also are a game changer

[CTILET]

The best chanel of react and css education!

[fairytail]

Playing with the colours was really interesting!

[বিচিতচিন্তা]

Really, Very much helpful tutorial for beginners. Thanks Dave.

[ahmad-murery]

Nice video,
I rarely use hsl unless I wanted to play with the saturation/lightness of existing color then I converted bak to hex,
Chrome dev tools/Styles tab has a little contrast ratio checker embedded in the color picker, the cool thing about it is it shows the AA and AAA contrast curves so you can adjust your color as needed, it can also suggest a color for you,
you need to inspect the font color in order to see the contrast ratio tool but sometimes it shows "no contrast information available".

Thanks Dave

[Pareshbpatel]

A very comprehensive tutorial on CSS colours. So clearly explained. Thnks, Dave

{2022-06-29}

[oncoding]

Commenting for each video that I have learned from your videos :)

[barangofficial]

You have lesson for teach about css or JavaScript, i want to it

[nishgro]

Hello Dave! Take love from bottom of my heart. You are awesome. I have a request to you. It is possible to add sequential number on series video titles? It will be very helpful for us.
Thanks.

[damo]

In css, there are four special universal property values to control inheritance: inherit, initial, unset, revert. I don't understand how revert works. Will u make a video on it?

[shajjadshaju]

Which vs code theme and font did you use?

[letuslearnmore]

Our tutorial took many times at explaning colors.