RGB Values, Hex Values, And Primary Colors: CSS Web Design Series Part 5

RGB values, hex values, primary colors

RGB Values, Hex Values, And Primary Colors
Get the source code for this lesson at the end of the post!

Today, we’ll cover the three ways of adding color with CSS. Up to this point, we’ve been adding all of our colors with one of the 16 primary colors and calling it by name. The problem with adding color in this way is that it limits us to just 16 colors. Our other two options for adding color are hex values and RGB values(Red, Green, Blue). These two options give us access to over 16 million color possibilities. A few years back, most computers were limited to about 256 colors. Nowadays, this isn’t an issue with computers being able to display millions of color variations.

Below, I created an h1, h2, and ul element. Up in the style tags of the internal style sheet, we have three CSS rules. Each one is a different example of how to add color.

colorcodebeg

threewaystoaddcolordisplaybeg

The first example in the h1 rule is the use of one of the primary colors called by name. This is the generic way of adding color and is how we’ve been doing it so far. The second example in the h2 rule uses a hex code value. Hex codes start with a # symbol followed by up to six alpha and numeric characters. There are a huge number of color variations for each primary color. If you google hex values for blue for example, you will get tons of results and hex values. Something I do that you may find useful; is when I find a color I like, I save it in a photo editor file like MS Paint with a small square image of the color and the hex value underneath it. This way you don’t have to try and remember all of your favorite color codes or search every time. The final example is a ul (unordered list) that uses an RGB value. An RGB value is a combination of red, green, and blue values that are combined to create a color. The values can range from 0(no color) to 255(darkest shade of that color). This number is often referred to as its intensity. When you enter the values, they must also go in that order; rgb(red,green,blue). An example of an RGB value for green is rgb(0,255,0). We are saying 0 or “no red”, 255 or “the darkest shade of green”, and 0 or “no blue”. The result is green because we are not combining any colors. As you can probably tell, RGB values have millions of possible colors. You can easily find an RGB color mixer tool online. Here’s one at W3SCHOOLS.

In the next example, I’ve added a few more color examples, an override, and a width property for each.

finishedcolorcode

finishedcolordisplya

First off, I added a width to each of the three examples just to start getting you introduced to it. For now, I’m using percentages to simplify the example. But percentages are a very common way to size elements on your page, and can be very useful when you need to make adjustments a few months down the road. The width property is used very often. In a future post, we will be learning how to adjust heights, widths, and displaying elements side by side. At the very top of our style sheet is a CSS rule for the body that sets the background of our entire web page to gray. This is a very common thing to do. It could also be a background image or video. In the h1 rule; the font color is now set with an RGB value. Lastly, I made an li(list item) rule that sets the background color with a hex value. Now when we run the updated page, you can see that the unordered list(aka bullet list) has two colors. Originally, the li element was inheriting its background color from the ul rule. This is because li is a child of ul. When the li rule was added, it overrode the background color for the items in the list. This is why we end up with two colors.

That’s gonna do it for adding color with CSS. It is acceptable to use a combination of all three methods throughout an entire website, but it’s good practice to use one system if possible. Colors are used for many things in web design like hover effects, border colors, animations, and much more. When you start to design an entire website, it would be a good idea to come up with some type of color scheme that flows well throughout all of your pages. For a little side homework, play around with the width property, ways of adding color, and overriding to see what you can come up with.

Source Code From 1st Example

<!DOCTYPE html>
<html>
<head>
<title>Adding Color</title>
<style>
h1{
background-color: red;
}
h2{
background-color: #66FF33;
}
ul{
background-color: rgb(44, 174, 255);
}
</style>
</head>
<body>
<h1>Background Color Added Using One Of The 16 Primary Web Colors</h2>
<h2>Background Color Added Using A Hex Value</h2>
<ul>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
</ul></body>
</html>

Source Code From 2nd Example

<!DOCTYPE html>
<html>
<head>
<title>Adding Color</title>
<style>
body{
background-color: gray;
}
h1{
background-color: red;
color: rgb(12, 96, 98);
width: 70%;
}
h2{
background-color: #66ff33;
width: 50%;
}
ul{
background-color: rgb(44, 174, 255);
width: 35%;
}
li{
background-color: #ffff00;
}
</style>
</head>
<body>
<h1>Background Color Added Using One Of The 16 Primary Web Colors</h2>
<h2>Background Color Added Using A Hex Value</h2>
<ul>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
<li>Background Color Added With RGB Value</li>
</ul></body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: