Colores

Presentación

Esta sección nos permitira definir los colores de ldiferentes elementos de nuestra web Gesio. En primer lugar podremos definir la Gama Principal de colores, lo que aplicará automáticamente  colores pertenecientes a la gama del color principal seleccionado. Después de aplicar esta Gama Principal podemos eguir redefiniendo colores de elementos individuales si no nos parece correcto el color generado automáticamente por la gama.

Gama de colores

Este bloque nos permite crear una gama de grises basados en el color principal de nuestra marca y los aplica automáticamente a los principales elementos de nuestra web Gesio. Además generará una serie de variables CSS con esta gama de colores que nos permitirá aplicarlos a nuestros estilos personalizados y que estos colores se adapten a posibles cambios de gama en el futuro.

En primer lugar definiremos el color principal 1 . Gesio nos ofrecerá varios métodos para añadir el color y reproducir de la mejor manera nuestros colores corporativos, lo vermos más adelante al detalle. A continuación marcaremos la opción "Resetear la gama de grises personalizada" 2 para generar esta gama de grises dentro de nuestro selector de colores. Finalmente Hacemos click en el botón "Guardar cambios" 3 que aparecerá bajando un poco la página.

Puedes copiar las variables CSS desde el navegador, haciendo click derecho sobre algún elemento y accediendo a la opción "inspeccionar". En la columna de reglas del inspector de código, al final podrás ver y copiar los nombres de las diferentes variables. Si has entendido esto sigue afinando el diseño de tu web Gesio, si noo no dudes en ponerte en contacto con nosotros y nos encargaremos de tu web.

Colores elementos

Tras el bloque de Gama de colores dispondremos de la mayoría de elementos susceptibles de modificar su color organizado por bloque bien definidos que los ubican en su página o zona correspondiente. A través de ellos podremos personalizar aquellos elementos para los que no nos convenza el resultado obtenido al definir la gama de color.

A continuación detallamos los elementos disponibles cuando definimos un nuevo color:

1 Selector de color: La columna derecha nos premitirá  posicionarlos en el color elegido y a trabes del campo de la izquierda afinaremos la lunimosidad y la saturación

2 Ajustes de transparencia del color.

3 Aquí veremos las opciones RGB o RGBA del color seleccionado. También podremos. pegar o escribir los valores hexadecimales del color.

4 En el caso de que partamos de un color anterior aquí veremos la versión original del color y el afectado por las variaciones que hayamos hecho.

5 Listado de los colores que hemos introducido anteriormente para seleccionarlos en otros elementos de forma rápida y consistente.