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?

Read More


Google está realizando un test A/B

¿Os habéis fijado en que la publicidad en Google tiene otro color?

Cuando realizamos una búsqueda en Google lo normal es que en los SERP o resultados de búsqueda se compongan de varios anuncios con sus enlaces (Adwords) y posteriormente los resultados orgánicos.

La siguiente imagen muestra los resultados de pago que podría haber en Google normalmente.

publicidad en google sem analiticamente test ab en amarillo

Ya habíamos anunciado hace pocos meses que Google había incluido un cuarto anuncio en los resultados de búsqueda. Está claro que incluir en la publicidad en Google un cuarto anuncio iba a suponer mayores ventajas a anunciantes y menor visibilidad a quienes consiguen un buen posicionamiento en Google de forma orgánica.

Si algo está claro es que Google, como toda empresa, está para ganar dinero, y esta medida aumenta en fuerte medida la competitividad entre anunciantes, lo que aumentaría las pujas realizadas por los mismos.

En esta misma línea el motor de búsqueda por excelencia se ha lanzado a buscar mejores resultados en su publicidad en Google mediante un test A/B. En este tipo de test se suelen adaptar uno o dos cambios que se piensan que pueden ser relevantes para conseguir el objetivo en un sitio web. En este caso, sería que los usuarios entraran a los enlaces de los Adwords. Una vez determinados los cambios, de forma aleatoria se ofrece a los usuarios la versión original del sitio y la versión con los cambios. Cuando el muestreo sea el óptimo, se compararán las cifras de una versión y la otra para determinar si los cambios van a ser positivos o en cambio debe mantenerse la versión original.

La publicidad en Google para muchos seguirá siendo como en la imagen anterior, pero para otros va a ser en color verde.

publicidad en google sem analiticamente test ab en verde

Estadísticamente se sabe que el color verde y el naranja convierten más en comercios electrónicos. Si Google ha decidido apostar por un nuevo color en su publicidad la idea no va mal encaminada, pero no será hasta dentro de un tiempo cuando podamos saber quién es el ganador en este test A/B.

Read More


Facebook acaba de presentar su nuevo servicio, Facebook 360. ¿Alguien recuerda cómo era Facebook hace 10 años? Ha llovido mucho desde entonces, y si algo podemos decir de la Red Social por excelencia es que ha sabido adaptarse a los cambios de forma rápida y constante, por lo que no es de extrañar que no haya caído en desuso como Fotolog, MySpace o Tuenti.

facebook hace 10 años

Como bien podemos observar en la imagen anterior, Facebook (y para qué mentir, todo internet) tenía un aspecto que ahora a la mayoría de usuarios echaría para atrás. Los diseños han evolucionado hacia estéticas donde se prioriza el confort visual del usuario. Si comparamos la imagen con el aspecto visual de Facebook actual, podemos ver sin duda que el cambio ha sido sin duda, para mejor.

Read More