Manual de HTML5 y CSS3

[11]
Unidades y Colores en CSS

[8.1] unidades relativas y absolutas

CSS proporciona en realidad dos tipos de medidas: absolutas y relativas. Las absolutas utilizan magnitudes que se indican de forma independientes. El caso más claro es usar como unidad de medida el píxel.

Si por ejemplo indicamos que el texto tenga un tamaño de 12px, ocupará 12 píxeles, independientemente del medio, o de las características de la letra base.

Las unidades absolutas producen efectos no deseados: 12 píxeles puede ser un tamaño suficiente para un dispositivo de poca resolución, como un móvil de 480x320 píxeles de pantalla; pero en un dispositivo de alta calidad, como por ejemplo un iPad retina por ejemplo, sería un tamaño apenas legible en esa pantalla que tiene más de 300 píxeles por pulgada (12 píxeles ocupan muy poco tamaño).

Por contra, las unidades relativas hacen que el tamaño de la letra no dependa de la resolución sino de un tamaño base. Ese tamaño base depende en cada dispositivo (se supone que se adapta de forma apropiada al dispositivo) con la finalidad de que los elementos de la página se adapten a dicho dispositivo.

La desventaja de las unidades relativas es que ya no disponemos de la posibilidad de saber con exactitud el tamaño de un elemento; medirá más o menos según el tamaño base que se esté utilizando en cada dispositivo de usuario. En realidad hoy en día es una gran ventaja, ya que estamos obligados a diseñar de forma adaptativa (responsive design), pero es difícil de utilizar.

[8.1.1]unidades absolutas de medida

Esta es la lista de las unidades de medida utilizables en CSS:

in. Pulgadas. Medida muy habitual en el mundo anglosajón, equivale a 25,4 milímetros.
cm. Centímetros. No son muy útiles en la pantalla, pero sí en medios de impresión
mm. Milímetros.
pt. Puntos. Muy utilizada en tipografía. Un punto tipográfico equivale a 1/72 pulgadas. Debido a la popularidad de los procesadores de texto (que usan esta unidad de medida por defecto), es una medida que, referida a la letra, la mayoría de las personas conocen.
pc. Pica. Una pica la forman doce puntos. Seis picas es una pulgada.
px. Píxeles. Esta medida es relativa respecto al dispositivo de salida. Ya que en cada dispositivo el tamaño del píxel varía. Se usa mucho en elementos grandes (capas, tablas, ….)

Para tener una percepción más directa de la relación entre unidades absolutas y relativas, podemos acudir a la dirección:

http://www.w3schools.com/cssref/css_pxtoemconversion.asp

[8.1.2]unidades relativas de medida

em. Tamaño relativo de letra. Toma el tamaño de la M mayúscula como base. Así por ejemplo si indicamos 2em, nuestro tamaño de letra será el doble de lo que ocupa la letra M mayúscula del tamaño base. Hoy en día es la forma recomendada para indicar medidas en el diseño de páginas web. Esta unidad toma como tamaño base, el del elemento padre del actual.
Por ejemplo, si indicamos:
<style>
small{
font-size:2em;
}

</style>
</head>
<body>
<h1>Título <small>Letra pequeña</small></h1>
</body>
Como tamaño base de small, se tomará el tamaño por defecto de la letra de h1 y por lo tanto, se obtiene:
La letra pequeña es el doble de grande que la normal del título, ya que se toma como base el tamaño de letra del elemento h1.
ex. Tamaño relativo respecto a la letra equis minúscula (x). Así 2x indica que el tipo de letra aumenta hasta ocupar el doble la letra x mayúscula. Con 0.5x ocuparía la mitad
ch. Altura relativa al número cero (0) en la tipografía actual. No se debe utilizar, ya que la mayoría de navegadores no le reconoce y no aporta ninguna ventaja sobre las dos medidas anteriores.
%. Porcentaje. Es relativo respecto del tamaño del elemento padre del elemento al que le ponemos esta medida. Así 50% para una tabla dentro del elemento body ocuparía la mitad de la pantalla, pero dentro de una capa ocuparía la mitad del tamaño de la capa. Para una letra, si indicamos un 50%, la letra será la mitad de alta respecto al tamaño base del elemento en el que nos encontramos.
rem. Es muy exitosa actualmente, ya que elimina algunos problemas que tienen los diseñadores al utilizar em como unidad de medida. Lo malo es que no funciona en navegadores antiguos (requiere Internet Explorer 8 o superior y en los demás navegadores una versión bastante actualizada). Se basa en un tamaño relativo respecto de la raíz del documento (root em). Es decir funciona como la unidad em, pero tomando como base de la fuente la letra asignada por defecto a la raíz (al elemento html).
Ejemplo:
<style>
small{
font-size:2rem;
}

