Creemos en la Web: Colores
Estamos creando una pagina y vemos o nos imaginamos un color que queremos usar, como se lo comunicamos a la computadora?
Las computadoras son buenas manipulando números, los colores, al menos como nosotros los usamos al comunicarnos, no tienen mucho de números.
En la búsqueda por encontrar un compromiso que funcionara tanto para humanos como para computadoras surgieron diferentes "representaciones", formas de describir unívocamente a que color nos referimos.
En esta sección vamos a explorar estas distintas representaciones.
Una herramienta online para elegir colores es Mozilla Color Picker podes usar esta o buscar alguna con la que ya hayas trabajado, intenta que permita ver las representaciones que vamos a explorar en esta sección.
Usando colores
Los siguientes son algunos de los atributos CSS que requieren colores, todos soportan todas las representaciones que vamos a explorar a continuación.
color
background-color
border-color
outline-color
text-decoration-color
text-emphasis-color
text-shadow
Un ejemplo que algunos de los atributos listados:
<span style="border: 1px solid; text-decoration: underline; color: red; background-color: lightgrey; border-color: blue; text-decoration-color: green; text-shadow: yellow 0.6em 0.6em; padding: 1em;">Hello Color</span>
Colores con nombres
La mas fácil y la que hemos usado hasta ahora es simplemente dar el nombre del color en ingles cuando necesitamos referirnos a el.
Esta representación es simple para los humanos pero tiene un par de limitaciones:
Hay que mantener una lista de nombres a colores
No todos los colores tienen nombre
Como me acuerdo de tantos nombres?
Tampoco queremos una lista de colores eterna
Cuando busco un color, como lo busco rápido en la tabla?
Cuando digo rojo, que rojo es?
A continuación la lista de colores
| black | |
| silver | |
| gray | |
| white | |
| maroon | |
| red | |
| purple | |
| fuchsia | |
| green | |
| lime | |
| olive | |
| yellow | |
| navy | |
| blue | |
| teal | |
| aqua | |
| orange | |
| aliceblue | |
| antiquewhite | |
| aquamarine | |
| azure | |
| beige | |
| bisque | |
| blanchedalmond | |
| blueviolet | |
| brown | |
| burlywood | |
| cadetblue | |
| chartreuse | |
| chocolate | |
| coral | |
| cornflowerblue | |
| cornsilk | |
| crimson | |
| cyan (synonym of aqua) | |
| darkblue | |
| darkcyan | |
| darkgoldenrod | |
| darkgray | |
| darkgreen | |
| darkgrey | |
| darkkhaki | |
| darkmagenta | |
| darkolivegreen | |
| darkorange | |
| darkorchid | |
| darkred | |
| darksalmon | |
| darkseagreen | |
| darkslateblue | |
| darkslategray | |
| darkslategrey | |
| darkturquoise | |
| darkviolet | |
| deeppink | |
| deepskyblue | |
| dimgray | |
| dimgrey | |
| dodgerblue | |
| firebrick | |
| floralwhite | |
| forestgreen | |
| gainsboro | |
| ghostwhite | |
| gold | |
| goldenrod | |
| greenyellow | |
| grey | |
| honeydew | |
| hotpink | |
| indianred | |
| indigo | |
| ivory | |
| khaki | |
| lavender | |
| lavenderblush | |
| lawngreen | |
| lemonchiffon | |
| lightblue | |
| lightcoral | |
| lightcyan | |
| lightgoldenrodyellow | |
| lightgray | |
| lightgreen | |
| lightgrey | |
| lightpink | |
| lightsalmon | |
| lightseagreen | |
| lightskyblue | |
| lightslategray | |
| lightslategrey | |
| lightsteelblue | |
| lightyellow | |
| limegreen | |
| linen | |
| magenta (synonym of fuchsia) | |
| mediumaquamarine | |
| mediumblue | |
| mediumorchid | |
| mediumpurple | |
| mediumseagreen | |
| mediumslateblue | |
| mediumspringgreen | |
| mediumturquoise | |
| mediumvioletred | |
| midnightblue | |
| mintcream | |
| mistyrose | |
| moccasin | |
| navajowhite | |
| oldlace | |
| olivedrab | |
| orangered | |
| orchid | |
| palegoldenrod | |
| palegreen | |
| paleturquoise | |
| palevioletred | |
| papayawhip | |
| peachpuff | |
| peru | |
| pink | |
| plum | |
| powderblue | |
| rosybrown | |
| royalblue | |
| saddlebrown | |
| salmon | |
| sandybrown | |
| seagreen | |
| seashell | |
| sienna | |
| skyblue | |
| slateblue | |
| slategray | |
| slategrey | |
| snow | |
| springgreen | |
| steelblue | |
| tan | |
| thistle | |
| tomato | |
| turquoise | |
| violet | |
| wheat | |
| whitesmoke | |
| yellowgreen | |
| rebeccapurple |
RGB: Combinando Rojo, Verde y Azul
Fuente: https://en.wikipedia.org/wiki/File:RGB_illumination.jpg
Otra forma de especificar colores es describir una mezcla de colores "básicos", en este caso rojo (Red), verde (Green) y azul (Blue).
Como lo describimos?
Necesitamos indicar la cantidad de cada color en la combinación, lo podemos hacer de dos formas:
-
Con números
0: nada de color
255: máximo de color
-
Como porcentaje
0%: nada de color
100%: máximo de color
Como lo escribimos?
La forma mas fácil de escribirlo si sabemos los valores individuales y dado que hay múltiples formas de indicarlo es:
Indicar de que forma vamos a describir el color, en nuestro caso rgb
Indicar los 3 valores
Veamos algunos ejemplos
| R | G | B | Formato | Color |
|---|---|---|---|---|
| 0 | 0 | 0 | rgb(0, 0, 0) | |
| 255 | 255 | 255 | rgb(255, 255, 255) | |
| 255 | 0 | 0 | rgb(255, 0, 0) | |
| 0 | 255 | 0 | rgb(0, 255, 0) | |
| 0 | 0 | 255 | rgb(0, 0, 255) | |
| 255 | 255 | 0 | rgb(255, 255, 0) | |
| 255 | 0 | 255 | rgb(255, 0, 255) | |
| 0 | 255 | 255 | rgb(0, 255, 255) | |
| 128 | 128 | 128 | rgb(128, 128, 128) | |
| 128 | 0 | 0 | rgb(128, 0, 0) | |
| 0 | 128 | 0 | rgb(0, 128, 0) | |
| 0 | 0 | 128 | rgb(0, 0, 128) | |
| 80 | 160 | 255 | rgb(80, 160, 255) | |
| 80 | 255 | 160 | rgb(80, 255, 160) | |
| 255 | 160 | 80 | rgb(255, 160, 80) | |
| 160 | 255 | 80 | rgb(160, 255, 80) | |
| 160 | 80 | 255 | rgb(160, 80, 255) | |
| 255 | 80 | 160 | rgb(255, 80, 160) | |
| 0% | 0% | 0% | rgb(0%, 0%, 0%) | |
| 100% | 100% | 100% | rgb(100%, 100%, 100%) | |
| 100% | 0% | 0% | rgb(100%, 0%, 0%) | |
| 0% | 100% | 0% | rgb(0%, 100%, 0%) | |
| 0% | 0% | 100% | rgb(0%, 0%, 100%) | |
| 100% | 100% | 0% | rgb(100%, 100%, 0%) | |
| 100% | 0% | 100% | rgb(100%, 0%, 100%) | |
| 0% | 0% | 0% | rgb(0%, 0%, 0%) | |
| 50% | 50% | 50% | rgb(50%, 50%, 50%) | |
| 50% | 0% | 0% | rgb(50%, 0%, 0%) | |
| 0% | 50% | 0% | rgb(0%, 50%, 0%) | |
| 0% | 0% | 50% | rgb(0%, 0%, 50%) | |
| 50% | 50% | 0% | rgb(50%, 50%, 0%) | |
| 50% | 0% | 50% | rgb(50%, 0%, 50%) |
Alternativa: Hexadecimal
Este formato suele estar disponible en herramientas que usan o manipulan colores, es compacta pero difícil de interpretar a menos que entiendas la numeración hexadecimal fluidamente.
La mencionamos porque te la vas a encontrar en muchos lugares y hay que saber que es un formato de color valido, que lo podes usar en lugar de cualquiera de los otros y que hay muchas herramientas que la usan.
Nota muy resumida para los curiosos:
En hexadecimal en lugar de contar del 0 al 9 y al quedarnos sin dígitos ponemos un 1 adelante y empezamos de nuevo como lo hacemos en decimal, se cuenta del 0 a la F, porque tiene como base 16 y no 10 como el decimal, contando en hexadecimal seria algo como: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11 ... 1F, 20 ... 2F, 30 ... F0 ... FF, 100 etc.
Lo que cambia es que el 255 de antes se convierte en FF y ponemos los 3 valores todos juntos luego del símbolo #, que indica que estamos usando este formato, el formato debe tener o 3 o 6 caracteres, de ser necesario llenamos los valores restantes con 0.
Algunos ejemplos de la sección anterior convertidos a formato hexadecimal:
| R | G | B | Formato | Color |
|---|---|---|---|---|
| 00 | 00 | 00 | #000000 | |
| FF | FF | FF | #FFFFFF | |
| FF | 00 | 00 | #FF0000 | |
| 00 | FF | 00 | #00FF00 | |
| 00 | 00 | FF | #0000FF | |
| FF | FF | 00 | #FFFF00 | |
| FF | 00 | FF | #FF00FF | |
| 00 | FF | FF | #00FFFF | |
| 80 | 80 | 80 | #808080 | |
| 80 | 00 | 00 | #800000 | |
| 00 | 80 | 00 | #008000 | |
| 00 | 00 | 80 | #000080 |
HSL: Tono, Saturación y "Liviandad/Brillo"
En esta representación tenemos 3 valores, llamados H (Hue), S (Saturation), L (Lightness).
- H
-
Numero de 0 a 360 (angulo en un circulo de colores), indica el tono base que queremos
- S
-
Porcentaje de saturación del color elegido, 0% va a ser un gris, 100% va a ser el color puro.
- L
-
Porcentaje de liviandad/brillo del color elegido, 0% va a ser negro, 100% va a ser blanco, 50% (y 100% de saturación) va a ser el color puro.
Algunos colores "puros":
| hsl(0, 100%, 50%) | |
| hsl(30, 100%, 50%) | |
| hsl(60, 100%, 50%) | |
| hsl(90, 100%, 50%) | |
| hsl(120, 100%, 50%) | |
| hsl(150, 100%, 50%) | |
| hsl(180, 100%, 50%) | |
| hsl(210, 100%, 50%) | |
| hsl(240, 100%, 50%) | |
| hsl(270, 100%, 50%) | |
| hsl(300, 100%, 50%) | |
| hsl(330, 100%, 50%) | |
| hsl(360, 100%, 50%) |
Cambiando la saturación:
| hsl(0, 0%, 50%) | |
| hsl(0, 25%, 50%) | |
| hsl(0, 50%, 50%) | |
| hsl(0, 75%, 50%) | |
| hsl(0, 100%, 50%) |
Cambiando el "brillo":
| hsl(0, 100%, 0%) | |
| hsl(0, 100%, 25%) | |
| hsl(0, 100%, 50%) | |
| hsl(0, 100%, 75%) | |
| hsl(0, 100%, 100%) |
Alpha: Transparencia/Opacidad
Un ultimo componente del color común a todos los que vimos es la transparencia/opacidad, es decir, cuanto del contenido que se encuentra "detrás" del color que estamos mostrando es visible.
La transparencia/opacidad va de 0% (ausencia absoluta de color, como un vidrio) a 100% (color solido, nada se "transluce")
Cuando indicamos la transparencia en rgb y hsl puede ser:
Numero entre 0 y 1
Porcentaje de 0% a 100%
Ejemplos:
/* transparente */ rgba(255, 0, 153, 0) rgba(255, 0, 153, 0%) /* semi translucido */ rgba(255, 0, 153, 0.5) rgba(255, 0, 153, 50%) /* opaco */ rgba(255, 0, 153, 1) rgba(255, 0, 153, 100%)
/* transparente */ hsla(240, 100%, 50%, 0) hsla(240, 100%, 50%, 0%) /* semi translucido */ hsla(240, 100%, 50%, 0.5) hsla(240, 100%, 50%, 50%) /* opaco */ hsla(240, 100%, 50%, 1) hsla(240, 100%, 50%, 100%)
En el formato hexadecimal simplemente agregamos dos dígitos mas al final entre 00 (0%) y FF (100%) indicando el nivel de transparencia
Y así llegamos al final, no hace falta que intentes aprender, entender o memorizar esto, solo saber que hay distintas formas de especificar colores, mas o menos cuales son, para el resto esta tu motor de búsqueda amigo.