Design Template by Anonymous

Applying Colors to Webpages

Colors schemes can be implemented into webpages using CSS. The most notable properties needed for this to be done are color, background-color, and border-color .

The color property involves changing the color of text.
The background-color property involves changing the background color of an element.
The border-color property involves changing the color of an element's borders. All four borders can be set to different colors if desired.

Hexadecimal

To implement these properties, there is a simple format that must be followed. This format is hexadecimal, which is a pound sign followed by six digits. The hexadecimal number represents how much red, green, and blue is used in each color, each taking up two out of the six digits in the value. The digits range from 00 to FF.

Here is an example of the hexadecimal method of implementation:

Picture of code using hexadecimal color values — Color values using hexadecimal can be added to the color, background-color, and border-color properties in HTML.

Some examples of certain colors represented in hexadecimal:

White – #FFFFFF
Black – #000000
Bright red – #FF0000
Bright green – #00FF00
Bright blue – #0000FF
Dark gray - #272829

HSL

Another way to represent color values in CSS is HSL. HSL stands for hue, saturation, and lightness. The same properties can be used to change color, but the format is different.

The first value represents the hue, and it ranges from 0 to 360. This value represents the degree the color is on the color wheel. The next value is saturation. This value is a percentage from 0 to 100, and represents how saturated, or intense, the color is. The third value represents lightness, and it is also a percentage. 0% lightness represents complete black, and 100% is complete white.

Here is an example of the HSL method of implementation:

Picture of code using HSL color values — Color values using HSL can be added to the color, background-color, and border-color properties in HTML.

Some examples of certain colors represented in HSL:

White – hsl(0, 0%, 100%)
Black – hsl(0, 0%, 0%)
Bright red – hsl(0, 100%, 50%)
Bright green – hsl(130, 100%, 50%)
Bright blue – hsl(240, 100%, 50%
Dark gray - hsl(0, 0%, 28%)