Valores de color legales de CSS
Colores CSS
Los colores en CSS se pueden especificar mediante los siguientes métodos:
- colores hexadecimales
- Colores hexadecimales con transparencia
- colores RGB
- colores RGBA
- Colores HSL
- colores HSLA
- Nombres de colores predefinidos/entre navegadores
- con la
currentcolorpalabra clave
Colores hexadecimales
Un color hexadecimal se especifica con: #RRGGBB, donde los enteros hexadecimales RR (rojo), GG (verde) y BB (azul) especifican los componentes del color. Todos los valores deben estar entre 00 y FF.
Por ejemplo, el valor #0000ff se representa como azul, porque el componente azul se establece en su valor más alto (ff) y los demás se establecen en 00.
Ejemplo
Defina diferentes colores HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Colores hexadecimales con transparencia
Un color hexadecimal se especifica con: #RRGGBB. Para agregar transparencia, agregue dos dígitos adicionales entre 00 y FF.
Ejemplo
Defina diferentes colores HEX con transparencia:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Colores RGB
Un valor de color RGB se especifica con la función rgb() , que tiene la siguiente sintaxis:
rgb(red, green, blue)
Cada parámetro (rojo, verde y azul) define la intensidad del color y puede ser un número entero entre 0 y 255 o un valor porcentual (de 0% a 100%).
Por ejemplo, el valor rgb(0,0,255) se representa como azul, porque el parámetro azul se establece en su valor más alto (255) y los demás se establecen en 0.
Además, los siguientes valores definen el mismo color: rgb(0,0,255) y rgb(0%,0%,100%).
Ejemplo
Defina diferentes colores RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Colores RGBA
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad del objeto.
Un color RGBA se especifica con la función rgba() , que tiene la siguiente sintaxis:
rgba(red, green, blue, alpha)
El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo
Defina diferentes colores RGB con opacidad:
#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 */
Colores HSL
HSL significa tono, saturación y luminosidad, y representa una representación de colores en coordenadas cilíndricas.
Un valor de color HSL se especifica con la función hsl() , que tiene la siguiente sintaxis:
hsl(hue, saturation, lightness)
El tono es un grado en la rueda de colores (de 0 a 360): 0 (o 360) es rojo, 120 es verde, 240 es azul. La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo. La ligereza también es un porcentaje; 0% es negro, 100% es blanco.
Ejemplo
Defina diferentes colores HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Colores HSLA
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad del objeto.
Un valor de color HSLA se especifica con la función hsla() , que tiene la siguiente sintaxis:
hsla(hue, saturation, lightness, alpha)
El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo
Defina diferentes colores HSL con opacidad:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Nombres de color predefinidos/de navegador cruzado
140 nombres de colores están predefinidos en la especificación de colores HTML y CSS.
Por ejemplo: blue, red, coral, brown, etc:
Ejemplo
Defina diferentes nombres de colores:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Puede encontrar una lista de todos los nombres predefinidos en nuestra Referencia de nombres de color .
La palabra clave de color actual
La currentcolorpalabra clave se refiere al valor de la propiedad de color de un elemento.
Ejemplo
El color del borde del siguiente elemento <div> será azul, porque el color del texto del elemento <div> es azul:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}