Specifying Colors in CSS

[Ned Storm]

Here's a tip for manually entering color values as opposed to picking them from a palette:

Use hexadecimal RGB values where the digits are 0-9a-f

The color is a mixture of red, green and blue. You can use 3 or 6 hex digits.

Example colors:

black: #000
white: #fff
orange: #f80 - remember that7/ 8 is half way between darkest to brightest
yellow: #ff0

Of course the CSS code is like: a { color: #009; }

To tweak the colors, simply increase the numbers to make it brighter or reduce the numbers to make it darker.

[kartinkent]

you should know exactly when to use the colors before seeing the coding. Once you get the proper concept of using that color, you can use it perfectly. Colors are accepted as as values, or part of their values by many of the Styles. They are accepted as color of background and border. In CSS there are five main ways to specify colors. You will also have to keep in mind that not to use the color names in your code, because they are non-standard. For giving the colors you will either have to use the HEX or RGB values.

[philiboy]

Okay, so color keywords aren't as simple as they appear, but what about numbers - that should be fairly simple, right? Wrong. The CSS 2 specification provides for two ways of specifying colors as numbers:

* RGB
* Hexadecimal RGB

RGB Color Numbers

The format of an RGB color number is:

rgb(red,green,blue);

The red,green,blue are numerical values from 0 to 255 or percentage values from 0% to 100%. So, the color red is written:

rgb(255,0,0)

rgb(100%,0%,0%)

Hexadecimal Color Numbers

Hexadecimal color numbers are also RGB - they are just written differently to allow for differences in how browsers handle the CSS.

Hexadecimal colors are the same RGB color numbers converted to base-16 and written as one long number. Hexadecimal to RGB color charts make this easy to see. They are written:

#RRGGBB

Each pair of the hexadecimal triplet is a number from 00 to FF (base-16), which corresponds to 0 - 255 in decimal. So the color red is written:

#ff0000

CSS 3 Color Numbers

CSS 3 adds some additional complexity to the color numbers. In the CSS 3 recommendation, there is:

* the transparent keyword
* RGBA color values
* HSL color values

The transparent keyword is not exactly new to CSS 3. CSS 1 allowed background-colors to be marked transparent. Then CSS 2 extended it to the border-color property. CSS 3 extends this keyword to use in any property that uses color values including the color property for changing text and foreground colors.

RGBA color values allows you to define the opacity of the color. It is written:

rgba(red,green,blue,opacity)

The final number is an alphavalue ranging from 0.0 to 1.0. A color with an alphavalue of 0.0 is fully transparent and an alphavalue of 1.0 is fully opaque. According to the specification, if the user-agent doesn't support RGBA, it should default to RGB and ignore the alphavalue information. However, in practice, this doesn't happen and the color value is completely ignored.

HSL color values refer to hue-saturation-lightness numerical codes for colors. They were added to solve some specific problems with RGB colors:

* RGB is hardware-oriented. It references CRTs and assumes that color model for displaying the colors. Most professional printers are not RGB based, but CMYK and the translation from screen to print is not always good.
* RGB is non-intuitive. In other words, most people think of colors in reference to the hue (red versus yellow), saturation (grey versus red), or lightness (dark red to red to pink) but RGB forces you to put the colors in a machine-generated way.

Red in HSL would be written:

hsl(0,100%,50%);

HSL also has an alphavalue notation - HSLA - which allows you to specify opacity with this color notation just like RGBA.

HSL is not supported by most browsers, so it's a good idea to just remember this notation for the future.

[greatwillies]

I think there is no need of remembering the color code for the CSS, because when you put the pointer on the color it can show you the code of the color so just copy that and paste it into the CSS coding. So basically its the best way for the development of the CSS.