Elegir colores corporativos en HTML

La imagen corporativa es un aspecto que debe cuidarse con mimo en cualquier negocio, ya sea un negocio de auditoría SEO o una tienda de ultramarinos.

El nombre de la marca, el logo, la fuente de la letra, el color… son aspectos que deben mantener congruencia y deben ser adoptados homogéneamente en todos los aspectos. De nada sirve usar un logo diferente en cada ocasión si ello no va a permitir recordar la imagen de marca. En este post vamos a centrarnos en los colores corporativos.

¿Por qué elegir un color con el que asociar nuestra marca?

Porque permite que nuestros clientes recuerden mejor la marca y asocien el color a nuestra empresa. Es por ello que los colores corporativos deben ser elegidos con especial cuidado.

El significado de los colores

Los colores tienen un significado, que variará en cada cultura o incluso entre países. Por ejemplo, mientras que en España tenemos chistes verdes, en los países anglosajones tienen “Blue jokes”. El Azul también representa la tristeza en esos países, pudiendo usarse incluso como sinónimo de triste (I´m blue).

significado colores

Ahora que sabemos qué significa cada color, podemos elegir aquel que pueda representar mejor los valores de nuestra empresa. Sin embargo en Analíticamente te animamos a que vayas un paso más allá: ¿Qué tonalidad de color elegir?

Eligiendo la tonalidad de nuestro color corporativo

¿Por qué elegir una tonalidad concreta? ¿No basta con un simple verde?

La respuesta es que no podemos elegir un simple color y pretender que cualquier color parecido baste. Aunque parezca imperceptible para la vista, cualquier logo, fotografía o cartel publicitario con nuestros colores corporativos pueden desentonar si se usan diferentes tonos.

Vamos a poner el ejemplo de Analíticamente, donde el color del logo y el color de la fuente es el mismo, porque si un naranja fuera más claro que el otro, se notaría y en el subconsciente no se estaría recalando en la asociación color/imagen corporativa. Ahora bien, en HTML existen casi 17 millones de colores diferentes y recordar cuál es nuestro color corporativo puede resultar una tarea difícil.

Elegir color y tono en HTML

Hemos elegido nuestro color de forma generalista achacándolo a un significado, es hora de elegir la tonalidad adecuada y que nos permita recordarla siempre. ¿Cómo? Utilizando la paleta de colores que HTML facilita de forma numérica.

En primer lugar debemos conocer cómo funciona el sistema de colores en código HTML. La paleta de colores que se utiliza en páginas web es el RGB, donde los colores primarios (Red, Green, Blue) se mezclan para formar todos los colores del espectro. Los colores se representan de forma numérica donde hay dos dígitos para cada color, seis en total, de modo que cuando elijas un color verás su secuencia numérica:

#RRGGBB

A estas alturas habrás visto que muchas veces estos colores tienen números y letras, esto se debe a que no usan un sistema decimal, sino hexadecimal {0,1,2,3,4,5,6,7,8,9,A,B,C,D,F}, donde 00 será la ausencia de ese color, 80 será un 50% de intensidad y FF será pureza total. De este modo, se consiguen 256 tonalidades de un color (del 0 al 255), que unido a las combinaciones con otras tonalidades de otro color dan lugar a 16.777.216 colores distintos.

Los colores primarios RGB serán la pureza total del mismo y ausencia de los demás colores quedando de este modo:

·       Rojo: #FF0000

·       Verde: #00FF00

·       Azul: #0000FF

Adicionalmente, la ausencia de todos los colores genera el color negro (#000000) y la suma de los anteriores genera el blanco (#FFFFFF).

colores primarios rgb

Como curiosidad, la anterior imagen nos muestra los colores primarios y el resultado de su combinación parcial o total, dando lugar a los colores primarios sustractivos.

·       Magenta: #FF00FF = Rojo + Azul

·       Cyan: #00FFFF = Verde + Azul

·       Amarillo: #FFFF00 = Rojo + Verde

De este modo, la suma de un color con su complementario, da lugar al color blanco…

·       Rojo (#FF0000) + Cyan (#00FFFF)= Blanco (#FFFFFF)

…y la sustracción de un color primario del blanco dará lugar a su complementario

·       Blanco (#FFFFFF) – Verde (#00FF00) = Magenta (#FF00FF)

En resumen: Los colores en HTML se representan como la combinación total, nula o parcial del rojo, azul y verde (#RRGGBB) con valores desde 00 hasta FF (sistema hexadecimal) en cuanto a intensidad.

De este modo, cuando elijas tu color corporativo lo podrás definir numéricamente para que cada vez que utilices dicho color puedas recordarlo de forma exacta, y no a ojo de buen cubero.

¿Y si se te olvida la secuencia numérica?

A estas alturas ya deberías haber puesto en tu página web el fondo, el color de los títulos o alguna cosa en dicho color. Basta con clic derecho en la web, inspeccionar elemento, y con el selector ir a un texto, fondo, imagen…que contenga el color corporativo y averiguar de qué color se trata.

color corporativo analiticamente naranja

¿Listo para elegir el color que defina tu negocio de aquí en adelante?

Deja tu opinión