Ayuda Registrarse

Cómo armonizar los colores de tu página web

¿Azul? ¿Azul claro? ¿O mejor algo entre azul y verde? A veces resulta difícil describir el color exacto que uno se imagina para su página, por ejemplo al buscar el color para un logo. Pero en lugar de intentar lograr una combinación aproximada, existe un camino para alcanzar la mejor combinación de colores. El truco está en familiarizarse con los códigos de colores así como con determinadas herramientas que te vamos a presentar en este artículo. Cuando hayas seguido estos pasos, podrás configurar los colores fácilmente con nuestras opciones de estilo.

 

En este artículo te vamos a explicar cómo identificar y trabajar con los códigos RGB y Hex, y cómo utilizar los colores en tu sitio web. Sin darte cuenta, pronto estarás combinando los colores de tus letras, enlaces, botones, etc… ¡y habrás creado una página con un aspecto profesional y plenamente armonioso!


¿Qué son los códigos de colores?

Quizás ya hayas oído hablar de los colores Pantone, o has tenido en tus manos una guía de colores con nombres como verde oliva o rojo burdeos. Para el diseño de tu web vas a tener que olvidarte de estos conceptos y centrarte en los colores web, adaptados a las pantallas de ordenadores y dispositivos móviles.

En la red, cada uno de los millones de colores están identificados por su código (o “valor”) que los programas informáticos pueden reconocer y representar fielmente en una pantalla. Una aplicación nunca va a saber lo que tú conoces como azul turquesa, pero sabrá cómo crear un bonito tono rosado con un código como FF9899. Cuando encuentres el código de un color, habrás dado con la llave para reproducirlo de forma exacta.


