El selector de color es una función del editor que permite gestionar la paleta de colores del texto, el fondo, las superposiciones y más. Puedes elegir un color de la paleta, introducir un valor HEX o RGB o incluso crear un degradado personalizado. La función de colores recientes ayuda a mantener la consistencia de la paleta de colores y a mantener un aspecto profesional en tu sitio web.
Al trabajar con el selector de color, tienes las siguientes opciones:
Estilo de color
Antes de elegir la combinación de colores, elige dónde quieres utilizar un solo color o un degradado.
Si estás utilizando la opción de un solo color, puedes elegir un color de la pestaña "Colores recientes" o saltar a "Elegir otro color".
El fondo degradado estará disponible para los fondos de filas, columnas y widgets, así como para las superposiciones de imágenes. Para aplicar un degradado, asegúrate de lo siguiente:
- Elige dos colores para los puntos de degradado. Puedes invertir los colores para ajustar la posición de los puntos.
- Elige una dirección de degradado.
- La opción central generará un degradado radial.
- Las opciones laterales crearán un degradado lineal.
Nota:
Los degradados no se pueden guardar en Colores del tema.
Colores globales
Los colores globales permiten definir una paleta de colores y vincular cada color a uno o a todos los widgets con ajustes de color. El color de cualquier elemento vinculado a los colores globales se actualizará automáticamente al cambiarlo en los ajustes de colores globales. Esto permite realizar cambios de color rápidamente, lo que reduce el tiempo de diseño y garantiza la coherencia del estilo del sitio en todas las páginas. Para aprender a configurar los colores globales, consulta Colores del tema.
Colores guardados
Guarda los colores que usas frecuentemente en tu sitio agregándolos a la lista "Colores guardados" del selector de colores. Para agregar un color a la lista de colores guardados, haz clic en la pestaña "Colores guardados" del selector y haz clic en +. Para eliminar un color de la lista, haz clic derecho en él y selecciona "Eliminar".
Nota:
Puedes guardar hasta 48 colores y degradados en la lista de colores guardados.
Colores recientes
Al seleccionar un color, el menú de colores recientes muestra una muestra de los colores usados recientemente en su sitio. Esto te permite seleccionar rápidamente los colores que ya tienes en tu sitio.
Elige otro color
Selecciona el tono de un color usando la paleta de colores a la derecha o el panel de colores. También puedes introducir el valor HEX o RGB del color deseado en el cuadro de texto debajo del degradado de color vertical.
Para que un color coincida perfectamente con cualquier parte de tu sitio (imágenes, textos, etc.), haz clic en el cuentagotas y selecciona el color que quieras usar. No tendrás que perder tiempo intentando averiguar el nombre o el valor exacto de un color.
Opacidad
El control deslizante de opacidad determina la transparencia de un elemento. Ten en cuenta que al reducir la opacidad de un elemento, lo que esté detrás (imagen o color de fondo) comenzará a integrarse con él.
Comprobador de contraste para colores de texto
El verificador de contraste para los colores del texto ayuda a mejorar la accesibilidad de los sitios web al indicar si el contraste entre el texto y el fondo cumple con el estándar AA o AAA*. El verificador de contraste aparece en el selector de color siempre que se utilice para texto.
A continuación se detallan los criterios que determinan si se cumple el estándar AA o AAA:
| Tipo de texto | Estándares* | Tamaño de fuente | Relación de contraste mínima |
|---|---|---|---|
| Texto regular | AAA | Menos de 18 puntos | 7:1 |
| Texto grande | AAA | 18pt o 14pt | 4.5:1 |
| Texto regular | Automóvil Club Británico | Menos de 18 puntos | 4.5:1 |
| Texto grande | Automóvil Club Británico | 18 puntos en negrita o 24 puntos y más grandes | 3:1 |
*En los estándares de accesibilidad, "AA" y "AAA" representan diferentes niveles de requisitos de contraste de color.
- El nivel AA significa que tus colores tienen suficiente contraste para ser legibles, pero aún así pueden presentar problemas para algunos usuarios.
- El nivel AAA significa que tienes un alto contraste que debería ser legible para la gran mayoría de los usuarios.
A continuación se muestra un ejemplo del verificador de color de contraste que indica que el contraste del texto y el fondo cumple con el estándar AAA:
El verificador de contraste se desactiva en las siguientes circunstancias:
- El texto seleccionado tiene varios colores. Por ejemplo, si varias palabras son azules y otras rosas.
- El texto está sobre un fondo degradado.
- El texto está sobre un fondo de imagen.
Consideraciones
El degradado no está disponible para elementos de texto, por lo que no lo verás en el selector de color para elementos de texto en el editor de diseño de widgets de la pestaña "Diseño global".
Al trabajar con fondos, al cambiar entre "Color" e "Imagen", se anulan los ajustes de la opción anterior. Por ejemplo, si estabas usando un color y cambiaste la configuración a "Imagen", se eliminarán cualquier ajuste de color o degradado.
Los degradados anulan el fondo de cada botón. Para restaurarlos, vuelve a seleccionar el fondo de cada botón.
