CSS Color Properties

In CSS, there are countless uses of color. In this post, I will be specifically covering background-color and color. The background-color property specifies the color of an element, specifically it usually specifies the color of a background element. The color property specifies the color of the text element. These properties can be specified through several different means, including: color names, hex code, RGB, and HSL. An example of a color name is white; an example of hex code is #ffffff; an example of RGB is rgb(255, 255, 255); and an example of HSL is hsl(0, 100%, 100%). Each of these colors are white, but each are represented in different ways.

Hex values (more formally known as hexadecimal colors) are specified by red, green, and blue integers. An easy way to visualize this is: #RRGGBB. The r’s make up the red integers, g’s makes up the green integers, and b’s makes up the blue integers. Zeros (0) represent the lowest value while F represents the highest. An example would be: #FF0000. This color would be purely red because the green and the blue integers are set to 0, which is the lowest value, while the red integers are set to F, which is the highest value. There are also color names that can be used (such as black, white, etc.) that are based on hex colors. A full list of acceptable universal color names can be found here.

RGB values are specified once again by the colors red, green, and blue. Much like the way Hex values are, RGB values are based on red, green, and blue integers. This concept can be visualized through the follow example: rgb(red, green, blue). The value placed in each spot can range from 0 to 255. 0 is the lowest value while 255 is the highest value. Given the example rgb(255, 0, 0) the color would be red because in the red integer the value is 255, which is the highest value, while both green and blue are 0, which is the lowest value.

As for HSL values, they are not universally supported compared to color names, Hex values, and RGB values. HSL stands for hue, saturation, and lightness. In terms of hue, hue is a degree on the color wheel. These numbers range from 0 to 360. 0/360 is red, 120 is green, and 240 is blue. Saturation is a percentage value representing shade. 0% is for a grey shading while 100% is for full color. Lastly, lightness is also a percentage, one determining the amount of light the color receives. 0% is black while 100% is white. Red in HSL is hsl(0, 100%, 50%). The hue is set to red at 0, the saturation is set at 100% to allow for full color, and lightness is set to 50% to lighten or darken the color.

A real life example of the background-color and color properties is pictured in the picture above. In the line that is highlighted blue at the top of the page on the right hand corner, the background-color and color properties are listed. These two elements are for the background color and text color of the header at the top of the page. background-color:#22a4f3 is the blue color of the background of the header while color:#ffffff is the white color of the text. These colors are represented through hex code.

This property can affect user experience because the colors on a webpage can play a large part in user experience on a website. When an individual thinks of a standard website, they likely think of a page with a white background and black text. The black text significantly stands out against the white background. However, if an individual went to use a page that had a white background and the text on the page was a light gray, the text may be difficult to read. Assuring there is a great contrast between colors used on a webpage is important for user experience. If a webpage fails to do so, the content on the page might be difficult to read and/or decipher.

Below is an embedded CodePen. The CodePen highlights the standard black text placed on a white background. Granted, this is the default setting for the background and the text, but I still programmed it into the CSS code regardless. These two elements can be seen under the CSS tab. background: #ffffff; makes up the white background and color: #000000; makes up the black text.

Rehashing user experience, given the CodePen below, the text is difficult to read against the background it is placed against. It is important to ensure the colors being used for the text contrasts against the background. Both of the colors featured are both variations of light blue, so they clash against one another. Ideally, either the color element should be set as a darker color or the background element should be set as a darker color to create contrast between the two. Currently the background element is set to #8ebbc2 and the color element is set to #abcedf. An example of creating contrast would be setting the color element to #924B71, a shade of purple. A dark shade of purple would greatly stand out against a light blue.

In this last CodePen example, color name, HEX code, RGB, and HSL are all utilized in the CSS. Under body and header 1, color name is used to specify the color. Under header 2, HEX code is used. Under header 3, HSL is used. Lastly, under paragraph, RGB is used. Even though all these colors are defined differently, they all specify the color black, expect for the color element under body. The color element under body is a variation of blue. This example mimics the explanation at the beginning of the post that outlines how the four ways to specify color each specified the color white. In this case, they each specify the color black.