</style>
</head>
<body>
<h1>Título <small>Letra pequeña</small></h1>
</body>
Se obtiene:
Ahora la letra pequeña es del mismo tamaño, ya que se utiliza como base es el de la raíz de la página (elemento html) y esa base será la misma para todos los elementos. Como el elemento h1 tiene por defecto una letra de tamaño 2em, el tamaño de small y de h1 es el mismo.
vw. Es una medida muy moderna (sólo los navegadores más actualizados la reconocen) que equivale al 1% del tamaño del ancho del área visible de la página (el llamado viewport). Aporta como ventaja el hecho de que se tiene en cuenta lo que mide el dispositivo, lo que le hace una medida relativa de verdadera objetividad.
vh. Como la anterior, pero se refiere al 1% de la altura total del área visible de la página.
vmin. Usa la menor medida entre vw y vh.
vmax. Usa la mayor medida entre vw y vh.
[8.1.3]problemas de relatividad

Como la recomendación actual es que las páginas se adapten al dispositivo que las está viendo, se recomienda usar tamaños relativos. La unidad más recomendable a usar es em, por la precisión que tiene. El tamaño de la letra indicado con em (como se ha explicado en el apartado anterior) es relativo al contenedor, es decir toma el tamaño que tiene el elemento que contiene a aquel sobre el que indicamos el tamaño y a partir de él se recalcula el nuevo tamaño.

Esto se entiende mejor con un ejemplo:

