Tutorial de colores
Los colores se muestran combinando luz ROJA, VERDE y AZUL.
Nombres de colores
Con CSS, los colores se pueden configurar usando nombres de color:
Ejemplo
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Valores de color CSS
Con CSS, los colores se pueden especificar de diferentes maneras:
- Por nombres de colores
- Como valores RGB
- Como valores hexadecimales
- Como valores HSL (CSS3)
- Como valores HWB (CSS4)
- con la
currentcolorpalabra clave
Colores RGB
Los valores de color RGB son compatibles con todos los navegadores.
Un valor de color RGB se especifica con: rgb( ROJO , VERDE , AZUL ).
Cada parámetro define la intensidad del color como un número entero entre 0 y 255.
Por ejemplo, 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.
Ejemplo
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes de luz:
Ejemplo
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Colores hexadecimales
Los valores de color hexadecimales también son compatibles con todos los navegadores.
Un color hexadecimal se especifica con: # RR GG BB .
RR (rojo), GG (verde) y BB (azul) son números enteros hexadecimales entre 00 y FF que especifican la intensidad del color.
Por ejemplo, #0000FF se muestra como azul, porque el componente azul se establece en su valor más alto (FF) y los demás se establecen en 00.
Ejemplo
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes de luz:
Ejemplo
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
¿Mayúsculas o minúsculas?
Puede utilizar letras mayúsculas o minúsculas para especificar valores hexadecimales.
Las minúsculas son más fáciles de escribir. Las mayúsculas son más fáciles de leer.
Nombres de colores
CSS admite 140 nombres de colores estándar.
En el próximo capítulo encontrará una lista alfabética completa de nombres de colores con valores hexadecimales:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
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 */
}