in

Understanding CSS Colors And How To Use Them

In this tutorial we will be discussing about CSS colors. In our previous tutorial we discussed about CSS MEASUREMENT UNITS. If you haven’t gone through the tutorial you can do so using the link below

Read previous post on: Complete List of Measurement Units in CSS

CSS Colors

CSS allows developers to make use of color values when setting CSS colors. This colors can be applied to the background or foreground of the web document. CSS colors can also be created by the developer using tools like advanced paint, adobe Photoshop which allows the developer to create colors and get the color values needed for styling colors in CSS. CSS colors can also be used to style table borders and also borders of the web document.

List of Different Formats used in styling colors in CSS

FORMAT SYNTAX EXAMPLE
RGB rgb(rrr%,ggg%,bbb%) h1{color:rgb(30%,50%,20%)}
RGB ABSOLUTE rgb(rrr,ggg,bbb) h1{color:rgb(0,255,255)}
HEX CODE #RRGGBB h1{color:# CCCC99}
SHORT HEX CODE #RGB h1{color:# CC9}
KEYWORDS Red, blue, black, grey h1{color:# red}

Colors using RGB values

we can assign CSS colors using RGB values. “RGB” means red, green and blue. This property takes in three values from 0-255 or percentages. one of the limitation of using rgb property is that not all browsers support the use of this property so its recommended that developers shouldn’t make use of it. Examples of rgb colors values are shown below

color rgb value
rgb(0,0,0)
rgb(0,255,255)
rgb(0,0,255)
rgb(0,255,0)
rgb(255,255,0)
rgb(255,0,0)
rgb(255,0,255)
rgb(255,255,255)
rgb(192,192,192)

CSS coloring Using HEX Codes

Hex codes also known as hexadecimal codes are 6 digit representations of colors. This means that the colors here are associated with 6 digit values. The first two digit (RR) represent red, the second two digit (GG) represent green and the last two digit (BB) represent blue. Hexadecimal codes are presented using the “#” sign and they are available on graphic software’s such as advance paint, Photoshop etc. Example of some of the HEX codes are shown below

HEX CODE COLOR
#000000
#0000FF
#FF0000
#00FF00
#FFFF00
#00FFFF
#FFFFFF
#C0C0C0

CSS coloring Using Short HEX Codes

The short HEX code is similar to the normal HEX codes just that its the shorter version. Here instead of having 6 digit values, we have only three but still starts with the “#” sign for example the shorter version of HEX code #FFFF00 is #FF0. List of short HEX codes are shown below

HEX CODE COLOR
#000
#00F
#F00
#0F0
#FF0
#0FF
#FFF

Conclusion

Now you are done with the CSS COLORS lets move on to CSS BACKGROUNDS .

What do you think?

css measurement unit

Complete List of Measurement Units in CSS

css background

CSS BACKGROUND | Learn How to Design Web Background using CSS