Tutorial de colores
Los colores se muestran combinando luz ROJA (RED), VERDE (GREEN) y AZUL (BLUE).
Nombres de colores
Con CSS, los colores se pueden establecer mediante el uso de nombres de color:
Valores de color CSS
Con CSS, los colores se pueden especificar de diferentes maneras:
- Por nombres de color
- Como valores RGB
- Como valores hexadecimales
- Como valores HSL (CSS3)
- Como valores HWB (CSS4)
- Con la palabra clave
currentcolor
Colores RGB
Los valores de color RGB son compatibles con todos los navegadores.
Un valor de color RGB se especifica con: rgb( RED , GREEN , BLUE ).
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.
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 hexadecimal también son compatibles con todos los navegadores.
Un color hexadecimal se especifica con: #RRGGBB.
RR (red-rojo), GG (green-verde) y BB (blue-azul) son números enteros hexadecimales entre 00 y FF que especifican la intensidad del color.
Por ejemplo, #0000FF se muestra en azul, ya que 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 color estándar.
En el siguiente capítulo, encontrará una lista alfabética completa de nombres de colores con valores hexadecimales:
| Nombre del color | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
La palabra clave currentcolor
La palabra clave currentcolor hace referencia al valor de la propiedad 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; /* Color de texto azul */
border: 10px solid currentcolor; /* Color del borde azul */
}
Try it Yourself »
