CSS color codes

CSS Color Codes

In web development, use Color Names

CSS has predefined color names that can be used directly in style sheets to represent colors. For example:

p { 
color: red; 
} 

In the code above, the color property is set to red, indicating that the paragraph text is red. In addition to red, CSS also uses common color names such as blue, green, and black.

Hexadecimal Color Codes

In addition to color names, you can also use hexadecimal color codes to represent colors. A hexadecimal color code consists of a # symbol followed by six hexadecimal digits, with each two digits representing the component of the three primary colors: red, green, and blue. For example:

p { 
color: #ff0000; /* red */ 
} 

In the code above, #ff0000 represents red.

RGB Values

Another way to represent colors is using RGB values. RGB represents the values ​​of the three primary colors (red, green, and blue), and ranges from 0 to 255. You can use the rgb() function to represent colors, as shown below:

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

In the code above, rgb(255, 0, 0) represents red.

RGBA Values

In addition to RGB values, you can also add a transparency value to represent semi-transparent colors. RGBA represents the values ​​of the three primary colors (red, green, and blue) plus a transparency value, and ranges from 0 to 1. An example is as follows:

p { 
color: rgba(255, 0, 0, 0.5); /* translucent red */ 
} 

In the code above, rgba(255, 0, 0, 0.5) represents a semi-transparent red.

HSL Values

In addition to RGB, you can also use HSL (hue, saturation, lightness) values ​​to represent colors. HSL values ​​consist of three parameters: hue, saturation, and lightness, with ranges of 0-360, 0%-100%, and 0%-100%, respectively. An example is as follows:

p { 
color: hsl(0, 100%, 50%); /* Red */ 
} 

In the code above, hsl(0, 100%, 50%) represents red.

HSLA Values

In addition to HSL values, you can also add a transparency value to represent semi-transparent colors. HSLA consists of four parameters: hue, saturation, brightness, and transparency. An example is shown below:

p {
color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */ 
} 

In the code above, hsla(0, 100%, 50%, 0.5) represents a semi-transparent red.

Usable Color Code Comparison Table

Below are some commonly used color codes and their corresponding color values:

• Red: #ff0000 or rgb(255, 0, 0) or hsl(0, 100%, 50%)
• Green: #00ff00 or rgb(0, 255, 0) or hsl(120, 100%, 50%)
• Blue: #0000ff or rgb(0, 0, 255) or hsl(240, 100%, 50%)
• Yellow: #ffff00 or rgb(255, 255, 0) or hsl(60, 100%, 50%)
• Purple: #800080 or rgb(128, 0, 128) or hsl(300, 100%, 25%)

Using the above color codes, you can easily control the colors of web page elements, creating a colorful interface effect.

In summary, there are many ways to represent colors in CSS, including color names, hexadecimal color codes, RGB values, RGBA values, HSL values, and HSLA values. By flexibly using these color codes, you can easily create a variety of colorful web page effects.