En el desarrollo de sitios web, la combinación de colores afecta directamente a la primera impresión y a la percepción de la marca.Astra Como el tema ligero y altamente personalizable más popular de WordPress, con un esquema de color razonable, puede hacer que su sitio web sea más profesional y digno de confianza. Al utilizar la plantilla Astra, muchos principiantes tienden a caer en el error de "elegir los colores al azar", lo que conduce al estilo general de desorden, y no es propicio para la construcción de marca y la optimización SEO.

En este artículo, explicaremos las plantillas Astra para conseguir una combinación de colores profesional y compartiremos prácticas herramientas gratuitas de mezcla de colores que ayudarán a completar rápidamente el diseño de la combinación de colores.

1. ¿Por qué es importante la combinación de colores del Astra?

1.1 Reforzar la identidad de marca

esquema de colorEs una parte esencial del sistema de identidad visual (VIS) de una marca. Ya sea el azul preferido por las empresas tecnológicas o el verde de las marcas ecológicas, el color comunica la idea de marca. Si el sitio web de Astra tiene una coordinación cromática profesional, los colores se quedarán grabados en tu mente, aunque no recuerdes el logotipo.

1.2 Mejorar la experiencia de lectura y los índices de conversión

Las investigaciones demuestran que más del 90% de los visitantes navegan por una página y lo primero que miran es la combinación de colores con eltipográfico. Un tono abrupto del color de la página provocará fatiga de lectura, aumentará la tasa de rebote y reducirá la conversión. Un esquema de color profesional debe seguir la regla de jerarquía visual (primario - secundario - acento) para que el proceso de navegación sea cómodo y natural.

2. Introducción a los ajustes de color de la plantilla Astra

2.1 Acceso al panel de color personalizado de Astra

• Inicie sesión en el backend de WordPress
• salir para Apariencia > Personalización

• golpe (en el teclado) Global > Colores

• Entorno:
  • color básicoColores del fondo y del cuerpo del sitio web
  • Colores de enlaces y botonesPara enfatizar la acción
  • color natural: Mantener la legibilidad

2.2 Utilización de la paleta global

La versión Astra Pro ofrece una "Paleta Global" que permite gestionar el esquema de colores de cada módulo dentro del tema, incluso cuando no está funcionando. Elementor o editores Gutenberg, también puede llamar a los mismos valores de color para la coherencia general.

3. Principios básicos de la igualación profesional de colores

3.1 Selección del color primario

El color principal debe estar en consonancia con la marca logotipo o relacionados con el negocio principal, en todos los módulos del sitio web (como botones, encabezados, hover del menú, etc.). Se recomienda mantener un color principal + 80-90% tonos neutros (por ejemplo, negro, blanco y gris) para realzar la textura de la página.

3.2 Colores secundarios y de acento

• color secundario: Se utiliza para enriquecer la jerarquía del esquema de colores, p. ej. Banner Color base, fondo dividido.
• color de acento: Se utiliza para botones CTA o texto de acento, normalmente más brillante u oscuro que el color principal.

3.3 Mantener el contraste cromático

El contraste entre el texto y los colores de fondo es suficiente para cumplir las normas de accesibilidad WCAG y evitar la dislexia causada por los bajos niveles de gris.

4. Se recomiendan herramientas profesionales gratuitas para mezclar colores

Las siguientes herramientas son gratuitasHerramienta de mezcla de colores en líneaEs ideal para los usuarios de Astra que deseen generar rápidamente muestras de color profesionales.

4.1 Refrigeradores

• funcionalidadSe puede generar un esquema de 5 colores con un solo clic, y los colores coordinados se pueden generar automáticamente una vez bloqueado el color del logotipo.
• Escenarios aplicables: Igualación de colores de marcas, Web Diseño de interfaz de usuario.
• especificidadesSoporte de exportación PNG / PDF / SCSS, y guardar la biblioteca de muestras después del registro.

4.2 Adobe Color

• funcionalidadProporcionar la rueda de colores, los colores complementarios, los colores tricromáticos, los colores análogos y otros modos de mezcla de colores.
• Escenarios aplicables: La necesidad de un diseño web que se ajuste a la teoría de la combinación de colores.
• especificidades: Admite la comprobación de la accesibilidad para ver lo que es visible para los usuarios daltónicos.

4.3 Caza del color

• funcionalidadBiblioteca de colores populares compartidos por la comunidad de diseñadores.
• Escenarios aplicables: Busca soluciones creativas cuando escasea la inspiración.
• especificidadesCada conjunto de colores viene con valores HEX que pueden copiarse directamente en los ajustes de color de Astra.

4.4 Khroma

• funcionalidadHerramienta de paleta de colores personalizada basada en IA: introduzca su color favorito y la IA le recomendará una combinación de colores de estilo similar.
• Escenarios aplicables: La necesidad de un diseño web que se adapte a la estética individual pero mantenga la uniformidad.

4,5 Happy Hues (happyhues.co)

• funcionalidadPermite previsualizar el aspecto de cada paleta de colores con distintos elementos de la interfaz de usuario.
• Escenarios aplicablesVea cómo queda la combinación de colores en un sitio web real.

5. Aplicación de las herramientas de mezcla de colores a las plantillas Astra

• Utilice las herramientas anteriores para generar o seleccionar un conjunto de combinaciones de colores (colores primarios, secundarios, de acento, de fondo y de texto sugeridos).
• Añadir HEX a la lista. código de colorCopia a Astra Apariencia > Personalizado > Global > Color medio

• Presente su candidatura:
  • Título ybotonesUso de colores primarios
  • partición de fondoUso de colores secundarios o gris claro
  • Región CTAUso de colores de acento para mejorar los índices de conversión
• Después de guardar, previsualice todo el sitio y compruebe que los módulos son visualmente coherentes y la visualización móvil es normal.

6. Práctica: sencillez y coherencia

• No utilice más de 3-4 colores primarios en la misma página
• pulsador con CTA Colores llamativos, evitar que se parezcan demasiado al color de fondo
• Un estilo de color coherente en toda la web para reducir los costes de sensibilización.

observaciones finales

Astra es un tema hecho para la flexibilidad de diseño, con un esquema de color razonable, el sitio se ve más profesional, atmosférica, y mejorar la facilidad de SEO y la confianza. En este artículo se recomienda Coolors, Adobe Color, Color Hunt, Khroma, Happy Hues y otras herramientas gratuitas para mezclar colores, incluso si usted no es un diseñador, a través de la herramienta se puede emparejar con el posicionamiento de la marca del esquema de color avanzado.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres