Colores en CSS | Spin Webs Creative Studio ☎ 689 89 42 67

Trabajar con colores en CSS mas rápido

Etiquetas de encabezado h1 h2 y h3
Etiquetas de encabezado h1 h2 y h3
17 mayo 2020
localStorage y sessionStorage
localStorage y sessionStorage
17 mayo 2020

Colores en CSS

Trabajar con colores en CSS mas rápido.

Colores en CSS. -Muchas veces en el proceso de desarrollo de una web,necesitamos cambiar el color una determinada tipografía, de un fondo, de un borde o de cualquier otro elemento y no siempre podemos disponer a mano de Photoshop o de una extensión de navegador que nos haga modo de Color-picker para poder obtener el código del color buscado.

Si además de todo esto quieres trabajar con colores de un modo mucho más rápido te invito a que te quedes un rato conmigo sin más comenzamos.

Colores en CSS

Trabajar con colores en CSS mas rápido.

Colores en CSS

Trabajar con colores en CSS.

El trabajo con colores en CSS, es a mi modo de ver una de las tareas más tediosas dentro del diseño web Ya que requiere del manejo de una serie de códigos de color que nadie sabe y además las combinaciones de estos son casi infinitas.

Para ello disponemos de una serie diferentes herramientas que nos facilitan la vida a la hora de realizar esta tarea.

Entre estas herramientas, tenemos las extensiones del navegador, yo no uso ninguna extensión a modo de color-picker, pero si no las tenéis y las necesitáis podéis iros al navegador Y buscar las extensiones que tengáis del navegador que tengáis instalado en este caso yo tengo Google Chrome simplemente ir a la Web Store y aquí tenemos una serie de extensiones que podemos añadir a nuestro navegador.

Dentro de estas extensiones vamos a buscar Color-Picker y nos aparecerá una serie de extensiones entre las que podemos seleccionar la que queramos en función de las estrellas de la gente que ha votado del número de calificaciones etc..

Una vez que tenemos seleccionada nuestra tensión nos aparecerá una ventana emergente diciendo que si queremos añadir la extensión al navegador le decimos que sí y ya tenemos la extensión disponible en nuestro navegador

extensiones de navegador

Chrome Web Store

Algo parecido funciona con la herramienta Selección de color de Photoshop mediante la cual, podemos realizar prácticamente la misma operación.

Mediante el Color-picker de Photoshop desplazamos el cursor extraemos el código en el formato que nos interese una vez dispone que disponemos del código de color deseado simplemente tenemos que volver al editor de texto realizar el cambio en la línea de código que necesitemos y comprobar los resultados en el navegador

Aunque cualquiera de las dos opciones es correcta, a mí modo de ver una modo de trabajar poco eficientes ya que no es posible realizar correcciones del color en vivo sobre el documento que estamos trabajando teniendo que hacer múltiples pruebas hasta llegar al resultado esperado

Para intentar ser más rápidos podemos usar una tercera vía qué es a través del inspector de elementos del navegador.

Desde este, podemos acceder a l cualquier elemento y en la parte de la derecha aparecerán todas las propiedades CSS que controlan o definen cómo se va a mostrar ese elemento pantalla.

Ahora dentro de esas propiedades CSS solo hay que seleccionar cualquier propiedad que tengan un componente de color, como por ejemplo color, background-color, border-color… y aparecerá un cuadradito y al lado el código de color si pinchamos en ese cuadradito se desplegará el color picker del inspector, en el que podemos ver la variación de color en tiempo real, ademas de darnos el código de color en el recuadro de abajo en diferentes formatos, hexadecimal, RGBA, RGB, y HSLA.

Selector de color del inspector de Chrome

Selector de color del inspector de Chrome

Además de todo esto tenemos el radio de contraste y lo más destacado, nos va a permitir conseguir un canal alfa y mostrarlo en formato hexadecimal.

Una vez que tenemos el código de color que necesitamos y que lo hemos comprobado en vivo sobre la web, solo tenemos que irnos al código y ponerlo definitivamente en la línea que hayamos decidido

Como podemos ver, esto es una manera bastante más rápida de modificar colores y de trabajar con colores en el diseño web, ya que vemos los cambios en tiempo real, podemos localizar el color que queremos y comprobar que realmente se adapta nuestro diseño.

Otra herramienta muy interesante que no ofrece el inspector de elementos de Chrome, es un selector para poder coger muestras de color sobre la propia web, además de darnos la opción del canal alfa en formato hexadecimal que no nos dan ninguno de las otras opciones que hemos visto anteriormente

Juan Lopez
Juan Lopez
Amante de los buenos usos y el código limpio en la programación web, ayudo a empresas y emprendedores a lanzar sus proyectos en Internet, analizar el entorno, buscar el mejor enfoque y las herramientas adecuadas para lograr el fin deseado. Muy comprometido con la formación y acceso universal a las tecnologías de código abierto, participo o soy fundador de diferentes canales, en donde trato de acercar la programación web al común de los mortales con cursos de diseño web enfocados única y exclusivamente al mundo laboral, real y actual,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *