CSS legal color values

CSS legal color value

CSS Colors

The color of the CSS can be specified by:

Heteen color
RGB color
RGBA color
HSL color
HSLA color
Predefined/cross-browser color names

Heteen color

All major browsers support hex color values.

Specifies a hetegasic color whose components are: #RRGGBB, where RR (red), GG (green), and BB (blue). All values must be between 0 and FF.

For example, the # 0000FF value Rendered as blue Because The Composition of blue is set to the highest value (ff) and the Other is set to 0.

p
{
background-color:#ff0000;
}

Try it out . . .

RGB color

RGB color values are supported in all major browsers.

RGB color value specified: RGB (red, green, blue). Each parameter (red, green, and blue) defines the brightness of the color, which can be between 0 and 255, or an integer between a percentage value (from 0% to 100%).

For example, the RGB (0,0,255) value is rendered blue because the blue parameter is set to the highest value (255) and the other is set to 0.

In addition, the following values define the same color: RGB (0,0,255), RGB (0%, 0%, 100%).

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

Try it out . . .

RGBA color

RGBA color values are supported by IE9, Firefox 3 plus, Chrome, Safari, and Opera10 Plus.

The RGBA color value is an extension of the RGB color value alpha channel - specifying the transparency of the object.

RGBA color value specified: RGBA (red, green, blue, alpha). The alpha parameter is a parameter between 0.0 (completely transparent) and 1.0 (completely opaque).

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

Try it out . . .

HSL color

IE9, Firefox, Chrome, Safari, and Opera 10 plus. Support HSL color values.

HSL stands for Phase, Saturation, and Brightness - represented by color cylindrical coordinates.

HSL color value specified: HSL (tone, saturation, brightness).

The degree to which the phase is on the color wheel (from 0 to 360)-0 (or 360) is red, 120 is green, and 240 is blue. S aturation is a percentage value; 0% means gray and 100% shadow, which is full color. The brightness is also one percentage point; 0% is black and 100% white.

p
{
background-color:hsl(120,65%,75%);
}

Try it out . . .

HSLA color

HSLA color values are supported by IE9, Firefox 3 plus, Chrome, Safari, and Opera10 plus.

The color value of the HSLA is an extension of the HSL color value with alpha channel - the transparency of the specified object.

Specify HSLA color values: HSLA (tone, saturation, brightness, α), α is an opacity defined by the Alpha parameter. The alpha parameter is a parameter between 0.0 (completely transparent) and 1.0 (completely opaque).

p
{
background-color:hsla(120,65%,75%,0.3);
}

Try it out . . .

Predefined/cross-browser color names

147 is a predefined color name in HTML and CSS color specifications. You can view our list of predefined color names.

Table of contents