CSS |颜色

CSS Color 属性用于设置 HTML 元素的颜色。该属性用于设置字体颜色、背景颜色等。

元素的颜色可以通过以下方式定义：

• 内置颜色
• RGB 格式
• RGBA 格式
• 十六进制表示法
• HSL
• HSLA

内置颜色：这些是一组预定义的颜色，按其名称使用。例如：红色、蓝色、绿色等。
句法：

h1 {
    color: color-name;
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

RGB 格式： RGB(Red, Green, Blue) 格式用于通过指定介于 0 到 255 之间的 R、G、B 值来定义 HTML 元素的颜色。例如：红色的 RGB 值为 (255, 0, 0)，绿色是 (0, 255, 0)，蓝色是 (0, 0, 255) 等等。
句法：

h1 {
    color: rgb(R, G, B);
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

RGBA 格式： RGBA 格式与 RGB 类似，但不同的是 RGBA 包含指定元素透明度的 A(Alpha)。 alpha 的值介于 0.0 到 1.0 之间，其中 0.0。表示完全透明，1.0 表示不透明。
句法：

h1 {
    color:rgba(R, G, B, A);
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

十六进制表示法：十六进制表示法以 # 符号开头，后跟 6 个字符，每个字符的范围从 0 到 F。例如：红色 #FF0000、绿色 #00FF00、蓝色 #0000FF 等。
句法：

h1 {
    color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

HSL： HSL 分别代表色相、饱和度和亮度。此格式使用圆柱坐标系。

• 色相：色相是色轮的度数。它的值介于 0 到 360 之间，其中 0 代表红色，120 代表绿色，240 代表蓝色。
• 饱和度：取百分比值，100%代表完全饱和，0%代表完全不饱和(灰色)。
• 明度：取百分比值，100%代表白色，0%代表黑色。

句法：

h1 {
    color:hsl(H, S, L);
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

HSLA： HSLA 颜色属性类似于 HSL 属性，但不同的是 HSLA 包含 A(Alpha)，它指定元素的透明度。 alpha 的值介于 0.0 到 1.0 之间，其中 0.0。表示完全透明，1.0 表示不透明。
句法：

h1 {
    color:hsla(H, S, L, A);
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

文本颜色：用于设置文本的颜色。
句法：

h1 {
    color:color_name;
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

背景颜色：用于设置 HTML 元素的背景颜色。
句法：

h1 {
    background-color:color_name;
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

边框颜色：用于设置元素的边框颜色。 Border-style 用于设置边框类型。
句法：

h1 {
    border-style:solid/dashed/dotted
    border-color:color_name;
}

例子：

    
        
        
    
    
        

            GeeksforGeeks
        
    
                    

输出：

颜色列表：以下是一些 CSS 颜色的列表。

Color Name	Hex(RGB)	Decimal(RGB)	Color
Red	FF0000	255, 0, 0
Pink	FFC0CB	255, 192, 203
Orange	FFA500	255, 165, 0
Yellow	FFFF00	255, 255, 0
Violet	EE82EE	238, 130, 238
Green	008000	0, 128, 0
Aqua	00FFFF	0, 255, 255
Blue	0000FF	0, 0, 255
Brown	A52A2A	165, 42, 42
White	FFFFFF	255, 255, 255
Gray	808080	128, 128, 128
Black	000000	0, 0, 0