<style>

	body{

		font-size:20px;

h1{

		font-size:2em;

	span{

		font-size:1.4em;

</style>

<body>

  <h1>Soy texto titular<span> y yo también</span></h1>

  <span>Yo no</span>

</body>

Sorprendentemente el resultado de este código es:

Donde se observa que el texto y yo también aparece incluso más grande que el resto de la etiqueta h1 (aunque el tamaño de h1 es 2em y el de span es 1.4em)

La razón es que, como em expresa tamaños relativos al contenedor, h1 tiene como contenedor a body y por ello el tamaño de la letra de h1 es de 40 píxeles. Como span tiene como contenedor a h1, se multiplica 1,4 · 40 y así el texto y yo también ocupará 56 píxeles.

Sin embargo el texto yo no, que está también dentro de un elemento de tipo span, se muestra con un tamaño de 28 píxeles al ser su contenedor la etiqueta body.

Debido a la complejidad de las páginas web actuales. Esa forma de funcionar de la unidad em, puede dar lugar a dificultades para diseñar la página web. Por ello se incorporó la unidad rem, que, aun siendo relativa, establece como base el tamaño por defecto de la página (lo que se fije para el documento html completo).

Así, si modificamos el ejemplo anterior:

<style>

	html{

		font-size:20px;

h1{

		font-size:2rem;

	span{

		font-size:1.4rem;

</style>

<body>

  <h1>Soy texto titular<span> y yo también</span></h1>

  <span>Yo no</span>

</body>

Con ese código se obtiene el resultado:

Los textos de las dos etiquetas span son iguales (serán de 28 píxeles) ya que la unidad rem toma como base el tamaño de la letra raíz (en el código de ejemplo redefinida a 20 píxeles).

Podemos combinar ambas medidas en el mismo documento. Por otro lado hay que recordar que, mientras que la unidad em es aceptada casi por cualquier navegador, rem todavía no es reconocida por muchos navegadores.

[8.2] unidades para ángulos

deg. Grados. Valores de grados donde 360 sería un giro completo.
rad. Radianes, también utilizada para ángulos. 360º son 2Π radianes.
grad. Gradianes. 400 gradianes son 360º.
turn. También para ángulos. Indica vueltas, una vuelta serían 360 grados. 0.5turn es media vuelta (o sea 180º). Sólo Firefox y Internet Explorer a partir de la versión 9, reconocen esta unidad
[8.3] unidades para tiempo

Se usan por ejemplo en transiciones y animaciones.

s. Segundos. Se usa para indicar intervalos de tiempo
ms. Milisegundos
[8.4] otras unidades
Hz. Hertzios. Usada para indicar frecuencias (para indicar valores de sonido o voz)
KHz. Kilohertzios.
dpi. Puntos por pulgada. Se usa para indicar resoluciones (para especificar, por ejemplo, la resolución mínima del dispositivo que debe tener para mostrar los estilos)
dpcm. Tiene la misma utilidad que la anterior, pero indica puntos por centímetro.
dppx. Puntos por píxel.
[8.5] indicación de colores en CSS

Hay numerosas etiquetas con capacidad de mostrar colores. Para indicar un color, CSS dispone de estas posibilidades:

Notación hexadecimal. Se trata de la notación más utilizada en CSS. Consiste en una cifra hexadecimal, precedida del símbolo #. Las dos primeras cifras hexadecimales indican el nivel de rojo, las dos siguientes el nivel de verde y las dos últimas de verde; por ejemplo #FF0000 es el código del rojo puro. Ejemplo1:

color	código hexadecimal	código RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

Mediante función RGB. Consiste en usar el la función rgb(r,g,b) donde r es el nivel de rojo (entre 0 y 255), r es el nivel de rojo y b el de azul. Ejemplo:
font-color:rgb(255,0,0);
/* Color de fuente rojo */
Mediante RGB con porcentaje. Funciona como la anterior, pero el nivel re rojo, verde y azul se indican con tanto por ciento. Ejemplo:
font-color:rgb(50%,25%,12%);
/*el color es un rojo anaranjado*/
Mediante función RGB y transparencia. Permite utilizar una función llamada rgba que funciona como la función rgb, pero que añade un cuarto parámetro que es un valor de transparencia (conocido como parámetro alpha). Este parámetro puede tener un valor entre 0 (transparencia total y 1.0 opacidad total). De modo que el color se funde con el fondo. Es parte de CSS3 y sólo está disponible en las últimas versiones de los navegadores. Ejemplo:
font-color:rgba(50%,25%,12%,.5);
/*el color es un rojo anaranjado con 50% de transparencia*/
Mediante función hsl. Permite seleccionar colores utilizando tres valores:
- Tono (Hue). Un valor de 0 a 360 que indica el giro en la rueda de colores. Por ejemplo el cero es el rojo, el 120 el verde y el 240 el azul.
- Saturación. Un número del 0% al 100%, que indica el nivel de saturación. Más saturación indica un color más vivo. Una saturación del 0% significa pasar el color a escala de grises.
- Luminosidad. Un número del 0% al 100%. Indica el nivel de luminosidad del color: más luminoso significa más claridad para el color (0% significa negro).
Este modo está disponible en los últimos navegadores compatibles con CS3. Es el modelo más parecido a la forma que tiene el ser humano de percibir el color, pero no se utiliza mucho dentro de las páginas web.
Mediante función hsla. Añade la función anterior un cuarto valor (un número decimal entre 0.0 y 1.0) que sirve para indicar transparencia.

Por el nombre. Permite indicar el color por su nombre estándar Hay diecisiete colores estándares para especificar colores son:

Color	Nombre	Código Hexadecimal
	White	#FFFFFF
	Silver	#C0C0C0
	Gray	#808080
	Black	#000000
	Red	#FF0000
	Maroon	#800000
	Yellow	#FFFF00
	Olive	#808000
	Lime	#00FF00
	Green	#008000
	Aqua	#00FFFF
	Teal	#008080
	Blue	#0000FF
	Navy	#000080
	Fuchsia	#FF00FF
	Purple	#800080

Estos colores se reconocen por cualquier navegador web. Además la especificación CSS 3 referente a los colores (CSS3 color module), reconoce los colores X11. Esta lista de colores se creó para el sistema X Windows de Unix y se fue adoptando por los navegadores y por diversos lenguajes gráficos (como SVG). En la actualidad son reconocidos por las mayoría de navegadores.

Hay diferencias entre el original X11 y la recomendación de nombres estándar de la W3C (que es la adoptada en CSS3).
La lista completas de nombres de colores es:

Color	Name	Hexadecimal	Modo RGB	Modo HSL
	Alice Blue	#F0F8FF	rgb(94%,97%,100%)	hsl(208,100%,97%)
	Antique White	#FAEBD7	rgb(98%,92%,84%)	hsl(34,78%,91%)
	Aqua	#00FFFF	rgb(0%,100%,100%)	hsl(180,100%,50%)
	Aquamarine	#7FFFD4	rgb(50%,100%,83%)	hsl(160,100%,75%)
	Azure	#F0FFFF	rgb(94%,100%,100%)	hsl(180,100%,97%)
	Beige	#F5F5DC	rgb(96%,96%,86%)	hsl(60,56%,91%)
	Bisque	#FFE4C4	rgb(100%,89%,77%)	hsl(33,100%,88%)
	Black	#000000	rgb(0%,0%,0%)	hsl(0,0%,0%)
	Blanched Almond	#FFEBCD	rgb(100%,92%,80%)	hsl(36,100%,90%)
	Blue	#0000FF	rgb(0%,0%,100%)	hsl(240,100%,50%)
	Blue Violet	#8A2BE2	rgb(54%,17%,89%)	hsl(271,76%,53%)
	Brown	#A52A2A	rgb(65%,16%,16%)	hsl(0,59%,41%)
	Burlywood	#DEB887	rgb(87%,72%,53%)	hsl(34,57%,70%)
	Cadet Blue	#5F9EA0	rgb(37%,62%,63%)	hsl(182,26%,50%)
	Chartreuse	#7FFF00	rgb(50%,100%,0%)	hsl(90,100%,50%)
	Chocolate	#D2691E	rgb(82%,41%,12%)	hsl(25,75%,47%)
	Coral	#FF7F50	rgb(100%,50%,31%)	hsl(16,100%,66%)
	Cornflower	#6495ED	rgb(39%,58%,93%)	hsl(219,79%,66%)
	Cornsilk	#FFF8DC	rgb(100%,97%,86%)	hsl(48,100%,93%)
	Crimson	#DC143C	rgb(86%,8%,24%)	hsl(348,83%,47%)
	Cyan	#00FFFF	rgb(0%,100%,100%)	hsl(180,100%,50%)
	Dark Blue	#00008B	rgb(0%,0%,55%)	hsl(240,100%,27%)
	Dark Cyan	#008B8B	rgb(0%,55%,55%)	hsl(180,100%,27%)
	Dark Goldenrod	#B8860B	rgb(72%,53%,4%)	hsl(43,89%,38%)
	Dark Gray	#A9A9A9	rgb(66%,66%,66%)	hsl(0,0%,66%)
	Dark Green	#006400	rgb(0%,39%,0%)	hsl(120,100%,20%)
	Dark Khaki	#BDB76B	rgb(74%,72%,42%)	hsl(56,38%,58%)
	Dark Magenta	#8B008B	rgb(55%,0%,55%)	hsl(300,100%,27%)
	Dark Olive Green	#556B2F	rgb(33%,42%,18%)	hsl(82,39%,30%)
	Dark Orange	#FF8C00	rgb(100%,55%,0%)	hsl(33,100%,50%)
	Dark Orchid	#9932CC	rgb(60%,20%,80%)	hsl(280,61%,50%)
	Dark Red	#8B0000	rgb(55%,0%,0%)	hsl(0,100%,27%)
	Dark Salmon	#E9967A	rgb(91%,59%,48%)	hsl(15,72%,70%)
	Dark Sea Green	#8FBC8F	rgb(56%,74%,56%)	hsl(120,25%,65%)
	Dark Slate Blue	#483D8B	rgb(28%,24%,55%)	hsl(248,39%,39%)
	Dark Slate Gray	#2F4F4F	rgb(18%,31%,31%)	hsl(180,25%,25%)
	Dark Turquoise	#00CED1	rgb(0%,81%,82%)	hsl(181,100%,41%)
	Dark Violet	#9400D3	rgb(58%,0%,83%)	hsl(282,100%,41%)
	Deep Pink	#FF1493	rgb(100%,8%,58%)	hsl(328,100%,54%)
	Deep Sky Blue	#00BFFF	rgb(0%,75%,100%)	hsl(195,100%,50%)
	Dim Gray	#696969	rgb(41%,41%,41%)	hsl(0,0%,41%)
	Dodger Blue	#1E90FF	rgb(12%,56%,100%)	hsl(210,100%,56%)
	Firebrick	#B22222	rgb(70%,13%,13%)	hsl(0,68%,42%)
	Floral White	#FFFAF0	rgb(100%,98%,94%)	hsl(40,100%,97%)
	Forest Green	#228B22	rgb(13%,55%,13%)	hsl(120,61%,34%)
	Fuchsia	#FF00FF	rgb(100%,0%,100%)	hsl(300,100%,50%)
	Gainsboro	#DCDCDC	rgb(86%,86%,86%)	hsl(0,0%,86%)
	Ghost White	#F8F8FF	rgb(97%,97%,100%)	hsl(240,100%,99%)
	Gold	#FFD700	rgb(100%,84%,0%)	hsl(51,100%,50%)
	Goldenrod	#DAA520	rgb(85%,65%,13%)	hsl(43,74%,49%)
	Gray	#808080	rgb(50%,50%,50%)	hsl(0,0%,50%)
	Green (W3C)	#008000	rgb(0%,50%,0%)	hsl(120,100%,25%)
	Green Yellow	#ADFF2F	rgb(68%,100%,18%)	hsl(84,100%,59%)
	Honeydew	#F0FFF0	rgb(94%,100%,94%)	hsl(120,100%,97%)
	Hot Pink	#FF69B4	rgb(100%,41%,71%)	hsl(330,100%,71%)
	Indian Red	#CD5C5C	rgb(80%,36%,36%)	hsl(0,53%,58%)
	Indigo	#4B0082	rgb(29%,0%,51%)	hsl(275,100%,26%)
	Ivory	#FFFFF0	rgb(100%,100%,94%)	hsl(60,100%,97%)
	Khaki	#F0E68C	rgb(94%,90%,55%)	hsl(54,77%,75%)
	Lavender	#E6E6FA	rgb(90%,90%,98%)	hsl(240,67%,94%)
	Lavender Blush	#FFF0F5	rgb(100%,94%,96%)	hsl(340,100%,97%)
	Lawn Green	#7CFC00	rgb(49%,99%,0%)	hsl(90,100%,49%)
	Lemon Chiffon	#FFFACD	rgb(100%,98%,80%)	hsl(54,100%,90%)
	Light Blue	#ADD8E6	rgb(68%,85%,90%)	hsl(195,53%,79%)
	Light Coral	#F08080	rgb(94%,50%,50%)	hsl(0,79%,72%)
	Light Cyan	#E0FFFF	rgb(88%,100%,100%)	hsl(180,100%,94%)
	Light Goldenrod	#FAFAD2	rgb(98%,98%,82%)	hsl(60,80%,90%)
	Light Gray	#D3D3D3	rgb(83%,83%,83%)	hsl(0,0%,83%)
	Light Green	#90EE90	rgb(56%,93%,56%)	hsl(120,73%,75%)
	Light Pink	#FFB6C1	rgb(100%,71%,76%)	hsl(351,100%,86%)
	Light Salmon	#FFA07A	rgb(100%,63%,48%)	hsl(17,100%,74%)
	Light Sea Green	#20B2AA	rgb(13%,70%,67%)	hsl(177,70%,41%)
	Light Sky Blue	#87CEFA	rgb(53%,81%,98%)	hsl(203,92%,76%)
	Light Slate Gray	#778899	rgb(47%,53%,60%)	hsl(210,14%,53%)
	Light Steel Blue	#B0C4DE	rgb(69%,77%,87%)	hsl(214,41%,78%)
	Light Yellow	#FFFFE0	rgb(100%,100%,88%)	hsl(60,100%,94%)
	Lime (W3C)	#00FF00	rgb(0%,100%,0%)	hsl(120,100%,50%)
	Lime Green	#32CD32	rgb(20%,80%,20%)	hsl(120,61%,50%)
	Linen	#FAF0E6	rgb(98%,94%,90%)	hsl(30,67%,94%)
	Magenta	#FF00FF	rgb(100%,0%,100%)	hsl(300,100%,50%)
	Maroon	#7F0000	rgb(50%,0%,0%)	hsl(0,100%,25%)
	Medium Aquamarine	#66CDAA	rgb(40%,80%,67%)	hsl(160,51%,60%)
	Medium Blue	#0000CD	rgb(0%,0%,80%)	hsl(240,100%,40%)
	Medium Orchid	#BA55D3	rgb(73%,33%,83%)	hsl(288,59%,58%)
	Medium Purple	#9370DB	rgb(58%,44%,86%)	hsl(260,60%,65%)
	Medium Sea Green	#3CB371	rgb(24%,70%,44%)	hsl(147,50%,47%)
	Medium Slate Blue	#7B68EE	rgb(48%,41%,93%)	hsl(249,80%,67%)
	Medium Spring Green	#00FA9A	rgb(0%,98%,60%)	hsl(157,100%,49%)
	Medium Turquoise	#48D1CC	rgb(28%,82%,80%)	hsl(178,60%,55%)
	Medium Violet Red	#C71585	rgb(78%,8%,52%)	hsl(322,81%,43%)
	Midnight Blue	#191970	rgb(10%,10%,44%)	hsl(240,64%,27%)
	Mint Cream	#F5FFFA	rgb(96%,100%,98%)	hsl(150,100%,98%)
	Misty Rose	#FFE4E1	rgb(100%,89%,88%)	hsl(6,100%,94%)
	Moccasin	#FFE4B5	rgb(100%,89%,71%)	hsl(38,100%,86%)
	Navajo White	#FFDEAD	rgb(100%,87%,68%)	hsl(36,100%,84%)
	Navy	#000080	rgb(0%,0%,50%)	hsl(240,100%,25%)
	Old Lace	#FDF5E6	rgb(99%,96%,90%)	hsl(39,85%,95%)
	Olive	#808000	rgb(50%,50%,0%)	hsl(60,100%,25%)
	Olive Drab	#6B8E23	rgb(42%,56%,14%)	hsl(80,61%,35%)
	Orange	#FFA500	rgb(100%,65%,0%)	hsl(39,100%,50%)
	Orange Red	#FF4500	rgb(100%,27%,0%)	hsl(16,100%,50%)
	Orchid	#DA70D6	rgb(85%,44%,84%)	hsl(302,59%,65%)
	Pale Goldenrod	#EEE8AA	rgb(93%,91%,67%)	hsl(55,67%,80%)
	Pale Green	#98FB98	rgb(60%,98%,60%)	hsl(120,93%,79%)
	Pale Turquoise	#AFEEEE	rgb(69%,93%,93%)	hsl(180,65%,81%)
	Pale Violet Red	#DB7093	rgb(86%,44%,58%)	hsl(340,60%,65%)
	Papaya Whip	#FFEFD5	rgb(100%,94%,84%)	hsl(37,100%,92%)
	Peach Puff	#FFDAB9	rgb(100%,85%,73%)	hsl(28,100%,86%)
	Peru	#CD853F	rgb(80%,52%,25%)	hsl(30,59%,53%)
	Pink	#FFC0CB	rgb(100%,75%,80%)	hsl(350,100%,88%)
	Plum	#DDA0DD	rgb(87%,63%,87%)	hsl(300,47%,75%)
	Powder Blue	#B0E0E6	rgb(69%,88%,90%)	hsl(187,52%,80%)
	Purple	#7F007F	rgb(50%,0%,50%)	hsl(300,100%,25%)
	Red	#FF0000	rgb(100%,0%,0%)	hsl(0,100%,50%)
	Rosy Brown	#BC8F8F	rgb(74%,56%,56%)	hsl(0,25%,65%)
	Royal Blue	#4169E1	rgb(25%,41%,88%)	hsl(225,73%,57%)
	Saddle Brown	#8B4513	rgb(55%,27%,7%)	hsl(25,76%,31%)
	Salmon	#FA8072	rgb(98%,50%,45%)	hsl(6,93%,71%)
	Sandy Brown	#F4A460	rgb(96%,64%,38%)	hsl(28,87%,67%)
	Sea Green	#2E8B57	rgb(18%,55%,34%)	hsl(146,50%,36%)
	Seashell	#FFF5EE	rgb(100%,96%,93%)	hsl(25,100%,97%)
	Sienna	#A0522D	rgb(63%,32%,18%)	hsl(19,56%,40%)
	Silver	#C0C0C0	rgb(75%,75%,75%)	hsl(0,0%,75%)
	Sky Blue	#87CEEB	rgb(53%,81%,92%)	hsl(197,71%,73%)
	Slate Blue	#6A5ACD	rgb(42%,35%,80%)	hsl(248,54%,58%)
	Slate Gray	#708090	rgb(44%,50%,56%)	hsl(210,13%,50%)
	Snow	#FFFAFA	rgb(100%,98%,98%)	hsl(0,100%,99%)
	Spring Green	#00FF7F	rgb(0%,100%,50%)	hsl(150,100%,50%)
	Steel Blue	#4682B4	rgb(27%,51%,71%)	hsl(207,44%,49%)
	Tan	#D2B48C	rgb(82%,71%,55%)	hsl(34,44%,69%)
	Teal	#008080	rgb(0%,50%,50%)	hsl(180,100%,25%)
	Thistle	#D8BFD8	rgb(85%,75%,85%)	hsl(300,24%,80%)
	Tomato	#FF6347	rgb(100%,39%,28%)	hsl(9,100%,64%)
	Turquoise	#40E0D0	rgb(25%,88%,82%)	hsl(174,72%,57%)
	Violet	#EE82EE	rgb(93%,51%,93%)	hsl(300,76%,72%)
	Wheat	#F5DEB3	rgb(96%,87%,70%)	hsl(39,77%,83%)
	White	#FFFFFF	rgb(100%,100%,100%)	hsl(0,0%,100%)
	White Smoke	#F5F5F5	rgb(96%,96%,96%)	hsl(0,0%,96%)
	Yellow	#FFFF00	rgb(100%,100%,0%)	hsl(60,100%,50%)
	Yellow Green	#9ACD32	rgb(60%,80%,20%)	hsl(80,61%,50%)

1 Extraído de http://www.w3schools.com/cssref/css_colors.asp

Enviar mensaje

Manual de HTML5 y CSS3

[11]
Unidades y Colores en CSS

Publicidad

[8.1] unidades relativas y absolutas

[8.1.1]unidades absolutas de medida

[8.1.2]unidades relativas de medida

[8.1.3]problemas de relatividad

[8.2] unidades para ángulos

[8.3] unidades para tiempo

[8.4] otras unidades

[8.5] indicación de colores en CSS

Enviar mensaje

Manual de HTML5 y CSS3

[11] Unidades y Colores en CSS

Publicidad

[8.1] unidades relativas y absolutas

[8.1.1]unidades absolutas de medida

[8.1.2]unidades relativas de medida

[8.1.3]problemas de relatividad

[8.2] unidades para ángulos

[8.3] unidades para tiempo

[8.4] otras unidades

[8.5] indicación de colores en CSS

[11]
Unidades y Colores en CSS