Jump to content
xisto Community
Sign in to follow this  

Defining Colors Using Css

Recommended Posts

We can specify the colors using different techniques in CSS to use within documents. No color should ever be specified within an XHTML document, it should be specified through CSS.


Lets see the different ways of specifying colors.


I. Using Color Names


You can use color names for specifying a standard set of colors. Only 16 named colors are valid for CSS. They are,

White (#ffffff), Black (#000000), Red (#ff0000), Green (#008000),

Blue (#0000ff), Silver (#c0c0c0), Gray (#808080), Teal (#008080),

Lime (#00ff00), Olive (#808000), Yellow (#ffff00), Maroon (#800000),

Purple (#800080), Fuchsia (#ff00ff), Navy (#000080), Aqua (#00ffff)


II. Using RGB Hex Codes


RGB Hex codes are most commonly used to specify colors in CSS. RGB Hex codes are six digit hexadecimal numbers. A hexadecimal numbers is made up of the digit 0-9 and letters A-F, where A representing 10 as a single digit, through to F representing 15).


Each RGB Hex Color code contains of three parts. Each part when converted to decimal will be equal to a value between 0 and 255 (00 to FF).


An example RGB Hex Color code is "#FFF8DC". The first pair of digits refers to the amount of red in a color ("ff"), the second specifies the amount of green ("f8"), and the last pair the amount of blue ("dc").


The RGB Hex Color code is always prefixed with a # symbol.


III. Using Short RGB Codes


When each of the three pairs of a RGB Hex color code consist of two of the same digit, for example #ffdd77, the code can be shortened or abbrevated as #fd7.


Remember this can only be done only when all three of the pairs are made up of two identical digits.


IV. Using Decimal Values


CSS allows you to specify the color values in decimal form. This will be quite useful if you have trouble working with hexadecimal values. You can just get the decimal values for the colors you use from your image editor or a color picker.


The following syntax is used for decimal color definitions in CSS:

* {	1. color: rgb(255, 248, 220);  }

The above code translates to the color #fff8dc. The value for each of the three colors red, green and blue - is defined as a number between 0 and 255.


IV. Using Percentages in RGB


The Colors can also be specified in CSS as percentages in RGB. You need to add the percent sign (%) after the number you wish to use as percentage for each color.


The following syntax is used for defining colors using percentages in RGB:

*{	  color: rgb(100%, 60%, 200%); }

The value for percentage ranges from 0 to 100 for each color component.



* If the value used for specifying colors exceeds the limit i.e. greater than 255 then the maximum value is used.

* No negative values will be accepted.

* Only the Hex Values for colors is supported by all other web programming languages.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.