El azul de marca no es #0000FF: cómo usan el azul Intel, LinkedIn, IBM y Dell
El azul puro se imprime más gris, parece un enlace y se ve mal sobre negro. Los logos azules famosos usan todos un azul más sereno. Sus códigos exactos, por qué los azules de Facebook y Visa cambian en impresión y cómo elegir el tuyo.
Un buen azul de marca nunca es #0000FF. El azul puro es el azul más profundo que puede producir una pantalla, lo cual suena potente hasta que el logo va a imprenta y vuelve más gris, o acaba en una página web donde todo lo azul parece un enlace. Los logos azules famosos resuelven esto todos de la misma manera, y el patrón es fácil de copiar para el tuyo.
Por qué el azul puro es difícil
El azul puro es la esquina del espacio de color de la pantalla: la luz azul a máxima potencia y nada más. La tinta de impresión no puede llegar a esa esquina.
En pantalla
Impreso, en papel estucado
Convertido para una imprenta estándar con papel estucado, #0000FF pasa a ser CMYK 93/75/0/0 y se prueba como aproximadamente #2C4A9A: más gris y más plano. La diferencia es lo bastante grande como para que un ojo entrenado lo llame otro color, así que el azul de tu tarjeta de visita no coincidirá con el azul de tu web.
El azul puro tiene un segundo problema sobre negro. Es el más oscuro de los colores brillantes, así que un texto o una marca azul sobre fondo oscuro casi desaparece.
Sobre blanco
Sobre negro
Además parece un enlace
Enlace por defecto del navegador
Azul puro
Los navegadores pintan los enlaces no visitados de #0000EE, según la hoja de estilos sugerida por el HTML Standard. Eso está a un paso de #0000FF, así que un logo o un botón en azul puro se lee como algo en lo que hacer clic, o como algo sin estilizar.
Cómo lo hacen los azules famosos
Intel: #0068B5
Un azul medio y limpio, unos 34 grados hacia el cian desde el azul puro. En impresión se prueba a un Delta E de 0,8 respecto a su color en pantalla, demasiado poco para verse. El logo de Intel se usa invertido a blanco sobre este azul, y el blanco se lee con facilidad.
LinkedIn: #0A66C2
Un azul amable con un toque más de púrpura que el de Intel. Es el que más cambia de los cuatro en impresión, con un Delta E de 2,0, y aun así está justo en el límite de lo que el ojo puede notar. El logotipo y el cuadro van en blanco y la «in» se recorta en azul.
IBM: #1F70C1
Un azul firme, algo más suave, con un poco de gris. Las letras rayadas son finas, así que el color tiene que ser lo bastante claro para que las líneas blancas se lean sobre él: el blanco sobre este azul supera con holgura el mínimo de accesibilidad para texto. Se imprime con un Delta E de 1,3.
Dell: #007DB8
El más claro y más cian de los cuatro, del rediseño de Dell de 2016. Es el azul más limpio de aquí, a 41 grados del azul puro, y se imprime con un Delta E de 0,9. También es el que menos margen deja al texto blanco: pasa la prueba de contraste, pero por los pelos.
Las tres cosas que todos hacen
Tiran hacia el cian. El azul puro está en los 240 grados de la rueda de color, igual que el color de enlace por defecto. Dell está en 199, Intel en 206, LinkedIn e IBM en 210. Alejarse de 30 a 40 grados de 240 es lo que vuelve sereno a un azul y evita que parezca un hipervínculo.
Funcionan sobre blanco y sobre negro. El azul puro es fuerte sobre blanco y se hunde sobre negro. Estos cuatro están en el medio del rango de luminosidad, así que el texto blanco pasa en todos y cada uno sigue visible como color sobre fondo oscuro.
Se imprimen fieles. Todos se prueban con un Delta E de 2,0 o menos.
| Marca | Azul | Tono | Texto blanco encima | Como color sobre negro | Cambio en impresión |
|---|---|---|---|---|---|
| Azul puro | #0000FF | 240° | Pasa, 8,6 a 1 | Falla, 2,4 a 1 | Grande, 16,6 |
| Intel | #0068B5 | 206° | Pasa, 5,8 a 1 | Pasa, 3,6 a 1 | Invisible, 0,8 |
| #0A66C2 | 210° | Pasa, 5,7 a 1 | Pasa, 3,7 a 1 | Pequeño, 2,0 | |
| IBM | #1F70C1 | 210° | Pasa, 5,1 a 1 | Pasa, 4,1 a 1 | Pequeño, 1,3 |
| Dell | #007DB8 | 199° | Pasa, 4,5 a 1 | Pasa, 4,6 a 1 | Invisible, 0,9 |
Un cambio en impresión por debajo de 2 aproximadamente es difícil de ver. Por encima de 5, el color impreso se lee como otro azul.
Azules que sí cambian en impresión
Pasar las pruebas de pantalla no basta, porque la impresión es su propio examen. Medidos del mismo modo, otros tres azules famosos se mueven mucho en una imprenta con papel estucado.
| Marca | Azul | Tono | Texto blanco encima | Cambio en impresión |
|---|---|---|---|---|
| #0866FF | 217° | Pasa, 4,8 a 1 | Grande, 9,7 | |
| Visa | #1434CB | 230° | Pasa, 8,8 a 1 | Grande, 9,2 |
| Samsung (citado) | #1428A0 | 231° | Pasa, 11,4 a 1 | Notable, 6,0 |
El azul de Facebook es el interesante. Está en el rango que tira al cian y pasa la prueba de texto blanco, y aun así se prueba como un azul claramente distinto.
Los azules más brillantes y saturados caen fuera de lo que puede imprimir la tinta de cuatricromía. Estas marcas tienen sus propias razones y viven sobre todo en pantallas, así que esto es una medición y no un error. La lección para tu logo es hacer la prueba de impresión, no adivinar por el tono.
Cómo elegir un azul para tu logo
- Empieza a 30 o 40 grados del azul puro. Lleva #0000FF hacia el cian hasta que quede entre unos 199 y 210 grados, el rango que usan los cuatro azules famosos.
- Pruébalo de tres maneras. El texto blanco encima debe leerse con facilidad a tamaño de cuerpo. El color en sí debe seguir viéndose sobre negro. Y no debe parecer un enlace junto a #0000EE.
- Haz la prueba de impresión. Haz una prueba en pantalla en tu herramienta de diseño con un perfil de papel estucado, o pide una prueba a tu imprenta. Si el azul impreso parece otro color, muévelo hasta que pantalla e impresión coincidan.
Roba estos 4 azules
Los cuatro azules, tal como los dibuja cada marca.
Úsalos para estudiar y para probar tu propio azul a su lado. Copiar el azul exacto de una marca famosa para un logo nuevo en un negocio parecido es como acabas pareciendo una imitación: usa el patrón, no los códigos.
FAQ
¿Cuál es el código hex del azul de Intel?
El azul de Intel es #0068B5, tal como está dibujado en el archivo del logo de Intel.
¿Cuál es el código hex del azul de LinkedIn?
El azul de LinkedIn es #0A66C2, tal como está dibujado en el archivo del logo de LinkedIn de 2021.
¿Cuál es el código hex del azul de IBM?
El azul de IBM es #1F70C1, tal como está dibujado en el archivo del logo de IBM.
¿Cuál es el código hex del azul de Dell?
El azul de Dell es #007DB8, tal como está dibujado en el logo de Dell del rediseño de 2016.
¿Por qué #0000FF es malo para un logo?
Se imprime claramente más gris de lo que se ve en pantalla, es casi el mismo azul que un enlace por defecto del navegador y casi desaparece sobre negro. Un azul más sereno que tire hacia el cian soluciona las tres cosas.
¿De qué color es un enlace por defecto en un navegador?
Los enlaces no visitados son #0000EE en la hoja de estilos sugerida por el HTML Standard, que está a un paso del azul puro.
¿Qué es un buen azul para un logo?
Un azul medio de entre unos 199 y 210 grados de tono, como los azules de Intel, LinkedIn, IBM y Dell, que admita texto blanco, siga visible sobre negro y se pruebe a un Delta E de alrededor de 2 en impresión.
Fuentes
- Colores leídos del archivo del logo de cada marca en Wikimedia Commons: Intel logo (2020), LinkedIn (2021), IBM, Dell (2016).
- Color de enlace por defecto: el HTML Standard, rendering, donde
:linkes#0000EE. - Cambio en impresión: una prueba en pantalla con el perfil de imprenta Coated FOGRA39, medida como Delta E 2000. #0000FF se prueba como #2C4A9A, una diferencia de 16,6. Los cuatro azules famosos cambian entre 0,8 y 2,0. El #0866FF de Facebook, el #1434CB de Visa y el #1428A0 citado de Samsung cambian 9,7, 9,2 y 6,0.
- Ángulos de tono calculados a partir de los códigos hex con el modelo HSL. Las proporciones de blanco sobre color y de color sobre negro, calculadas con la fórmula de contraste de WCAG 2.
- Cada logo se muestra invertido a blanco sobre su propio azul, la versión que estas marcas usan sobre su color. Solo recoloreado, nunca redibujado, y las marcas registradas pertenecen a sus propietarios.
- Publicado por primera vez como carrusel en Logo Brainy.
Choosing colors for a new logo? Our team designs brand identities with colors that work on screen, in print and next to each other.
Get Started
