Comprender los códigos de color

Los códigos de color HTML son una parte habitual y crucial del diseño web moderno. Aunque la mayoría de los sitios de hoy en día están diseñados en gran medida con imágenes, los colores son particularmente importantes cuando, mientras escribes código y sobre la marcha, necesitas usar un valor hexadecimal de color. En esta guía, aprenderemos los fundamentos detrás de la codificación del color, en última instancia, proporcionándote el poder de crear colores sin el uso de un selector de color.

Introducción: Códigos de color

Como probablemente sepas, hay dos formas habituales de definir un color en el diseño web:

1. rgb(___,___,___)
2. #_ _ _ _ _ _

Ambos se implementan más a menudo usando CSS o HTML, como se puede ver a continuación:

1

<font color="rgb(123,123,123)">Text Here</font>  

2

<font color="#7B7B7B">Text Here</font>

1

.foo {color: rgb(111,222,111);}

En el primer ejemplo de código, cada texto "Text Here" aparecería como un color gris claro. Vamos a repasar por qué es así más adelante; sin embargo, observa cómo aunque los métodos de color parecen ser muy diferentes, en realidad, representan exactamente el mismo color.

En el segundo ejemplo, solo tenemos un breve código CSS. Es bastante sencillo, cualquier cosa con una clase "foo" tendrá un color de texto rgb(111,222,111). Para los más curiosos, esto sería un color verde lima.

De momento, casi todo lo visto debería tener sentido para ti. Ahora vamos a ver cómo pasamos exactamente de esos códigos relativamente crípticos a algo un poco más concreto.

Prueba A: RGB

En RGB, cada valor entre comas puede ser una cifra entre 0 y 255. Por ejemplo:

1

rgb(10,137,29)

Dado que RGB significa "Rojo Verde Azul" (red, green, blue), quiere decir que tenemos un valor de 10 para rojo, 137 para verde y 29 para azul. Inevitablemente se trata de una especie de fracción irreductible. Por tanto:

• el rojo sería 10/255 (diez de
  un valor máximo de 255)
• el verde sería 137/255 (137 de un máximo de 255)
• y 29/255 para el azul.

Cuanto mayor sea la cifra, más cantidad de ese cierto color habrá en el resultado final.

Cuando se establece en cero, no hay ninguna presencia de ese color en particular. Por supuesto, con un valor de 255, lo cierto es precisamente lo contrario. Por lo tanto:

• rgb(0,0,0) = negro
• rgb(255,255,255) = blanco

Esto es válido porque el sistema de color RGB se basa en la mezcla aditiva de color luz. Esto es muy diferente de cómo crearías normalmente los colores, por ejemplo, con pintura o lápices de color. Si tuvieras una combinación de rgb(255,255,255) usando pigmentos o pintura, probablemente obtendrías algo parecido a un marrón turbio, ¡con toda seguridad nada que se acerque al blanco!

Prueba B: Hexadecimal

El color hexadecimal es generalmente más difícil de explicar que el RGB. En esencia, son iguales. Sin embargo, el funcionamiento interno del sistema hexadecimal es sin duda más complejo.

Para explicar el sistema de color hexadecimal, primero tendremos que volver a ver algo binario y el sistema base de dieciséis números con el fin de entender lo que algo como esto está tratando de "decir" realmente:

1

#554BFF

Para aquellos de vosotros que no sepáis cómo funcionan, o qué son cualquiera de ellos, aquí tenéis una breve guía:

Binario 101

• El sistema binario se compone enteramente de ceros y unos.
• Un cero produce un valor de cero, y un uno produce un valor de uno; aunque no siempre es así.
• Un bit es un 1 o un cero. 1 es un bit. 0 es un bit. Pero 01 no es un bit, son 2 bits. 10 tampoco es un bit, son también 2 bits.
• Imaginemos que tenemos cuatro bits; esto se llama inteligentemente un "nibble" (mordisco), o medio byte. En lugar de este número igual a dos, o 11, o 110, o lo que sea que puedas estar imaginando, es en realidad muy diferente.
• A medida que se acumulan más bits, el valor de cada bit se duplica.
• Como el primer bit tiene un valor máximo de uno, y un valor alternativo de 0, el segundo bit puede ser 2 o 0, el tercero puede ser 4 o 0, el cuarto puede ser 8 o 0, y así sucesivamente.
• Con este sistema, puedes crear cualquier número normal (base 10). Realmente cualquier número.
• Nota: Los valores acumulados se suman, dependiendo de si son un 1 o un 0. Además, debes tener en cuenta que los binarios se leen, en la mayoría de los casos, de derecha a izquierda.

