Knowing the right color for the right situation can make or break a project. This holds true in everything from commercials, college presentations, and of course web site design. Simple design areas like border color and background color can deliver very intense impacts on the simple HTML code written for a site.
Through the use of CSS RGB, many color options are open for the designer. These can come in simple value formats such as simple direct namings like “blue,” “red,” or “purple.” You can choose to simply use one of the 145 named color values in CSS but that won’t cover the 16 million colors available in the CSS RGB range.
The use of CSS RGB color values allows you to refine the exact shade or tone needed on the site. That’s an option you just cannot throw aside when it comes to CSS design. In this brief guide, you will cover the basics of the RGB values and how to use them in your own CSS projects.
Using CSS Color Names
Before you jump to the higher range of using the CSS RGB model, it is important to know how to use the simple CSS color names first. This can help you build an appreciation for how the RGB model will expand on that.
For the most modern internet browsers, there is support for approximately 140 CSS color names to work with. These allow for a moderate range of colors to use for a site’s design. Applying them can be done with relative ease as you simply need to declare the property you are going to alter and then provide the color value desired.
In the example below, a CSS color name of “cyan” is used for the background-color property to change the default color from white to cyan.
html {background-color: cyan; }
This will provide the following output on the HTML page;
Altering the color is only a matter of changing the background color value to another CSS color. In this example, you can see the CSS color value is now set to “dark sea green” instead. Also, note the lack of spacing in the name when used inside the CSS code.
html { background-color: darkseagreen; }
The examples below show more options to use in the named CSS colors option.
It can be useful to simply rely on the general 140 CSS color options available when working on a project. Yet, that is still limiting the real power of what CSS colors can really do. This is where you jump to the high range of CSS RGB options.
So What is CSS RGB?
The acronym of “RGB” itself refers to the three colors of “red,” “green,” and “blue” respectively. In context, it is an additive model used to refine the exact colors to be used on your webpage. This works by the use of the separate numerical values of each color.
Each one of the three colors carries a value that ranges from 0 to 255. Consider the numbers to be a value of how dark or bright the color is represented. A value of 0 will indicate that none of the color is being shown. A max value of 255 will instead indicate that the full amount of color is on display.
The “additive” point of the model is where the magic happens. The values you assign to each of the colors are added together to create the various shades a designer is looking for. Consider it akin to a painter mixing yellow and blue to create green. In much the same way, the CSS RGB options allow you to mix your way to new color options.
Syntax of CSS RGB
This can all make a lot more sense when you see it in action. Take a look at the example CSS code below. You can see that the HTML element is targeted by the CSS. It has a color value of white assigned to it currently, just like the CSS color name examples above.
html { background-color: white; }
This provides a solid white background for the HTML page.
To use the RGB model in place of the value of “white,” you can simply state that in place of the named color. See the example shown below. The property of “background-color” is still used. However, the value is now set to “rgb” with a pair of parentheses following it. Note the semicolon is still used at the end to signal the end of the line.
html { background-color: rgb(0,0,0); }
You should also notice that there are three zeroes within the parentheses. This is where the values of red, green, and blue are set. As it is now, no color is showing which will provide a black background.
Obviously, this is not providing a white background as desired. Instead, if you set all the values to the max of 255, you will receive the following output for the background color.
html { background-color: rgb(255,255,255); }
Using the RGB model for color in CSS is simply that direct and easy to use. Just change the values of each color within the allowed range for a mix of colors that suit your need. This is what opens up the wide range of CSS RGB colors for your own application.
Using the Percent Sign Instead
Another option for the RGB values is to use percentages in place of the numbered range. This option can make certain elements of design easier for some creators in certain situations. It does, however, have a bit of a downside. Where the numbered range values allow for 16 million color variations, the percentage format will only push towards 1 million instead. For some, this might not be much of an issue, although it does warrant notice due to the limits it carries.
Using the percent format is also quite direct in the CSS. See the example below where the CSS RGB values have been replaced with percentages.
html { background-color: rgb(100%,0%,0%); }
Within the parenthesis, the first value is set to 100% while the others are set to 0%. This directs the color red to display at full value and sets green and blue to not display at all. In turn, this provides you with a fully red background for the page as shown below.
A Rainbow of Possibilities
The CSS RGB options can work in a multitude of ways. You have the ideas of hue, saturation, darkness, and lightness to consider when trying to fine-tune the design. Selecting the right color for a website can alter various aspects of how an end-user will interact with it. Some colors can impact their ability and will to shop. Others can make them feel uncomfortable or even slightly nauseous to interact with.
Take the previous example with a red background.
This design is more or less garish and heavy on the eyes. The colors are strong and almost overtake each other instead of working together. This is where that 16 million strong color range can be so amazingly useful. Even shades of the same color that are seemingly similar to each other can bring out a different feeling to a website.
Take the following code example where CSS RGB color property was used to style it in a warmer tone.
div {
border-color: RGB(163,104,18);
}
html {
background-color: rgb(122,104,77);
border-color: rgb(236,144,9);
}This will take the strong tone of the previous output to something softer like this;
Changing just one aspect of the RGB color set can make interesting changes. In this example, you can see the background color was altered to have a higher red and lower blue and green value.
html {background-color: rgb(193,58,58); }
This generates a soft rose color for the background which in turn provides a sense of support for the stronger border colors in use on the page.
Even More to Go
While the basics of using the CSS RGB colors are rather easy to follow, that does not mean there is a lack of depth on the topic. In fact, some of the more advanced designs you could come up with can benefit from traditional art studies. Topics like color theory can help develop the right tones that complement and enhance the HTML content.
Other notable usages include making the site friendly to those who may have color blindness or aversions to particular intensity in design. For example, you would not want to use massive bright colors for a site intended for a disabled end user that might suffer from light sensitivity.
Of course, there is far more in the CSS toolkit to work with as well. You can even create gradient images for use as a background as well.
Other great options such as changing backgrounds and alternate fonts can bring it all together in ways that your imagination, (or the client’s), ask for. The possibilities are only limited by what you choose to learn. The great thing about CSS is that if you have already come this far, you are more than ready for the other great abilities it has to offer.
______________________________________
No need to stop with just CSS. If you are looking for skills that will make you attractive to any employer, learning to code can help you open doors to those new possibilities. Enroll in Udacity’s Intro to Programming Nanodegree program today to start the journey
