Utiliza el selector de color para gestionar la paleta de colores del texto, los fondos, las superposiciones y mucho más. Puedes seleccionar colores de una paleta, introducir valores HEX o RGB, o crear degradados personalizados. La función de colores recientes te ayuda a mantener una apariencia profesional y coherente en todo tu sitio web.
Seleccionar un estilo de color
Antes de elegir un color, decide si el elemento debe usar un solo color o un degradado.
-
Un solo color
Si vas a utilizar un solo color, selecciona un color de la pestaña "Colores recientes" o elige "Elegir otro color".
-
Degradado
Los degradados están disponibles para los fondos de filas, columnas y widgets, así como para las superposiciones de imágenes. Para aplicar un degradado, asegúrate de:
- Selecciona dos colores para los puntos de degradado. Puedes invertir los colores para ajustar la posición del punto.
- Elige una dirección de degradado:
- La opción central genera un degradado radial.
- Las opciones laterales crean un degradado lineal.
Nota:
Los degradados no se pueden guardar en Colores del tema .
Gestión de colores globales
Los colores globales le permiten definir una paleta de colores principal y vincularlos a los widgets. Al actualizar un color global, todos los elementos vinculados se actualizan automáticamente. Esto reduce el tiempo de diseño y garantiza la coherencia estilística en todas las páginas. Para obtener más información sobre cómo configurarlos, consulte nuestro artículo sobre Colores de Tema.
Guardar y usar colores
Colores guardados
Guarde los colores y degradados que use con frecuencia en la lista "Colores guardados" para acceder a ellos fácilmente. Puede guardar hasta 48 colores y degradados en esta lista.
- Agregar un color: Haga clic en la pestaña Colores guardados en el selector de color y haga clic en + .
- Eliminar un color: Haga clic con el botón derecho en el color y seleccione Eliminar .
Colores recientes
El menú "Colores recientes" muestra una muestra de los colores utilizados recientemente en su sitio web, lo que le permite volver a aplicar rápidamente los tonos existentes.
Elija otro color
Seleccione un tono utilizando la paleta de colores o el panel de colores. También puede introducir un valor HEX o RGB en el cuadro de texto.
Para igualar perfectamente un color de un elemento existente del sitio, haga clic en el icono del cuentagotas y seleccione el color deseado de la página.
Ajustar la opacidad
Utilice el control deslizante de opacidad para determinar la transparencia de un elemento. Al reducir la opacidad, el color o la imagen de fondo que se encuentre detrás del elemento se fusionará con él.
Comprobación del contraste del texto para garantizar la accesibilidad
El verificador de contraste mejora la accesibilidad del sitio web al indicar si el contraste entre el texto y su fondo cumple con los estándares AA o AAA. Esta herramienta aparece automáticamente al usar el selector de color para elementos de texto.
Los siguientes criterios determinan los niveles de accesibilidad:
| Tipo de texto | Estándares* | Tamaño de fuente | Relación de contraste mínima |
|---|---|---|---|
| Texto normal | AAA | Menos de 18 puntos | 7:1 |
| Texto grande | AAA | 18pt o 14pt | 4,5:1 |
| Texto normal | AA | Menos de 18 puntos | 4,5:1 |
| Texto grande | AA | 18pt en negrita o 24pt y mayores | 3:1 |
- Nivel AA: Los colores tienen suficiente contraste para que la mayoría de los usuarios puedan leerlos, pero aún así pueden presentar problemas para algunos.
- Nivel AAA: Alto contraste que resulta legible para la gran mayoría de los usuarios.
A continuación se muestra un ejemplo del comprobador de contraste de color que indica que el contraste entre el texto y el fondo cumple con el estándar AAA:
El comprobador de contraste se desactiva en los siguientes casos:
- El texto seleccionado contiene varios colores.
- El texto está colocado sobre un fondo degradado.
- El texto está colocado sobre un fondo de imagen.
Consideraciones
- Los degradados no están disponibles para el texto. No verá esta opción en el selector de color para elementos de texto dentro de la pestaña "Diseño global" ni en los editores de widgets.
- Al trabajar con fondos, al alternar entre "Color" e "Imagen" se restablece la selección anterior. Por ejemplo, al pasar de un color a una imagen se eliminan los ajustes de color o degradado.
- Los degradados anulan el fondo de cada botón. Para revertir este cambio, vuelva a seleccionar el fondo para cada botón.
