mccumber03: Colores CSS

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:

0.2

0.4

0.6

0.8

1.0

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:

0.2

0.4

0.6

0.8

1.0

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`

Pages

Colores CSS

No hay comentarios:

Publicar un comentario