Design Template by Anonymous

CSS Implementation

In order to use color in web design it is important to understand how to apply it using CSS.

One can assign various color values to CSS properties. Some examples of color related CSS properties are listed below.

Color
Background-Color
Border-Color

Hexadecimal Color Value

Hexadecimal colors are coded using a 6-digit hexadecimal number with red, green, and blue components. The first 2 digits in the hexadecimal number represent the red component, the next 2 digits the green component, and the last 2 digits the blue component. The higher the hexadecimal value of each component the stronger that component appears in the final color. The highest value a hexadecimal component can have is ff and the lowest value a hexadecimal component can have is 00. A color with a hexadecimal value of #000000 appears black, the absence of color, while a color with a hexadecimal value of #ffffff appears white, the combination of all colors.

Picture of a hexidecimal color representation — This is a picture of the various components of a hexidecimal color representation. Since the blue component has the highest value, the color will apear more blue.

HSL Color Values

HSL stands for hue saturation lightness and it is another way to represent color. Each HSL color value is made up of a hue, saturation, and lightness component.

Picture of a HSL color representation — This is a picture of the various components of a HSL color representation. This color will have a cyan hue, will be fairly saturated, and will neither be very dark or very bright.

The hue component value is a degree, more specifically a degree on the color wheel. Since the color wheel is 360 degrees hues can be represented in this way. A HSL color value with a hue component of 0 degrees would have a red hue. The next component in a HSL color value is the saturation component and this value is a percentage. A saturation value of 100 percent would cause the color to be 100 percent saturated and very vivid. The last component of an HSL color value is the lightness component and this value is also a percent. The higher the percentage the lighter the color is.

Benefits of HSL Color Values

With a HSL color value it is very easy to manipulate a hue’s saturation and lightness as the hue remains constant when altering these values. This feature of HSL color values can be very useful when creating color schemes as one can find a color that fits with a scheme simply by changing the saturation or lightness values of a color already in the scheme.