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.
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.
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.
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.
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.
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!