Existen diferentes formas de codificar colores. Concretamente dos de ellas, RGB y Hex, son muy importantes para la representación en una pantalla:

  • Valor RGB | Código RGB: tres cifras indican las cantidades exactas de rojo, azul y verde que componen un color. Ejemplos de este tipo de códigos serían RGB (26, 119, 127) o RGB: 26, 119, 127.
  • Valor Hex | Código hexadecimal: código compuesto por seis caracteres alfanuméricos. A menudo un símbolo de almohadilla (#) precede a este código: #E82C0C.

Ahora ya sabes lo que son los códigos de colores. Pero, ¿cómo puedes encontrar el valor de un color determinado?

Tu arma secreta: el selector de colores

Los selectores de colores son perfectos si ya tienes una idea de qué colores estás buscando. Quizás sea el color del logo de tu empresa o el de una imagen que te inspire especialmente, o incluso lo has encontrado en otra web… Existen múltiples herramientas gratuitas que te ayudarán a encontrar el código del color exacto que estás buscando. Aquí tienes dos buenas alternativas:

  • ColorZilla: esta extensión para los navegadores Chrome y Firefox es un selector de colores que puedes utilizar en cualquier página web. Una vez que lo hayas instalado, haces clic en "Pick Color From Page" y mueves el ratón hacia el color cuyo código estás buscando. A continuación aparecerá una barra negra indicando los códigos RGB y Hex del color en cuestión, y la extensión los almacenará en tu ordenador para que los tengas a mano cuando los necesites.

  • Adobe Color CC: al subir el archivo de una imagen (por ejemplo, vuestro logo o imagen de fondo), esta aplicación gratuita generará la paleta de colores basada en la imagen. Debes desplazar los círculos por el punto de la imagen que deseas analizar para encontrar los valores de los colores. A modo de ejemplo, hemos subido una foto del banco de imágenes de Unsplash a esta página:

Si subes un logo o una ilustración, obtendrás un resultado mucho más preciso. En cambio, los colores podrán variar al utilizar una imagen debido a los efectos de la luz y las sombras, por lo que el resultado dependerá del punto de la foto en el que hayas hecho clic.

Existen pequeñas diferencias entre los diferentes programas, pero en todos los casos encontrarás los valores RGB o Hex. ¡No te olvides de copiar estos valores, los necesitarás más tarde!

Paletas de colores e inspiración

Si todavía no tienes una idea exacta del color que quieres y no sabes por dónde empezar a buscar, te vendrán de maravilla las herramientas y páginas gratuitas en las que puedes descubrir creativas combinaciones de colores, como por ejemplo estas:

 

  • COLOURlovers: navega entre miles de paletas creadas por los más fanáticos de los colores para darle el mejor toque a tu página. Solamente tienes que copiar los códigos de los colores que más te gusten y configurarlos en tu web.
  • ColorHunt: aquí descubrirás cada día una paleta de colores diferente.
  • Coolors: en esta aplicación puedes generar paletas de forma aleatoria así como presentarlas a los otros usuarios, para que ellos te den su opinión.

¿Cuántos colores necesitas?

Muchas de las páginas que te hemos presentado ofrecen cinco, seis o hasta más colores por combinación entre los que puedes elegir. Pero a más colores, más difícil te resultará combinarlos, por lo que te aconsejamos utilizar menos colores para que te sea más fácil equilibrarlos a la perfección.

 

Nuestro consejo: para empezar, concéntrate en uno o dos colores llamativos y combínalos con blanco, gris y negro. De esta forma darás un aire consistente y muy profesional a tu página, sin arriesgarte demasiado. Estas tres páginas Jimdo utilizan un esquema de colores llamativos, pero sin superar los dos colores:

Adapta los colores a tu web

¿Ya has elegido los colores? ¡Perfecto! ¿Y también tienes sus códigos RGB o Hex? ¡Mucho mejor! Ahora puedes darle un nuevo toque a tu web con las opciones de estilo de Jimdo.

En el ejemplo que te mostramos a continuación, adaptaremos los colores de los textos, títulos y demás elementos de la página a la imagen de la colorida chica.

Accede a la sección de estilo de tu página Jimdo y asegúrate de que está activada la opción para editar los elementos individualmente. Con el rodillo de colores puedes seleccionar distintos elementos de tu sitio web como, por ejemplo, el texto, los títulos o los botones. En nuestra página hemos seleccionado en primer lugar el módulo de título, para el que queremos utilizar un tono lila.

Como que antes ya hemos copiado el código del color que queremos, hacemos clic ahora en el campo de colores situado en las opciones de estilo. Aquí puedes ver que hemos añadido 64 colores que tú puedes utilizar. Nosotros no necesitamos ninguna de estas propuestas, puesto que ya tenemos el código de nuestro color.

Por lo tanto, nos concentramos en el campo de texto situado justo debajo de la paleta de colores y en el que aparecen unos valores RGB. En este campo puedes introducir el código RGB de un color que ya tengas en mente, o simplemente pegas el código Hex. A continuación verás que el color cambia. Para guardar el color, haz clic en el botón "Seleccionar".

 

Para que no tengas que introducir el código Hex o RGB de un color cada vez que lo quieras utilizar en tu página, el editor almacenará el color que hayas configurado. Lo encontrarás justo debajo de los 64 colores predefinidos para que lo puedas utilizar fácilmente en otro punto de tu web.

¿Quieres darle más brillo a todo el proceso?

Si lo prefieres, puedes repetir este procedimiento con cada uno de los módulos de tu página que desees modificar. Pero también puedes configurar que los cambios se apliquen de forma general a todo tu sitio web, sin tener que ir haciendo clic en cada uno de los módulos. Muy práctico, ¿no?

Para ello, accede a la sección de estilo y coloca la opción “Editar elementos individualmente” en off. De esta forma aparecerá a la derecha la opción de establecer un esquema de color para toda la web. Haz clic en el cuadro y configura el color que tú desees, siguiendo las instrucciones que hemos indicado anteriormente. Al presionar el botón “Seleccionar” y guardar los cambios, el color elegido aparecerá como color de acento en todos los elementos de tu sitio (menú de navegación, títulos, botones, etc).

Transparencias

Una vez que hayas configurado el esquema de colores de tu web, puedes aplicar transparencias a determinadas zonas como, por ejemplo, la barra lateral. Para ello, activa la opción para editar elementos individualmente y haz clic con el rodillo en la barra lateral de tu página. Utiliza entonces la regla situada debajo del campo de color para establecer la transparencia del color y del elemento seleccionado. Cuanto más desplaces el cursor hacia la izquierda, mayor será la transparencia.

Marcos de Barros
Equipo Jimdo


Escribir comentario

Comentarios: 11
  • #1

    Carolina (martes, 13 septiembre 2016 10:16)

    ¡Muchas gracias! lo voy a aplicar ahora mismo todo.

  • #2

    Sergio (martes, 13 septiembre 2016 20:52)

    Se me acumula el trabajo, pero esto tengo que ponerlo en práctica! Muchas gracias! Saludos. Mytaxi4you.

  • #3

    sepatu kulit (miércoles, 14 septiembre 2016 04:46)

    cool bro , i like it

  • #4

    bufete de abogados de seguros (miércoles, 14 septiembre 2016 16:39)

    excelente explicación de los colores, para tomarla en cuenta, gracias

  • #5

    tri-tro (viernes, 16 septiembre 2016 04:03)

    Estupendamente explicado, así da gusto, saludos.

  • #6

    Cris (sábado, 17 septiembre 2016 14:56)

    Excelente articulo. Ahora mismo lo pruebo. Saludos.

  • #7

    taller mecanico en queretaro (lunes, 19 septiembre 2016 23:24)

    muchas gracias por sus consejos, muy enriquecedores

  • #8

    Herman Orlando Morales (martes, 20 septiembre 2016 23:54)

    que buen artículo felicidades jimdo

  • #9

    diseño de páginas web y seo (lunes, 26 septiembre 2016 23:40)

    excelente información, muchas gracias

  • #10

    Páginas Web Barcelona (lunes, 10 octubre 2016 19:21)

    Excelente post sobre los colores para web. Seguiremos algunos de tus consejos. Muchas gracias! Un saludo :D

  • #11

    Animalia (jueves, 03 noviembre 2016 03:53)

    Gracias por la información!