The lecture introduces you to another way of specifying a color in CSS.
Previously you learned that you can specify the color name, like red, green, or blue. But there are other ways of defining a color value, like using the hex value or the rgb value.
The hexadecimal value (aka hex) is a value that ranges from 0 to 255 in base 10, but is written in base 16 ranging from 0 to ff. That's why it's called hexadecimal, because one digit can have 16 different characters. It goes from the usual 0 to 9, then after that is goes using the letters a through f.
For the specific case of color hex codes, there are usually six digits. The first two digits are the value for the Red. The middle two digits are the values for the Green. The last two digits are the value for the Blue. Hence the abbreviation RGB whenever you need to compose those three colors to build any one color. For CSS, the hex value is always prefixed with a hash or pound sign.
You can also specify color values using base-10 RGB by saying rgb followed by parentheses. Inside the parentheses you write the values for RGB, separated by a comma. For example, for the Red value, instead of writing ff in hexadecimal, you would write 255 in decimal.
To show the red color, simply use value 255 for Red, 0 for Green, and 0 for Blue.
To show the green color, simply use value 0 for Red, 255 for Green, and 0 for Blue.
To show the blue color, simply use value 0 for Red, 0 for Green, and 255 for Blue.
The topic discusses different methods for specifying colors in web development, particularly focusing on hexadecimal and RGB values.
Hexadecimal Color Values
Colors can be specified using hex values, which start with a pound sign (#).
The format is #RRGGBB, where:
RR = red component (two characters)
GG = green component (two characters)
BB = blue component (two characters)
Hexadecimal values range from 00 (no color) to FF (full color):
Example: #FF0000 is maximum red, #00FF00 is maximum green, and #0000FF is maximum blue.
Hexadecimal counting includes digits 0-9 and letters A-F.
Finding Hex Values
You can use developer tools in a web browser to find hex values:
Right-click and select "Inspect."
Click on the color to view and adjust the hex value.
Copy the desired hex value for use.
RGB Color Values
Colors can also be specified using the RGB notation, which uses decimal values:
Format: rgb(R, G, B)
Each component can range from 0 to 255.
Example:
rgb(255, 0, 0) for red.
rgb(0, 255, 0) for green.
rgb(0, 0, 255) for blue.
Conclusion
Multiple methods for specifying colors exist, with RGB (red, green, blue) being the underlying concept across both hexadecimal and RGB decimal formats. Understanding both systems helps in web development and design.
Video Transcript
Okay, now that we're on this topic, I just want to point out
There's a different way of specifying colors here. I said the name black, but there's so many colors the spectrum is huge
There's no way we can have every single
Variant of a color in a name. So that's why we use what's called hex values
So let me show you here
So you always start with a pound sign and then you're going to specify two two characters for the red
two for the green and two for the
blue
Rgb if you ever heard that term Rgb, that's what it means red green blue
So how how red do you want this? Let's say I want
Very red. So I have to use hexadecimal values. If you don't know about that. I suggest you google hexadecimal values. So basically
Usually we have base tan which would count zero through nine
And then we go back to zero as we change the digits
So hex is like zero through nine and then it goes to a b c d e
f
So the last value is like f so I can type f f here, which means the full
red
And then if I don't want any more color, I can say zero zero for green
zero zero for blue
And if I click run and it's going to be all red
So
Basically zero zero is like zero
In decimal basically no
No such thing no no no value for the color and f f is like the maximum
In this case maximum red
Okay, so let's say I want
I change the first to zero zero and then f f
So red green green is the middle two. So this will be green
Full green and then finally if I just do zero zero zero zero and then red green blue blue is the last two
f f that means fully blue
Okay, so that's the hex value for colors you're also going to see that as well as another alternative to not
having to say a specific name
Now if you want to find out the hex color values, you can always use dev tools again, right click
inspect
And then go here you see the color
Click that and you can see
As you change the color here it changes the values of the hex
so you can
Copy this value. Let's say you like this kind of cyano or teal
Okay, click outside
And then you copy this value
Hacks and you paste it here
And then you click run
And then you have that for yourself. Basically, it's like a combination of red green and blue with red being 41
green being d3 and blue d3
And you can use a calculator if you don't know hex value like ff to
decimal
Basically f is like I think it's 256
Yeah, 255
You can have 256 values if you do zero through 255 including the zero is 256, right?
So that's ff is basically 255 if you were to do
decimal
Which leads me to another way of satisfying the color
Which is rgb
like you can say here
rgb
And then you can specify what's the r versus the g that's blue the difference here is you can do
decimal
Like if I do 255 comma zero comma zero
And that's going to be red because the red the r is just 255 which is the same as ff
Okay, and then green is zero and then blue is zero if you find this easier to see it in hex then you can use this
These are the decimal values
So similarly the green would be just zero for red
255 which is the maximum value for green and then zero for blue
And that's green and then finally for blue is zero comma
zero comma 255
And that's blue
Now the space between the comma is not necessary. I just put it to better visualizing myself. Okay
I
Hope that was not too much a little bit of decimal system base 10 base 16
Okay, different ways of specifying the value of the color that you might see but it's always rgb red green blue