Cómo saber el color que usa una imagen o página web con ColorZilla

Saber el color de una imagen o colores de una página web es una tarea sencilla gracias a una simple, pero poderosa herramienta llamada ColorZilla.

¿Cuántas veces has visto un calor en una página web y te gustaría copiarlo para usarlo en algún diseño de imagen o web que estés haciendo? Esto es algo muy común entre los que se dedican al diseño gráfico y al diseño web.

He decidido hacer este tutorial porque quizás tu eres una persona que, como yo, antes de empezar un proyecto ve muchas combinaciones de colores en diferentes páginas webs y quiere saber la combinación RGB/Hexadecimal de alguno que te haya gustado o, simplemente, has venido trabajando con uno y lo has olvidado porque no lo anotaste en ningún lado (Reconócelo, nos pasa muchas veces 😋). Es aquí cuando entra en acción la extensión de Google Chrome llamada ColorZilla.

¡Es una herramienta fantástica! con un simple clic sobre el color que queremos copiar nos indica el código RGB y Hexadecimal para que podamos replicarlo en nuestro proyecto.

Cabe destacar que existe una gran variedad de herramientas que hacen la misma función, pero a mi, particularmente, me gusta esta. La considero sencilla y práctica.

En este tip ya te comenté para que puedes usarlar, pero también te comentaré como descargarla y como usarla.

¡Vamos a ello!

Cómo descargar e instalar ColorZilla para saber el color de una página Web o una imagen.

¡Es muy fácil! Simplemente hay que ir a la web oficial de ColorZilla para Chrome y darle clic al botón de instalar ColorZilla que aparece a la derecha de la pantalla.

Luego te va a aparecer una ventana en donde debes hacer clic en Agregar Extensión 

¡Eso es todo! ya tienes la extensión de ColorZilla instalada en tu Google Chrome.  Te aparecerá a la derecha de la barra de búsqueda con el siguiente simbolo:

Ahora ya podrás saber cual es el color que tiene una página Web 🙂

 

Cómo usar ColorZilla para saber el código de color RGB/Hexadecimal que tiene una página Web

Es muy fácil. Simplemente haces clic en el botón de la extensión (el mismo icono que te mostré en la imagen anterior) y luego con el cursor seleccionas el punto donde aparece el color que quieres copiar.

Te aparecerá lo que verás en la siguiente imagen:

En este ejemplo he seleccionado el color naranja que aparece en la imagen del monitor. Verás que en la parte superior aparece una barra negra en donde se muestra el color de ese punto de selección y los códigos RGB y Hexadecimal.

Al hacer clic en ese punto se guarda automáticamente el código hexadecimal en el porta papeles, es decir, que lo puedes pegar en cualquier documento o herramienta automáticamente sin necesidad de escribirlo.

 

Opciones incluidas en la extensión de ColorZilla

Hay otras opciones que incluye la extensión que te serán de bastante ayuda y que te detallaré a continuación. Te resaltaré las más importantes.

Pick Color From Page ó Coger Color Desde la Página

Esta función es la que más vas a usar de esta herramienta. Al pinchar en ella podrás hacer exactamente lo mismo que te enseñé en el punto anterior.

Color Picket o Selector de Colores

Acá se almacena el último color que has seleccionado y también los otros que has ido pillando de otras webs.

Picked Color History o Selector Histórico de Colores

Igual que la anterior, acá verás el histórico de colores que has ido pillando.

Web Page Color Analyzer o Analizador de colores de una página web

¡Esta opción me encanta! Es otra opción que te aseguro usarás bastante. Más que todo, se usa para saber cual es la paleta de colores que usa una web.

Estoy convencido que muchas veces entras a una web y te gusta mucho la armonía de los colores y la combinación que usa, pues al usar esta opción te aparecerá en la parte superior una barra con la paleta de colores.

Cabe resaltar que no analiza los colores de las imágenes, solo te mostrará los que detecte en el código CSS de la página. Para saber que color usa una imagen tienes que aplicar lo que te enseño en el punto de Cómo usar ColorZilla.

 

Conclusiones:

  • ColorZilla es una herramienta excelente y muy sencilla de usar para saber que colores usa una página web.
  • El tutorial está hecho para Windows, sin embargo, es el mismo procedimiento para Mac.
  • Esta herramienta te permite saber la paleta de colores que tiene una web o un color determinado dentro de ella.
  • La usan mucho los diseñadores gráficos y los diseñadores web.

 

Si te ha gustado este tip compártelo con tus amigos y recuerda darme tu opinión en los comentarios.

Nos leemos en una próxima 🙂

 

Cómo saber el color que usa una imagen o página web con ColorZilla
5 (100%) 7 votes

2 Comentarios
  • Vicente Ortiz
    Publicado a las 09:31h, 17 noviembre Responder

    No conocía esta extensión de Google. Muchas gracias por el tutorial, la descargué y funciona perfectamente. Sobre todo cuando necesito saber el color exacto de alguna imagen o color dentro de una web que me guste. Saludos, Manuel.

    • Manuel Gallego
      Publicado a las 09:40h, 17 noviembre Responder

      Me alegra, Vicente. ColorZilla es una de las extensiones que no pueden faltar en mi “caja de herramientas” 🙂

Publica un comentario

Pin It on Pinterest

Shares
Share This

Si continuas navegando por este sitio, estás aceptando nuestra política de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar