Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (III)

10.2. Colores

En este vídeo explicamos los colores:

El sistema utilizado en las páginas web se basa en colores de 24 bits que permite 16,7 millones de colores por canal (256 x 256 x 256 = 16.777.216). Adicionalmente se puede añadir la transparencia/opacidad del color.

Los colores en CSS se pueden representar de varias formas: Nombres, RGB, palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual.

1. Nombres de colores.

Actualmente los navegadores soportan 140 nombres de color según la nomenclatura de X11/SVG.

Por ejemplo, color:green

En este tema básico puedes ver la lista de nombres de colores

2. Colores RGB.

Este sistema utiliza los colores primarios aditivos rojo (Red), verde (Green) y azul (Blue). Esto es conocido como el sistema RGB por las siglas de los colores en inglés.

De esta forma podemos crear un color indicando la cantidad de cada uno de los primarios que interviene en la mezcla. Para cada color podemos especificar 256 intensidades distintas, y al ser tres colores podemos obtener un total aproximado de 16,7 millones de colores.

En html, podemos definir un color RGB de varias formas:

a) RGB con valores hexadecimales, siguiendo el formato #F7F0E2 (el más utilizado), con valores para cada color entre el 00 (mínimo) y FF (máximo).

b) RGB con valores decimales, con la fórmula rgb(247, 240, 226), con valores entre 0 y 255.

c) RGB con valores porcentuales, como rgb(90%, 60%, 35%).

d) RGB con valores hexadecimales reducidos, si los dos valores de cada color son iguales, podemos reducirlos a uno, así, #FF00EE podemos escribirlo como #F0E.

Así, el color        lo podemos definir como #FA75C4, rgb(250, 117, 196) o rgb(98%, 46%, 77%).

3. Colores RGBA.

Si añadimos un valor de transparencia alpha al RGB, tenemos el RGBA. El valor 0 indica transparencia total, y el valor 1 indica transparencia nula.

Así, el color        rgb(0, 111, 155) lo podemos definir con un 50% de transparencia de esta forma, rgba(0, 111, 155, 0.5)        aunque se pueda confundir una mayor transparencia con un color más claro, en realidad lo que hace es dejar ver más el color de fondo, como vemos en este caso donde hemos añadido un círculo de fondo:

4. Colores HSL

Los códigos de colores HSL se definieron en CSS en 2011, todavía no son muy utilizados pero son más intuitivos que los RGB ya que se definen mediante tres valores que podemos interpretar mejor que la mezcla de rojo, verde y azul:

- Matiz (Hur) es un número entre 0 y 360 y abarca todos los tonos de color.

- Saturación (Saturation) es un porcentaje que da la intensidad del color, 0% es poco intenso y 100% es más intenso.

- Luminosidad (Lightness) es el porcentaje que representa lo más o menos claro de un color, 0% es blanco y 100% es negro.

Así, el color hsl(120,50%,50%)        es un verde neutro, lo podemos hacer un 30% más intenso (saturado) con hsl(120,80%,50%)        o un 30% más claro (luminoso) con con hsl(120,50%,80%)       

En la siguiente tabla puedes ver los diferentes valores de saturación y luminosidad para el matiz verde,120:

	120° verdes
	Saturación
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

 

5. Colores HSLA

Los códigos de colores HSL también pueden tener transparencia añadiendo un número, 0 indica transparencia total, y el valor 1 indica transparencia nula.

Por ejemplo el color hsla(120,50%,50%,1)        no tiene nada de transparencia, y el color hsla(120,80%,50%, 0.4)        es un 40% transparente.

Colores seguros: Los colores no se ven igual en todas las pantallas, hay un conjunto de colores que son recomendables para su utilización en las páginas web ya que muestran pocas diferencias de color en distintas pantallas, son conocidos como colores web o colores seguros. Esto tenía más sentido hace unos años cuando la tecnología de las pantallas estaba más atrasada. En este tema básico puedes ver la lista de colores seguros

Herramientas para manejar el color. Hay varias herramientas que permiten elegir colores con una interfaz gráfica, transformar colores entre formatos, etc. Muchos editores tienen una de estas herramientas incorporadas, por ejemplo, en Brackets se accede a ella colocando el cursor en un nobre de color en la hoja de estilo, y pulsando el botón derecho del ratón, elegir Edición rápoda (o Ctrl + E). Desde Dreamweaver también se hace de la misma forma.

Otra opción es usar una página web con esta función, por ejmplo, https://www.w3schools.com/colors/colors_picker.asp o https://htmlcolorcodes.com/color-picker/

También se pueden instalar extensiones en los navegadores (Chrome, Firefox, ...) con esta función, por ejemplo, para Chrome Colorzilla, para Firefox https://addons.mozilla.org/es/firefox/addon/colorzilla/?src=search

Para practicar lo aprendido realiza el ejercicio CSS unidades y colores