Si esto te resulta un poco confuso, te sugiero que lo leas de nuevo. Si después sigues sin encontrarle sentido, no pasa nada, los siguientes ejemplos te ayudarán a reforzar tu comprensión.

Espera - ¿Qué relación tiene esto con los códigos de color?

Hexadecimal, como su nombre indica, proporciona dieciséis útiles "valores" para obtener un número. Como habrás notado anteriormente, un "nibble" puede proporcionarte cualquier número entre 0-15: ¡dieciséis valores en total!

Prueba del concepto

Suponiendo que tenemos lo siguiente:

1

1111

Y sabiendo que los valores binarios de cada bit se convertirán en lo siguiente:

1

8 4 2 1

El valor binario 1111 se convertirá en:

1

8+4+2+1

que es...

1

15

Del mismo modo, si el número binario hubiera sido 0000, el resultado final habría sido simplemente cero, porque 0+0+0+0 es igual a 0.

Un ejemplo más

1

binary: 0101

Los valores para cada bit son 8,4,2 y 1 (en orden). Suma los valores binarios de los unos:

1

0+4+0+1

Igual a 5.

Esperamos que estos breves ejemplos hayan sido útiles. Te animo a probar rápidamente algunos otros por ti mismo. Incluso te propongo uno:

Convierte de binario a decimal: 1010
Pista: Está entre 9 y 11.

Esto podría parecer que no tiene ninguna relación con el desarrollo web, pero créeme, ya casi llegamos.

En hexadecimal, hay dieciséis representaciones diferentes para una secuencia binaria: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E y F. Estos, a su vez, representan los números 0-15 (16 números en total). Ambos representan el mismo número binario. Pero rápidamente, detente y piensa, #FFFFFF produce blanco, ¿correcto? Y nunca se puede tener una letra más alta de la F en un código de color HTML. Tenlo en cuenta.

Relaciones binarias, decimales y hexadecimales

Este es un gráfico resumido que asigna la relación entre binario, decimal y hexadecimal:

Esto significa que, si deseas crear el número 15, podrías escribir F en hexadecimal o 1111 en binario. Además, si deseas crear, digamos, 10, escribirías A en hexadecimal o 1010 en binario.

Aplicar valores hexadecimal a los códigos de color

Ahora, estamos un poco más cerca de averiguar exactamente cómo funciona el sistema hexadecimal. Brevemente, imaginemos un ejemplo de un código de color HTML que se divide en tres partes:

#006699 a -> #00,66,99

Ahora que tiene un aspecto un poco familiar; si estás pensando en lo que estoy pensando, tienes razón. Hexadecimal se organiza exactamente de la misma manera que RGB: tiene un valor para el color rojo, el verde y el azul. La diferencia principal es:

• RGB puede usar hasta tres cifras numéricas para definir un número de 0-255.
• Hexadecimal, por otro lado, sólo requiere dos para crear un valor de 0-255. Esta es en parte la razón por la que el sistema hexadecimal es la forma más común de definir colores en el desarrollo web, simplemente porque es más fácil de escribir, requiriendo menos caracteres.

Ahora veremos cómo puedes crear un valor de hasta 255, ya que hasta ahora sólo hemos aprendido a crear números de 15 como máximo.

