CSS gray

1. Introduction

2. Grayscale Representations

In CSS, grayscale can be represented in a variety of ways. Common methods include using grayscale values, RGB values, and hexadecimal values.

2.1 Grayscale value representation

A grayscale value is a number between 0 and 1, indicating the degree of gray. 0 represents complete black, and 1 represents complete white.

Sample code:

.gray-50 {
color: gray(0.5); /* Grayscale value is 0.5 */
}

.gray-80 {
color: gray(0.8); /* Grayscale value is 0.8 */
}

Running results:

• .gray-50‘s text color is gray with a grayscale value of 0.5;
• .gray-80‘s text color is gray with a grayscale value of 0.8.

2.2 RGB Value Representation

RGB (Red, Green, Blue) is a color representation method that combines the three primary colors: red, green, and blue. In CSS, RGB values ​​are represented using the rgb() function. When the values ​​of the three primary colors are the same, gray is obtained.

Sample code:

.gray-128 {
color: rgb(128, 128, 128); /* RGB value is (128, 128, 128) */ 
} 

.gray-200 {
color: rgb(200, 200, 200); /* RGB value is (200, 200, 200) */ 
} 

Running results:

• .gray-128 uses a gray color with an RGB value of (128, 128, 128);
• .gray-200 uses a gray color with an RGB value of (200, 200, 200).

2.3 Hexadecimal Value Representation

In CSS, you can also use hexadecimal values ​​to represent colors. Each hexadecimal value represents a color component, with FF representing the maximum value and 00 representing the minimum value. When the values ​​of all three color components are the same, the color is gray.

Sample Code:

.gray-333 {
color: #333; /* Hexadecimal value is #333 */
}

.gray-999 {
color: #999; /* Hexadecimal value is #999 */
}

Running Results:

• .gray-333 displays the gray color with the hexadecimal value of #333;
• .gray-999 displays the gray color with the hexadecimal value of #999.

3. Gray Applications

Gray has a variety of applications in web design. Below are some common uses.

3.1 Text Color

Using gray as text can add a sense of stability to a page and is suitable for displaying large sections of text.

Sample code:

p {
color: gray(0.5); /* Sets the text color to gray with a grayscale value of 0.5 */
}

Running result:

• The text color of all <p> elements is gray with a grayscale value of 0.5.

3.2 Background Color

Using gray as the background color can add a sense of simplicity and elegance to a page, and is particularly suitable for containers displaying https://coder-cafe.com/wp-content/uploads/2025/09/images, text, and other content.

Sample Code:

.container {
background-color: rgb(200, 200, 200); /* The background color is gray with an RGB value of (200, 200, 200) */ 
} 

Running Results:

• The background color of all elements with class="container" is gray with an RGB value of (200, 200, 200).

3.3 Border Color

Using gray as a border color can add a sense of boundary to an element, which is commonly seen in elements such as buttons and input boxes.

Sample Code:

button {
border: 2px solid gray(0.8); /* Border color is gray with a grayscale value of 0.8 */ 
} 

Running Result:

• The border color of all button elements is gray with a grayscale value of 0.8.

4. Choosing Gray

When using gray, you need to choose different shades of gray based on your needs. Dark gray is usually used for accent elements, while light gray is usually used for backgrounds or secondary content.

5. Summary

In CSS, gray can be represented using grayscale values, RGB values, and hexadecimal values. Gray is widely used in web design, such as text color, background color, and border color. Choosing different shades of gray according to actual needs can help us achieve better visual effects.