Seguramente trabajando en tu proyecto o navegando por un mont√≥n de p√°gina web muy chulas te has preguntado ¬ŅC√≥mo puedo saber qu√© colores est√° utilizando una p√°gina web?

En este articulo vamos a ver como averiguar el color de una p√°gina web y saber su c√≥digo de color para pegarlo en photoshop, illustrator u cualquier otra herramienta de dise√Īo que permita insertar un c√≥digo de color.

De esta manera podr√°s saber esos colores tan elegantes que utiliza una p√°gina web y tambi√©n fijarte en la combinaci√≥n de colores para potenciar tu dise√Īo web.

Extensión Colorzilla

Para obtener colores de una página web que se muestra en el navegador existe una extensión para Google Chrome y Firefox llamada ColorZilla.

Esta extensi√≥n es muy utilizada por los desarrolladores web y dise√Īadores gr√°ficos ya que permite de forma sencilla averiguar un c√≥digo de color en concreto de la web o todos los colores que se est√° utilizando.

Analiza los colores y te permite saber el código RGB y código hexadecimal de los colores de la página web.

También muestra otros modelos de color HSL y modelos de color HSV como la matiz, la saturación y el brillo de los colores y colores web W3C.

Características:

  • Permite analizar el color de cualquier elemento o fotograf√≠a del sitio web.
  • Page Color Picker: Selector cuentagotas de color en pantalla.
  • Color Picker: paleta de colores e historial de colores analizados.
  • Webpage color analyzer: Analiza todos los colores de la p√°gina web.
  • Palette browser: Paleta de colores
  • CSS gradient Generator: Herramienta adicional de generador de degradados CSS

¬ŅC√≥mo se utiliza Colorzilla?

Simplemente instala la extensión desde las opciones del navegador o desde la web oficial de colorzilla.

Extensión Colorzilla para averiguar el color de una página web

Una vez instalada en la parte superior derecha de la barra de navegación del navegador aparecerá el icono de un cuentagotas que te permite activar la extensión y sacar los colores de una página web.

como se utiliza Colorzilla para averiguar el color de una p√°gina web

Cómo saber el color de una página web

Elige la opción de Page Color Picker para hacer clic en pantalla y averiguar el codigo de un color.

1¬ļ haz clic en el color que quieres analizar. Puedes elegir el color de fondo, el color de un bot√≥n, el color de un logotipo, el color de una imagen o de cualquier otro elemento de una web.

2¬ļ El c√≥digo hexadecimal del color es copiado autom√°ticamente al portapapeles. Tambi√©n muestra el codigo de color RGB y el elemento que est√°s analizando.

El c√≥digo de color hexadecimal es utilizado en la mayor√≠a de herramientas de dise√Īo y tambi√©n para incrustar color en HTML en una p√°gina web.

Después solo tienes que pegar el código hexadecimal del color donde quieras.

Código de color hexadecimal de una página web con colorzilla

Analizar todos los colores de una p√°gina web

Si quieres saber todos los colores de la página web utiliza la opción Webpage Color Analyzer para analizar todos los colores de la página web.

analizar los colores de la p√°gina web

Y de esta manera tan sencilla tendr√°s una paleta de colores que incluyen todos los utilizados en la p√°gina web.

Ten en cuenta que la tabla de colores también muestra los colores de grises de los sombreados, colores usados en los efectos y colores base de degradados.

También muestra los colores web en hexadecimal que es el código principal que se utiliza para la gestión del color en la mayoría de herramientas.

saber los colores css de una p√°gina web

Consejos

Esta herramienta es genial para aprender y buscar inspiración con los colores más utilizados.

Por ejemplo la escala de grises suaves que son los colores utilizados en los fondos de las secciones informativas de una p√°gina web.

También permite darte cuenta como los colores primarios y los colores más llamativos y brillantes hoy en día no son tan utilizados y existe una tendencia de colores suaves y colores pastel que son más agradables a la vista.

Los colores HTML y CSS suelen utilizar el código hexadecimal, pero también existe el código básico RGB por mezcla de color Rojo, Verde y azul

¬°Espero que te haya sido de ayuda!

Abrir chat
¬ŅTienes dudas?