• Digamos que tenemos un número, 66, por ejemplo. El punto aquí es que 66 está escrito en hexadecimal, no en números estándar. Por lo tanto, esto no será igual a 66, será igual a algo diferente, algo más grande.
• En primer lugar, vamos a convertir este problema en binario. Según nuestra anterior práctica tabla, 6 en binario es 0110. Esto significa que 66, en binario, sería 0110 0110 (o 01100110, es lo mismo).
• Dado que el sistema binario lee de derecha a izquierda, primero decodificaríamos la porción que está más a la derecha. Como sabemos, el primer 0110 equivaldría a 6.
• Después, el izquierdo. Puesto que hay dos caracteres hexadecimales vinculados entre sí para crear "66", los dígitos binarios de la parte izquierda serían algo diferentes, y definitivamente no 6 de nuevo. Una vez más, continuaríamos duplicando el valor de cada bit.
• De izquierda a derecha, los valores de cada bit (con 8 bits [¡que es un byte!]) serían: 128, 64, 32, 16, 8, 4, 2, 1. Así que teniendo en cuenta que los bits para el lado izquierdo tienen un valor mucho mayor, obtendremos un número mucho mayor:

1

Binary: 0110

2

Bit values: 128  64  32  16

3

Add together all that are true: 0+64+32+0

4

Yields: 96

Hemos descubierto que el primer "nibble" de la derecha equivale a seis. Y ahora, hemos encontrado que el segundo "nibble" a la izquierda es igual a 96. Entonces, ¿qué haces con esto? ¡Simplemente añádelos! 96+6 = 102. Por lo tanto, el valor hexadecimal de 66 es 102 en el sistema decimal normal.

Lo que esto significa es que, en hexadecimal, el equivalente RGB de 66 (en hexadecimal) es 102. En consecuencia, #666666 es igual a rgb(102,102,102).

Vamos a hacer una conversión más de hexadecimal a decimal:

1

Hexadecimal: FF

2

Binary: 1111 1111

3

Bit values: 128  64  32  16  8  4  2  1

4

Add: 128+64+32+16+8+4+2+1

5

Yields: 255

255 es el valor máximo para cualquier color. Por lo tanto, si tuviéramos #FFFFFF, que todos sabemos que es blanco, sería rgb(255,255,255), que también es blanco.

Para una mejor comprensión, hagamos una conversión final. Esta vez, vamos a convertir un color hexadecimal completo a RGB. Nuestro color es #6AB4FF.

1

6A

2

------

3

Binary: 0110 1010

4

Add: 64+32  +  8+2

5

	96+10

6

Yields: 106

7

------

8

B4

9

------

10

Binary: 1011 0100

11

Add: 128+32+16  +  4

12

	176+4

13

Yields: 180

14

------

15

FF

16

------

17

