CSS Color



CSS Tutorial  >  Color

The color property allows webmasters to define the color of an element in a CSS stylesheet.

This property takes values in the following forms:

  • Hexadecimal code
  • Color name
  • RGB
  • RGBa
  • HSL
  • HSLa

Both RGB and HSL use three numbers to determine the color. RGBa and HSLa add a fourth number to indicate the level of transparency, with 0 being fully transparent, and 1 being fully opaque.

The general syntax for the color property is as follows:

Hexadecimal code:

{color: #XXXXXX;} where XXXXXX is a hexadecimal code.

Color name:

{color: [color_name];} where color_name denotes the name of the color in plain English.

RGB:

{color: rgb (X, Y, Z); }   where X, Y, and Z are numbers between 0 and 255.
    OR
{color: rgb (X%, Y%, Z%); }   where X, Y, and Z are numbers between 0 and 100.

RGBa:

{color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSL:

{color: hsl (X, Y%, Z%); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100.

HSLa:

{color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

Hexadecimal code is a 6-character (or 3-character when the first two, the middle two, and the last two codes of the 6-character presentation are all the same. For example, #FFF and #FFFFFF both mean white) code specifying the color. This hexadecimal color chart shows how hexadecimal codes correspond to the colors they render.

Below are examples showing different ways to specify a color.

CSS DeclarationOutput

p { color:#FF0000; }

FF0000 is red.

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

rgb(255,0,255) is pink.

p { color:green; }

This is green.

Next: CSS Opacity




Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.