Krypton Solid

Color hexagonal – El lado del código del color – Revista Smashing

Color hexagonal – El lado del código del color – Revista Smashing

El problema con el nombre de un color es que nunca se percibe exactamente como el mismo color para dos personas diferentes, especialmente si tienen interés en el impacto emocional de un sitio web. Nombra un color y lo más probable es que dé una impresión engañosa. Incluso algo como «azul» es incierto. Para ser más precisos, podría ser «azul cielo», «azul océano», «azul jeans» o incluso «azul soldador de arco».

El problema con el nombre de un color es que nunca se percibe exactamente como el mismo color para dos personas diferentes, especialmente si tienen interés en el impacto emocional de un sitio web. Nombra un color y lo más probable es que dé una impresión engañosa. Incluso algo como «azul» es incierto. Para ser más precisos, podría ser «azul cielo», «azul océano», «azul jeans» o incluso «azul soldador de arco».

Las descripciones varían según el gusto personal y en contexto con otros colores. Los etiquetamos “índigo”, “jade”, “oliva”, “mandarina”, “escarlata” o “cabaret”. ¿Qué es exactamente la «cal eléctrica»? Los nombres y los tonos precisos varían, a menos que sea una computadora.

Otras lecturas en SmashingMag:

El código exige precisión

Cuando las computadoras nombran un color, usan un llamado codigo hexadecimal que la mayoría de los humanos pasan por alto: colores de 24 bits. Es decir, 16.777.216 combinaciones únicas de exactamente seis caracteres formados por diez números y seis letras, precedidos por una marca de almohadilla. Como cualquier lenguaje de computadora, hay un sistema lógico en juego. Los diseñadores que entienden cómo funcionan los colores hexadecimales pueden tratarlos como herramientas en lugar de misterios.

Rompiendo hexadecimales en bytes manejables

Los píxeles de las pantallas retroiluminadas son oscuros hasta que se iluminan con combinaciones de rojo, verde y azul. Los números hexadecimales representan estas combinaciones con un código conciso. Ese código se rompe fácilmente. Para dar sentido a #970515, necesitamos mirar su estructura:

El primer personaje # declara que este «es un número hexadecimal». Los otros seis son realmente tres conjuntos de pares: 0–9 y a–f. Cada par controla un color aditivo primario.

lectura de color hexadecimal
Cuanto más altos sean los números, más brillante será cada color primario. En el ejemplo anterior, 97 sobrepasa el color rojo, 05 el color verde y 15 el color azul.

Cada par solo puede contener dos caracteres, pero #999999 es solo gris medio. Para alcanzar colores más brillantes que 99 con solo dos caracteres, cada uno de los números hexadecimales usa letras para representar 10–16. A, B, C, D, E, y F después 0–9 hace un par 16, no muy diferente a los jotas, reinas, reyes y ases en las cartas.

Diagrama que muestra cómo los colores hexadecimales pasan por encima de 0-9

Siendo códigos matemáticos, amigables con la computadora, los números hexadecimales son cadenas llenas de patrones. Por ejemplo, porque 00 es una falta de primaria y ff es el primario con toda su fuerza, #000000 es negro (sin primarias) y #ffffff es blanco (todas las primarias). Podemos basarnos en estos para encontrar colores aditivos y sustractivos. Empezando por el negro, cambie cada par a ff:

  • #000000 es negro, el punto de partida.
  • #**ff**0000 representa el rojo más brillante.
  • #00**ff**00 representa el verde más brillante.
  • #0000**ff** representa el azul más brillante.

Los colores sustractivos comienzan con el blanco, es decir, con la ayuda de #ffffff. Para encontrar primarias sustractivas, cambie cada par a 00:

  • #ffffff es blanco, el punto de partida.
  • #**00**ffff representa el cian más brillante.
  • #ff**00**ff representa el magenta más brillante.
  • #ffff**00** representa el amarillo más brillante.

Mezcla de colores aditivos para hacer sustractivos.

Atajos en hexadecimal

Números hexadecimales que usan solo tres caracteres, como #fae, implica que cada el lugar de uno debe coincidir con el lugar de dieciséis. Por lo tanto #fae se expande a #ffaaee y #09b realmente significa #0099bb. Estos códigos abreviados proporcionan brevedad en el código.

En la mayoría de los casos, uno puede leer un número hexadecimal ignorando todos los demás caracteres, porque la diferencia entre el lugar de los dieciséis nos dice más que el lugar de las unidades. Es decir, es difícil ver la diferencia entre 41 y 42; más fácil de medir es la diferencia entre 41 y 51.

Diagrama que enfatiza el primer carácter de cada par de personajes.

El ejemplo anterior tiene suficiente diferencia entre sus dieciséis lugares para que el color sea fácil de adivinar: mucho rojo, algo de azul, nada de verde. Esto nos proporcionaría un color violeta cálido. Las decenas en el segundo ejemplo (9, 9 y 8) son muy similares. Para juzgar este color, debemos examinar las unidades (7, 0 y 5). Cuanto más cerca estén los dieciséis lugares de un color hexadecimal, más neutral (es decir, menos saturado) será.

Haga que los hexadecimales trabajen para usted

Comprender los colores hexadecimales permite a los diseñadores hacer más que impresionar a sus compañeros de trabajo y clientes diciendo: «Ah, hay un buen tono de burdeos». Los colores hexadecimales permiten a los diseñadores modificar los colores sobre la marcha para mejorar la legibilidad, identificar elementos por color en hojas de estilo y desarrollar esquemas de color de formas que la mayoría de los editores de imágenes no pueden.

