Colores en hexadecimal, una introducción

No sé vosotros pero yo la primera vez que me encontré con que para indicarle a una página web o a un texto el color que debían usar en vez de poner «red» o «green» tenía que poner cosas como FF0000 o 00FF99 me armé un buen jaleo. Pues todo tiene una explicación y aquí va una breve basada directamente en este post tan divulgativo de Digital Inspiration.

Lo primero que hay que aclarar es que cada número indica la presencia de un color, siendo presencia nula 0 y presencia máxima 15. Dirás entonces ¿qué demonios pintan las letras en todo esto? Pues tan fácil como que en hexadecimal:

10 = A

11 = B

12 = C

13 = D

14 = E

15 = F

Dicho esto los colores en hexadecimal se expresan de la siguiente forma: RRVVAA siendo

RR = nivel de rojo

VV = nivel de verde

AA = nivel de azul

En inglés esto se conoce como RGB (RRGGBB) de «red» «green» y «blue».

Por ejemplo si donde va el nivel de rojo ponemos 00 tendremos nula presencia de rojo y si donde va el nivel de azul ponemos FF tendemos total presencia de azul. El ejemplo más básico:

Cómo ya te imaginarás el blanco se obtiene con todos los colores y el negro anulándolos todos:

Vamos un poco más allá. Si te doy un código como #5522CC ¿a qué color se parecerá más? o dicho de otro modo ¿qué color tiene más fuerza?

…

… piensa

El azul es el que está primando en esa combinación (CC > 55 > 22). Esto nos valdrá también para aclarar colores u oscurecerlos. Cuanto más aumentemos los valores hacia #FFFFFF más cerca del blanco estaremos y cuanto más bajemos los niveles hacia #000000 más cerca del negro. Para el ejemplo de arriba

Nótese como permanece fijo el valor del azul e incrementamos los otros dos ¿Y qué ocurriría si ponemos todos los colores en la misma proporción? Pues sencillamente que tendremos distintas escalas de grises:

Esto lógicamente puede convertirse en una locura para conseguir algún color concreto. Para eso existen herramientas muy interesantes como esta misma tabla de webtaller o esta otra con colores hexadecimales avanzados, pero a mí por lo menos me ha servido para entender un poco mejor este mundillo y para sacarme de algún apuro rápido.

• También en blogoff: Tipografía para principiantes, algunos apuntes y 10 consejos