¿Qué es el código hexadecimal? Todo lo que necesitas saber

Trabajar con colores en HTML es relativamente sencillo. Con unas pocas declaraciones CSS simples, puede modificar el color de cualquier texto o fondo en su página web. Pero, ¿cómo se especifica un color? La respuesta a esta pregunta nos llevará por una madriguera de conejo que finalmente nos llevará al concepto de códigos de color hexadecimales.

Si ha trabajado con HTML o CSS anteriormente, probablemente haya escuchado el término código hexadecimal. Pero, ¿qué es exactamente un código hexadecimal? ¿Cuáles son algunos ejemplos de códigos hexadecimales? ¿Cuál es la diferencia entre un código hexadecimal y un código de color RGB?

¿Qué es el código hexadecimal?

Cuando empiece a trabajar con color, puede usar una interfaz gráfica para elegir los colores que se aplicarán a los elementos de su página. Cuando comienza a mirar el código subyacente en lugar de solo su editor gráfico, descubre que los colores aparecen como secuencias de caracteres de aspecto extraño. Estas secuencias se conocen como códigos hexadecimales; se ven algo como esto:

#FF0092

Relacionados: Términos esenciales de diseño gráfico que necesita saber

Puede especificar colores en CSS de diferentes maneras. Puede utilizar los nombres de algunos colores predefinidos como rojo y magenta oscuro. Sin embargo, para especificar los tonos exactos de color, deberá usar una medida más precisa: algo numérico.

CSS ofrece dos opciones principales: RGB y hexadecimal. En ambos formatos, especifica las cantidades de rojo, verde y azul que componen el color final. RGB utiliza tres números entre 0 y 255. Hex hace exactamente lo mismo, solo que con una base diferente (16) que el decimal (10) al que estás acostumbrado.

Hex usa las letras A-F, además de los dígitos 0-9, para un total de 16 símbolos. A en hexadecimal es el equivalente de 10 en decimal. F en hexadecimal es 15 en decimal.

¿Cómo funcionan los códigos de colores hexadecimales?

En su forma más básica, un código hexadecimal es una representación de cuánto rojo, verde y azul existen en un color. Un código hexadecimal consta de seis caracteres. Los dos primeros se relacionan con la cantidad de rojo que hay en la mezcla, los dos siguientes se relacionan con la cantidad de verde que hay y los dos últimos dígitos reflejan la cantidad de azul. Los códigos hexadecimales se refieren a colores específicos, lo que permite a los diseñadores y desarrolladores comunicarse fácilmente sobre esquemas de color.

Con valores de 16 × 16 (256) para cada componente de color, hay 256 × 256 × 256 combinaciones posibles. En hexadecimal, van desde #000000 (negro puro) hasta #FFFFFF (blanco puro).

Cómo leer códigos de colores hexadecimales

Dar sentido a los códigos de color hexadecimales es fácil. Tomemos el ejemplo de #FF5733. Primero, divida los seis caracteres en tres partes que contengan dos caracteres cada una. Como saben, las primeras dos partes representan el rojo, las segundas dos partes representan el verde y las terceras dos partes representan el azul. Entonces, en nuestro ejemplo:

• El componente rojo, RR, tiene el valor FF.
• El componente verde, GG, es 57.
• El componente azul, BB, es 33.

Ahora, para encontrar la intensidad de estos segmentos de color, debe calcular el número hexadecimal siguiendo estos tres pasos:

1. Multiplica el primer carácter hexadecimal de RR por 16. Si el carácter es una letra, conviértalo a su valor correspondiente. En este caso, el primer carácter es F, que es 15. Entonces, para nuestro ejemplo, estás multiplicando 15 × 16 que es igual a 240.
2. A continuación, agregue el segundo carácter de RR. Nuevamente, convierta una letra a su valor correspondiente, si surge la necesidad. En nuestro ejemplo, el segundo carácter es F, que equivale a 15.
3. Una vez hecho esto, sume los totales para obtener un valor único. Si sumas 240 y 15 de nuestro ejemplo, verás que el valor de FF es 255.

Repita la misma fórmula para los dos segmentos restantes, GG indicado por 57 y BB indicado por 33. Si los cálculos manuales parecen demasiado abrumadores, siempre puede usar una herramienta de conversión hexadecimal a RGB (como Convertidor binario hexadecimal) para leer un color. Debe encontrar que el valor hexadecimal #FF5733 es equivalente a RGB (255, 87, 51).

¿Por qué es tan popular el código hexadecimal de colores?

Si bien existen varios modelos de color diferentes (RGB, CMYK, HSL), los códigos de color hexadecimales son quizás la representación más utilizada. Esto se debe a que son simples y fáciles de entender.

Un formato de ancho fijo también es muy útil. Los colores hexadecimales completos son siempre siete caracteres, incluido el inicial # símbolo.

Los colores hexadecimales son muy eficientes y utilizan solo estos siete caracteres para representar más de 16 millones de colores. Y diferenciar entre estos colores es un proceso sencillo.

maleficio contra RGB: ¿Hay alguna diferencia?

El sistema RGB de codificación de colores utiliza tres números decimales para indicar las intensidades relativas de rojo, verde y azul. Utiliza los dígitos 0-9.

Hex también usa tres números para representar rojo, verde y azul, pero usa dígitos adicionales (A-F) para atender a la base 16. No hay diferencia en los colores resultantes, simplemente son diferentes formatos para comunicar la misma información.

Relacionados: Fundamentos de CSS: trabajar con colores

¿Para qué se utiliza el código hexadecimal?

Una variedad de aplicaciones diferentes utilizan RGB, desde pantallas de televisión hasta dispositivos móviles, juegos y letreros. Principalmente verá códigos de color hexadecimales en el diseño web y otros programas gráficos.

También puede ver los códigos hexadecimales como una forma universal de identificar colores. Muchos sitios web los utilizan para identificar un color específico, ya que son breves y, por lo general, inequívocos en su contexto.

El código de color hexadecimal no es ciencia espacial

Entonces, ahí tienes los conceptos básicos de los códigos de color hexadecimales. No son exactamente ciencia dura, pero tienen un propósito definido en el diseño (y en el mundo de la tecnología). Si está buscando una herramienta que lo ayude a comprender cómo funcionan los colores hexadecimales, o una que le enseñe la teoría de la mezcla RGB, hay muchas en línea. Recuerde, la clave para aprender algo nuevo es dar un paso a la vez.

Los códigos de color hexadecimales no son lo más emocionante del mundo, pero es vital entenderlos si estás trabajando en diseño web. Ser capaz de trabajar con códigos de color hexadecimales hará que su diseño funcione mucho más fácilmente.

Cómo encontrar el valor hexadecimal de cualquier color en su pantalla

Aprenda a seleccionar cualquier valor de color de su pantalla en segundos. ¡Especialmente útil para diseñadores web!

Leer siguiente

Sobre el Autor