Mantenga las sombras en el carácter

Para aclarar u oscurecer un color, la inclinación a menudo es ajustar su brillo. Esto hace que un color abarque toda la gama de turbio a brillante., pero pierde su carácter en cualquier extremo de la escala. Por ejemplo, debajo de un verde medio se vuelve decididamente negro cuando se reduce al 20% de brillo. Elevado al 100%, el verde que alguna vez fue neutral gana vitalidad.

Algo curioso sucede cuando tratamos los colores hexadecimales como si fueran incrementos de diez. Al agregar uno a cada uno de los caracteres de la izquierda de cada par, aumentar el brillo de un color mientras encapotado su saturación. Esto evita que los tonos de un color determinado se acerquen demasiado al negro intenso o al neón brillante. Alterar los pares hexadecimales conserva la esencia de un color.

Diagrama que muestra cómo el hexadecimal afecta el brillo y la saturación

En el ejemplo anterior, el conjunto superior de tonos parece ganar amarillo o caer a negro, aunque técnicamente es el mismo tono verde. Al cambiar sus pares de hexágonos, el segundo conjunto parece mantener tonos más naturales.

Subrayados desvaídos

De forma predeterminada, los navegadores subrayan el texto para indicar enlaces. Pero los subrayados gruesos interfieren con los descendientes de las letras. Los diseñadores pueden hacer que los subrayados sean menos molestos reduciendo los colores hexadecimales. La idea es acercar las etiquetas al color de fondo, mientras que el texto en sí gana contraste con el fondo.

  • Para texto oscuro sobre un fondo brillante, hacemos que los enlaces sean más brillantes.
  • Para texto brillante sobre un fondo oscuro, oscurecemos los enlaces.

Para que esto funcione, cada enlace incrustado necesita un <span> dentro de cada :

a { text-decoration:underline;color:#aaaaff; }

a span { text-decoration:none;color:#0000ff; }

Ejemplo de subrayados que palidecen en comparación con el texto en el que se puede hacer clic

Como puede ver aquí, los subrayados del mismo color que el texto pueden interferir con las partes del texto que caen por debajo de la línea de base. Cambiar el subrayado para que se parezca más al fondo hace que los descendientes sean más fáciles de leer, aunque la mayoría de los navegadores colocan subrayados sobre las formas de las letras.

Agregar tramos a cada etiqueta de anclaje puede ser problemático. Una alternativa popular es eliminar los subrayados y agregar el borde inferior:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Mejor texto corporal

Un problema de diseño recurrente es que un color específico puede ser técnicamente correcto pero tiene un efecto no deseado. Por ejemplo, algunos diseños requieren que los encabezados y el cuerpo del texto sean del mismo color. Hay que tener en cuenta que cuanto más gruesos aparecen los trazos de un texto grande, más oscuro aparece el texto pequeño.

Ejemplo de texto que, aunque técnicamente correcto, parece demasiado brillante

h1, p { color: #797979; }

Ejemplo de texto técnicamente más oscuro pero visualmente igual

h1 { color: #797979; }

p { color: #393939; }

Si bien es técnicamente idéntico, el cuerpo de la copia es más estrecho y las letras más delicadas lo hacen visualmente más brillante que el encabezado. Bajar los dieciséis lugares hará que el texto sea más fácil de leer.

Cómo calentar o enfriar un fondo

Los fondos neutrales pueden ser fáciles de leer, pero «neutral» no tiene por qué significar «insulso». Ajustar el primer y último byte puede hacer que un fondo sea sutilmente más cálido o más frío.

Ejemplos con ligeras variaciones de color de fondo

  • #404040 – neutral
  • #504030 – más cálido
  • #304050 – más fresco

¿Es eso demasiado? Para un cambio más sutil, use los lugares de las unidades en su lugar:

Ejemplos de variaciones muy leves en el color de fondo

  • #404040 – neutral
  • #4f4040 – más cálido
  • #40404f – más fresco

Coordinar colores con copiar y pegar

Reconocer la estructura de los pares de números / letras de un número hexadecimal ofrece a los diseñadores una herramienta única para explorar combinaciones de colores. A diferencia de las ruedas de color y los gráficos, reorganizar los pares en un número hexadecimal es un proceso simple para cambiar los tonos manteniendo los valores similares. Como beneficio adicional, los resultados pueden ser impredecibles. La técnica más simple es mover un par de personajes a un lugar diferente, que intercambia colores primarios.

Una técnica de diseño común para hacer que el texto u otros elementos visuales se coordinen con una foto es usar colores dentro de esa foto. Comprender los colores hexadecimales puede llevarlo un paso más allá, al derivar nuevos colores que coordinen con la foto sin tomar directamente de la foto.

Ejemplos de cómo el intercambio de colores primarios puede producir resultados coordinados pero interesantes

Avanzando

No dejes que el código te intimide. Con un poco de creatividad, los colores hexadecimales son una herramienta a su disposición. Por lo menos, la próxima vez que alguien le pregunte si puede resolver un problema con el código en cualquier idioma, simplemente diga:

«No debería ser más difícil que analizar trillizos hexadecimales en mi cabeza».

Herramientas de color hexagonal

Es posible que le interesen las siguientes herramientas y aplicaciones:

Deja un comentario