CSS valid color values

CSS Colors

Colors in CSS can be specified in the following ways:

  • Hexadecimal color
  • HEX color with transparency
  • RGB color
  • RGBA color
  • HSL color
  • HSLA color
  • Predefined/cross-browser color names
  • Using currentcolor Keywords

Hexadecimal color

Specify a hexadecimal color using #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal integers that specify the color components (components). All values must be between 00 and FF.

For example, the value #0000ff is displayed as blue because the blue component is set to the maximum value (ff), while the other components are set to 00.

Example

Define different HEX colors:

#p1 {background-color: #ff0000;}   /* Red */
#p2 {background-color: #00ff00;}   /* Green */
#p3 {background-color: #0000ff;}   /* Blue */

Try It Yourself

HEX color with transparency

Specify a hexadecimal color using #RRGGBB. To increase transparency, add two additional numbers between 00 and FF.

Example

Define a HEX color with transparency:

#p1a {background-color: #ff000080;}   /* Red with transparency */
#p2a {background-color: #00ff0080;}   /* Green with transparency */
#p3a {background-color: #0000ff80;}   /* Blue with transparency */

Try It Yourself

RGB color

RGB color values are determined by rgb() functiondefined, the syntax is as follows:

rgb(red, green, blue)

Each parameter (red, green, blueDefine the intensity of the color, which can be an integer or a percentage value between 0 and 255 (from 0% to 100%).

For example, the value rgb(0,0,255) is displayed as blue because the blue parameter is set to its maximum value (255), while the other parameters are set to 0.

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

Example

Define different RGB colors:

#p1 {background-color: rgb(255, 0, 0);}   /* Red */
#p2 {background-color: rgb(0, 255, 0);}   /* Green */
#p3 {background-color: rgb(0, 0, 255);}   /* Blue */

Try It Yourself

RGBA color

RGBA color values are an extension of RGB color values, with an Alpha channel - specifying the opacity of the object.

RGBA color through rgba() functiondefined, the syntax is as follows:

rgba(red, green, blue, alpha)

alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Example

Define different RGB colors with opacity:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Blue with opacity */

Try It Yourself

HSL color

HSL stands for hue (hue), saturation (saturation), and lightness (lightness) - the cylindrical coordinate representation of color.

Using hsl() functionSpecify the HSL color value, the syntax of this function is as follows:

hsl(hue, saturation, lightness)

Hue is the degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, and 240 is blue.

Saturation is a percentage value; 0% represents grayscale, and 100% is full color.

Brightness is also a percentage; 0% is black, and 100% is white.

Example

Define different HSL colors:

#p1 {background-color: hsl(120, 100%, 50%);}   /* Green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* Light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* Deep green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Soft green */

Try It Yourself

HSLA color

HSLA color

The HSLA color value is an extension of the HSL color value, which includes an Alpha channel - specifying the opacity of the object. hsla() functionSpecify, the syntax of this function is as follows:

hsla(hue, saturation, lightness, alpha)

alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Example

Define different HSL colors with opacity:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Semi-transparent green */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Semi-transparent light green */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Semi-transparent dark green */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Semi-transparent soft green */

Try It Yourself

Predefined/cross-browser color names

140 predefined color names are predefined in the HTML and CSS color specifications.

For example:blue、red、coral、brown such as:

Example

Define different color names:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Try It Yourself

You can find a list of all predefined names in our Color Reference Manual.

currentcolor keyword

currentcolor Reference the color attribute value of the element by the keyword.

Example

The border color of the following <div> element will be blue because the text color of the <div> element is blue:

#myDIV {
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}

Try It Yourself