CSS Color (RGB)
Los colores en CSS se muestran utilizando un nombre de color predefinido o una combinación de rojo, verde y azul..Los valores de color RGB se puede especificar en porcentaje decimal, hexadecimal o Usando este método, más de 16 millones de colores diferentes se pueden obtener.
Ejemplo:
<div style="background-color:
rgb(255,0,0);">
</div>
La siguiente tabla muestra algunos de los nombres de los colores más comunes y sus equivalentes hexadecimales. Estos nombres de colores son reconocidos por el W3C como "web estándar".
Color
|
Name
|
Hex
|
|
black
|
#000000
|
|
navy
|
#000080
|
|
blue
|
#0000ff
|
|
green
|
#008000
|
|
teal
|
#008080
|
|
lime
|
#00ff00
|
|
aqua
|
#00ffff
|
|
maroon
|
#800000
|
|
purple
|
#800080
|
|
olive
|
#808000
|
|
gray
|
#808080
|
|
silver
|
#c0c0c0
|
|
red
|
#ff0000
|
|
fuchsia
|
#ff00ff
|
|
yellow
|
#ffff00
|
|
white
|
#ffffff
|
CSS Color (RGBA)
La especificación CSS3 añade la posibilidad de especificar el "alfa", o la opacidad de un color. El alfa es especificado como un número decimal entre 0.0 (transparente) y 1,0 (opaco).
Ejemplo:
<div style="background-color:
rgba(255,0,0,0.2);">
</div>
Los siguientes cuadros muestran el color "rojo" en los niveles de alfa diferentes:
CSS Color (HSL)
La especificación CSS3 añade la posibilidad de especificar el color utilizando HSL (matiz, saturación y luminosidad). HSLtiene tres valores:
- Hue es el grado en el círculo cromático: 0= red, 120 = green, 240 is blue
- Saturation es un porcentaje, donde 100% es el color
- Lightness es un porcentaje, donde 0% es oscuro (black) y 100% es la luz (white)
Ejemplo:
<div style="background-color:
hsl(0,100%,50%);">
</div>
Los siguientes cuadros muestran los tres colores básicos para la HSL.:
|
hsl (0,100%,50%)
|
|
hsl (120,100%,50%)
|
|
hsl (240,100%,50%)
|
CSS Color (HSLA)
La especificación CSS3 añade la posibilidad de especificar el color utilizando HSLA (tono, saturación, luminosidad, Alpha).HSLA toma cuatro valores:.
- Hue es el grado en el círculo cromático: 0 = red, 120 = green, 240 is blue
- Saturation es un porcentaje, donde 100% es el color
- Lightness es un porcentaje, donde 0% es oscuro (black) y 100% es la luz (white)
- Alpha es un número decimal entre 0.0 (Trasnparente) y 1.0 (opaco)
Ejemplo
<div style="background-color:
hsla(0,100%,50%,0.2);">
</div>
Los siguientes cuadros muestran el color "red", hsl (0,100%,50%), en los niveles de alfa diferentes:
CSS Nombre de los Colores
La siguiente tabla muestra los nombres de los colores con el apoyo de la mayoría de navegadores y sus equivalentes hexadecimales. A excepción de los que también figuran en el cuadro anterior, los nombres de colores no son reconocidos por el W3C como "web estándar"..
Color
|
Name
|
Hex
|
|
AliceBlue
|
#f0f8ff
|
|
AntiqueWhite
|
#faebd7
|
|
Aqua
|
#00ffff
|
|
Aquamarine
|
#7fffd4
|
|
Azure
|
#f0ffff
|
|
Beige
|
#f5f5dc
|
|
Bisque
|
#ffe4c4
|
|
Black
|
#000000
|
|
BlanchedAlmond
|
#ffebcd
|
|
Blue
|
#0000ff
|
|
BlueViolet
|
#8a2be2
|
|
Brown
|
#a52a2a
|
|
BurlyWood
|
#deb887
|
|
CadetBlue
|
#5f9ea0
|
|
Chartreuse
|
#7fff00
|
|
Chocolate
|
#d2691e
|
|
Coral
|
#ff7f50
|
|
CornflowerBlue
|
#6495ed
|
|
Cornsilk
|
#fff8dc
|
|
Crimson
|
#dc143c
|
|
Cyan
|
#00ffff
|
|
DarkBlue
|
#00008b
|
|
DarkCyan
|
#008b8b
|
|
DarkGoldenRod
|
#b8860b
|
|
DarkGray
|
#a9a9a9
|
|
DarkGreen
|
#006400
|
|
DarkKhaki
|
#bdb76b
|
|
DarkMagenta
|
#8b008b
|
|
DarkOliveGreen
|
#556b2f
|
|
Darkorange
|
#ff8c00
|
|
DarkOrchid
|
#9932cc
|
|
DarkRed
|
#8b0000
|
|
DarkSalmon
|
#e9967a
|
|
DarkSeaGreen
|
#8fbc8f
|
|
DarkSlateBlue
|
#483d8b
|
|
DarkSlateGray
|
#2f4f4f
|
|
DarkTurquoise
|
#00ced1
|
|
DarkViolet
|
#9400d3
|
|
DeepPink
|
#ff1493
|