Valores de color válidos en CSS

Colores de CSS

Los colores en CSS se pueden especificar de la siguiente manera:

  • Color hexadecimal
  • Color hexadecimal con transparencia
  • El color RGB
  • #p3 {background-color: rgb(0, 0, 255);} /* Blue */
  • HSL color
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • Use currentcolor Palabra clave

Color hexadecimal

Se especifica el color hexadecimal con #RRGGBB, donde RR (rojo), GG (verde) y BB (azul) son enteros hexadecimales que especifican los componentes (componentes) del color. Todos los valores deben estar entre 00 y FF.

Por ejemplo, el valor #0000ff se representa en azul, porque el componente azul se establece en su valor máximo (ff), mientras que los otros componentes se establecen en 00.

实例

Define diferentes colores HEX:

#p1 {background-color: #ff0000;}   /* Rojo */
#p2 {background-color: #00ff00;}   /* Verde */
#p3 {background-color: #0000ff;}   /* Azul */

Prueba personalmente

Color hexadecimal con transparencia

Se especifica el color hexadecimal con #RRGGBB. Para aumentar la transparencia, agrega dos dígitos adicionales entre 00 y FF.

实例

Define un color HEX con transparencia:

#p1a {background-color: #ff000080;}   /* Rojo con transparencia */
#p2a {background-color: #00ff0080;}   /* Verde con transparencia */
#p3a {background-color: #0000ff80;}   /* Azul con transparencia */

Prueba personalmente

El color RGB

El valor de color RGB se compone de La función rgb()specified, the syntax is as follows:

rgb(red, green, blue)

Cada parámetro (red, green, blueDefine la intensidad del color, que puede ser un entero entre 0 y 255 o un porcentaje (desde 0% hasta 100%).

Por ejemplo, el valor rgb(0,0,255) se representa en azul, porque el parámetro blue se establece en su valor máximo (255), mientras que los otros parámetros se establecen en 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

实例

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

Define different RGB colors:
#p1 {background-color: rgb(255, 0, 0);}   /* Red */
#p2 {background-color: rgb(0, 255, 0);}   /* Green */

Prueba personalmente

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

RGBA color

RGBA colors are an extension of RGB color values, they have an Alpha channel - specifying the opacity of the object. rgba() functionspecified, the syntax is as follows:

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

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 */

Prueba personalmente

HSL color

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

Use hsl() functionSpecify the HSL color value, the syntax of the 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, 240 is blue.

Saturation is a percentage value; 0% represents gray shadow, while 100% is full color.

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

实例

Define different HSL colors:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

Prueba personalmente

HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 HSL 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* 带不透明度的柔绿色 */

Prueba personalmente

预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

实例

定义不同的颜色名：

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

Prueba personalmente

所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。

currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

实例

以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Prueba personalmente