CSS Colors

CSS colors are most important for style. In css colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Using Color names

In CSS, a color can be specified by using a predefined color name, like

p{
   color:red; 
   background-color:teal;
}

CSS/HTML support 140 standard color names

Using Hex

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

p{
   color:#313131; 
   background-color:#c7c7c7;
}

3 Digit HEX Value

The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each components. So, if we have #ff00cc, it can be written like this: #f0c.

p{
   color:#f0c; 
   background-color:#000;
}

Using RGB

An RGB color value represents RED, GREEN, and BLUE light sources.

RGB Value

In CSS, a color can be specified as an RGB value, using this formula: rgb(red, greenblue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

p{
   color:rgb(0, 255, 255); 
   background-color:rgb(255, 255, 0);
}

Using RGBA

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, greenblue, alpha)

An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

p{
   color:rgba(0, 255, 255,0.5); 
   background-color:rgba(255, 99, 71, 0.5);
}

Using HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(huesaturationlightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

body{

   background-color:hsl(147, 50%, 47%);
}

see this for more idea: https://clarle.github.io/yui3/yui/docs/color/hsl-picker.html

Previous: CSS Backgrounds

Next: Manipulating Texts and Fonts

Leave a Comment

Copy link
Powered by Social Snap