(We have already done this, so we know that it's 255)

Conclusión: #6AB4FF equivale a rgb(106,180,255).

Ahora, es posible que te preguntes cómo pasamos de estos valores a un color real que podamos imaginar en nuestra cabeza. La siguiente sección te ayudará en esto. Por lo tanto, ahora que sabemos cómo se relaciona el sistema hexadecimal con el RGB, y ahora que sabemos cómo funciona realmente el sistema hexadecimal, vamo a revisar cómo puedes concebir un color sobre la marcha en tu propio código, y ayudarte a crear cualquier color sin necesidad de usar un selector de color.

Color real

Un rápido dato curioso: Dado que hay 8 bits en cada valor de rojo, verde y azul, esto significa que hay un total de 24 bits en un color RGB (8*3 = 24). De aquí viene el término color de 24 bits, normalmente conocido como "True Color" (color verdadero.

Con un color de 24 bits, somos capaces de crear hasta 16.777.216 colores, más de dieciséis millones. Esto suele ser más que satisfactorio para cualquier proyecto. El color de 32 bits, sin embargo, ha empezado a ser más eminente, aunque no necesariamente en el área del diseño web. Puedes leer más sobre la profundidad de color en este artículo de la Wikipedia.org. Además, puedes ver una imagen de todos los colores, alrededor de 16 millones, aquí en el blog de David Naylor. Es fascinante, ¡de verdad! Los tamaños de imagen de 4096x4096 tienen sentido desde 4096 es la raíz cuadrada de 16.777.216.

Por último: Aplicaciones

Para que este conocimiento nos sea de alguna utilidad, vas a tener que aprender a crear tus propios colores rápida y fácilmente. Comenzaremos por lo más sencillo posible y luego pasaremos a colores más difíciles de articular.

Lecciones de exploración #1

Imagina que queremos crear un color gris sobre la marcha. Los colores en escala de grises son habituales y tienden a ser los más útiles en muchos casos. Hasta ahora sabemos lo siguiente: #000000 es igual a negro,
y #FFFFFF es igual a blanco. Por lo tanto, los más comunes de estos colores de escala de grises van a ser incrementos entre esos dos valores. Para hacer un tono gris, estableceríamos adecuadamente valores entre blanco y negro.

Lógicamente, un valor más cercano a #FFFFFF será un tono gris más claro, y un valor más cercano a #000000 será un gris más oscuro. Con esto en mente, vamos a crear un color gris bastante claro. Un razonamiento rápido nos da la siguiente resolución: #DDDDDD está cómodamente lejos del blanco, así que para nosotros será claramente un bonito gris claro.

Más adelante, queremos crear un gris más oscuro. Una vez más, algo sencillo. Simplemente crea algo como #333333. Como puedes ver, los valores grises son muy fáciles de crear. Si encuentras que necesitas un tono de gris aún más concreto, recuerda que, como regla general,
si cada uno de los valores de rojo, verde y azul son iguales, o son casi similares, conseguirás un gris neutro. Un ejemplo de esto es el color "Gainsboro" que tiene un código de color de #DCDCDC. Esto significa que es solo uno menos que nuestro color #DDDDDD en cada valor de rojo, verde y azul. Probablemente no serás capaz de diferenciarlos, pero incrementar o disminuir en 1 te dará un poco más de "precisión gris".

#DDDDDD emparejado con su contraparte gris oscuro, #333333

Lecciones de exploración #2

El segundo conjunto de colores más simple que puedes crear son rojo, verde y azul (obviamente). Usemos el rojo como ejemplo. Si queremos crear un rojo puro en RGB, daremos al color
el valor máximo de rojo, con 0 verde y 0 azul. Tiene sentido, ¿verdad? Para crear un rojo en hexadecimal, acabamos de poner #FF0000. Ahora tenemos rojo.

La creación de verde y azul sigue exactamente el mismo principio. Para crear un verde puro: #00FF00 (sólo verde, nada más). Para crear un azul puro: #0000FF (sólo azul, nada más).

Bastante simple; sin embargo, estos colores son, en la mayoría de las circunstancias, totalmente horribles al usarlos en un diseño web. Por lo tanto, para poner estos colores en uso vamos a tener que matizarlos adecuadamente.

Afortunadamente, matizarlos también es fácil. En este ejemplo vamos a usar azul. Ya tenemos el azul #0000FF listo para nosotros. Para cambiar el tono de nuestro valor azul, simplemente necesitamos cambiar los dos últimos caracteres del código del color hexadecimal. Dado que FF es el azul más alto posible, en este punto realmente sólo podemos hacerlo más oscuro. Por tanto, vamos a hacer justo esto:

Cambiando #0000FF a #000055 (disminuyendo la cantidad de negro, es decir moviendo así el azul más cerca del negro) produciremos un azul más oscuro.

Como puedes ver, matizar el rojo, el verde y el azul está lejos de ser difícil, consiste simplemente en disminuir la cantidad de un determinado color. La misma regla se aplica al rojo y al verde, no solo al negro, por lo que #005500 es un tono verde más oscuro, y #550000 es un tono más oscuro de rojo. (Por supuesto, puedes indicar un valor por debajo o por encima de 55 si lo deseas).

El rojo, el verde y el azul estándar, junto a algunas versiones más oscuras de sí mismos.

Lección de exploración #3

Supongo que probablemente estés pensando: ¿y qué pasa con el amarillo, el púrpura y todos los demás colores? Bueno, afortunadamente es sólo un poco más complicado que los tres colores principales de RGB. Empecemos con el amarillo.

Para crear un amarillo, primero tendremos que pensar en términos del espectro de color. Una regla mnemotécnica que a la gente le gusta usar es "Roy G. Biv", que significa "rojo, naranja, amarillo, verde, azul, índigo, violeta". En este momento la lógica parece un poco confusa, pero intenta quedarte conmigo. Para obtener amarillo, usamos los dos colores principales del rojo, el verde y el azul que están a ambos lados de donde estaría el amarillo. En este caso, sería el rojo y el verde. Por lo tanto, si escribiéramos #FFFF00, tendríamos amarillo. ¡Fantástico!

Existen sólo algunas otras combinaciones posibles usando este método, por lo que vamos a repasarlas rápidamente. Entre el rojo y el azul en una rueda de color, el código sería #FF00FF, y obtendríamos un rosa, o magenta como se denomina tradicionalmente, Después, entre el verde y el azul (#00FFFF), tenemos el cian. Y ahora, por desgracia, estas son realmente todas las combinaciones simples que podemos crear. El resto requiere un poco de razonamiento, algo que vamos a repasar en un minuto. En primer lugar, vamos a averiguar cómo matizar estos colores.

Esta vez, simplemente, empezaremos matizando el cian, que, como recordamos, es #00FFFF. Y... probablemente lo hayas adivinado, pero para matizar el amarillo, el cian o el rosa, todo lo que tienes que hacer es cambiar cualquier valor FF a un valor inferior. En este ejemplo, matizando el cian a una variación mucho más oscura, podríamos crear algo como #005555. Uno de los nombres de color HTML oficiales, DarkCyan, es #008B8B, por lo que este sería un poco más claro que el que acabamos de crear. Así que ahí lo tenemos: cómo matizar el amarillo, el cian y el rosa.

Amarillo, magenta y cian junto a sus versiones oscurecidas

Nota final sobre la matización

Para crear un color más claro, basta cambiar los valores bajos (los valores 00, por lo general) por valores más altos y dejar el FF (u otros colores principales) solo. Por ejemplo, si tuviéramos el verde, y quisiéramos hacerlo más claro, empezaríamos con #00FF00. Luego, para aclararlo, simplemente aumentaríamos los valores 00. ¡#AAFFAA produce un bonito color verde primaveral.

Además, con el fin crear un #FF00FF (Rosa) más claro, usaríamos el mismo proceso. Aumenta los valores bajos: #FFAAFF. Esto produce un color rosa claro. ¡Funciona de maravilla!

Nuestros colores verde primaveral y rosa claro.

Aplicaciones prácticas 2: Crear y decodificar los colores de forma lógica

Hasta ahora, hemos aprendido a crear los colores más simples, pero en la mayoría de los casos prácticos, este conocimiento no resultará útil para un proyecto. Ahí es donde entra en juego esta segunda parte.

Crear un color personalizado

Con el fin de crear un color de aspecto agradable, vamos a tener que trabajar fuera de lo que ya sabemos, y reflexionar sobre lo que estamos tratando de crear de una forma lógica. Vamos a crear un escenario; queremos crear un color naranja sutil que se adapte a nuestras necesidades, algo así como un tono un poco más oscuro de naranja "soda".

Empezaremos con lo que ya sabemos hacer, es decir, un color amarillo: #FFFF00. Tenemos que acercarlo un poco más a la zona naranja, así que para hacerlo, extraeríamos un poco de verde. Si lo haces, aumentarás la cantidad de rojo. Decidí cambiarlo a #FF5500. Este rápido y sencillo ejemplo te da una idea de cómo podrías crear un color. Lo último que me gustaría mencionar es que podrías estar preguntándote por qué no empecé incrementando la cantidad azul, que dejamos en un valor de 00. La razón es porque, cuando empiezas a añadir azul lentamente en incrementos de 11, 22, 33, etc., continúa viéndose bastante naranja. Sin embargo, una vez pases de 55, verás algunos problemas. Especialmente, si lo aumentamos hasta algo como #FF5599. Lo que pasa es que se convierte en un color realmente rosado. ¿Por qué es esto? Bueno, piensa en cuando creamos originalmente el rosa. El código era #FF00FF. El rojo y el azul se maximizan. Por lo tanto, en nuestro color naranja, cuando empiezas a cambiar de #FF5500 a #FF5599, nuestros valores de rojo y verde ya no son los valores prominentes. En su lugar, es el rojo y el azul, que producen el rosa. De esta manera, el valor 55 para el verde simplemente estaría aligerando nuestro tono rosa, en lugar de moverlo hacia el área naranja.

Nuestro color naranja. Parece el naranja de un refresco, ¿eh?

Nota para el lector: crear códigos de color complejos, es ciertamente, bastante poco práctico. En el tiempo que te llevaría crear un color correcto, podrías haber conseguido fácilmente varios colores adecuados mediante un selector de color. Para un color complejo, sería mejor que no tratases de crearlo por ti mismo. En lugar de eso, déjalo a los métodos probados, y ahórrate un tiempo precioso. Sin embargo, querrás usar tus habilidades para realizar una tarea sencilla como por ejemplo oscurecer o aclarar un color rápidamente sobre la marcha.

Decodificar un color

Así que ves este precioso código de color, mirándote a la cara, pero no tienes idea de qué color es realmente. ¡Genial! Aquí es donde probablemente viene la parte más divertida. La mejor manera de enseñarte cómo hacerlo es realizando una sencilla prueba. Una vez me hicieron las siguientes preguntas en una prueba en una de mis clases de tecnología de la información.

1. #000000 representa el color ____.

1. Verde
2. Negro
3. Blanco
4. Rojo

2. #00FF00 representa el color ___.

1. Verde
2. Negro
3. Rojo
4. Blanco

3. #FFCC66 representa un matiz de ___.

1. Azul
2. Rojo
3. Púrpura
4. Dorado

¡Esperamos que hayas podido resolver todo esto! Especialmente los dos primeros. Deberías haber sido capaz de averiguar que la respuesta al número uno era negro, o B. Para la segunda pregunta, la respuesta también fue bastante simple. Siguiendo el esquema de rojo, verde, azul, ya sabemos que si establecemos todos los valores, a excepción del verde, en 00, el color resultante será algún tono de verde. Además, dado que el valor del verde es FF (o 255), sabemos que este color será verde puro. Por lo tanto, la respuesta será A.

Parece que aquí el único color difícil de descifrar sería el número tres, #FFCC66. Esto es comprensible. Dado que el valor azul (que es 66) es muy inferior a los otros dos números, podría considerarse relativamente irrelevante. Por lo tanto, podría compararse con el color amarillo, #FFFF00. Entre esos dos, se ven algo similares. Con este método, puedes eliminar las tres primeras respuestas, ya que ninguna de ellas está remotamente cerca de amarillo. Por lo tanto, la respuesta es D. El valor verde disminuido de CC matizará ligeramente el color, y el aumento del azul empujará el color haciendo que se asemeje mucho más al dorado.

Rojo, verde y azul estándar, junto a algunas versiones más oscuras de sí mismos.

El proceso de decodificación de los códigos de color consiste principalmente en analizarlo, ¡y compararlo con colores que ya conozcas!

Un último apunte

Aquí hay un último consejo rápido sobre cómo puedes acelerar la creación de un color utilizando el sistema hexadecimal. Con este método, podrás reducir algunos códigos de color de siete caracteres a cuatro (por ejemplo, #_ _ _ _ _ a _ _ _ ). Este método se llama abreviatura de color, y la idea que hay detrás consiste en tomar el valor de cada uno de los tres caracteres principales, y duplicarlos de forma invisible. Lo que quiero decir con esto es que: si tuvieras el código de color #123, sería el equivalente de #112233. Puedes hacer esto en cualquier código de color en el que cada valor hexadecimal para el rojo, el verde y el azul sea exactamente el mismo carácter. Algunas de las abreviaturas más comunes son:

• #000 para negro (#000000)
• #fff para blanco (#ffffff)
• #f00 para rojo (#ff0000)
• #0f0 para verde (#00ff00)
• #00f para azul (#00f)

Conclusión

Espero que este artículo te haya ayudado a aprender cómo funcionan realmente los códigos de color. Ciertamente, en muchos programas, como Photoshop, será más fácil usar los selectores de color que incorporan. El área en la que principalmente esta habilidad será útil será cuando estés mirando algún código fuente CSS, y quieras simplemente averiguar de qué tipo de color se trata sin tener que recurrir a otro recurso. Con independencia del método que sea más rápido, como desarrolladores y diseñadores web, ¡estas son las cosas que deberíamos querer saber! Muchas gracias por leer. Este es un tema comprensiblemente difícil, ¡así que hablemos más ampliamente de ello en la sección de comentarios!