Dans le cadre du développement de sites web, la palette de couleurs d'un site web influe directement sur la première impression et la perception de la marque.Astra En tant que thème léger et hautement personnalisable le plus populaire sur WordPress, avec une palette de couleurs raisonnable, vous pouvez rendre votre site web plus professionnel et digne de confiance. En utilisant le modèle Astra, de nombreux débutants ont tendance à tomber dans le malentendu de "choisir les couleurs au hasard", ce qui conduit à un style général de désordre, et n'est pas propice à la construction d'une marque et à l'optimisation du référencement.

Dans cet article, nous expliquons les modèles Astra qui permettent d'obtenir une correspondance des couleurs professionnelle et nous partageons des outils de mélange des couleurs gratuits et pratiques qui permettent de compléter rapidement la conception de la correspondance des couleurs.

1) Pourquoi la palette de couleurs de l'Astra est-elle importante ?

1.1 Renforcer l'identité de la marque

schéma de couleursest un élément essentiel du système d'identité visuelle (VIS) d'une marque. Qu'il s'agisse du bleu privilégié par les entreprises technologiques ou du vert préféré par les marques biologiques, la couleur communique l'idée de la marque. Si le site web d'Astra est coordonné de manière professionnelle, les couleurs resteront dans votre esprit, même si vous ne vous souvenez pas du logo.

1.2 Améliorer l'expérience de lecture et les taux de conversion

Les études montrent que plus de 90% des visiteurs se concentrent d'abord sur la palette de couleurs lorsqu'ils parcourent une page contenant des éléments d'information.typographique. Une tonalité abrupte des couleurs de la page entraînera une fatigue de lecture, augmentera le taux de rebond et réduira le taux de conversion. Une palette de couleurs professionnelle doit suivre la règle de la hiérarchie visuelle (primaire - secondaire - accent) pour rendre le processus de navigation confortable et naturel.

2. démarrer avec les paramètres de couleur du modèle Astra

2.1 Accès au panneau Astra Custom Colour

• Connectez-vous au backend de WordPress
• partir pour Apparence > Personnalisation

• frappe (sur le clavier) Global > Couleurs

• Le cadre :
  • couleur de base: Couleurs de l'arrière-plan et du corps du site web
  • Couleurs des liens et des boutonsPour mettre l'accent sur l'action : Pour mettre l'accent sur l'action : Pour mettre l'accent sur l'action
  • couleur naturelleLa lecture de l'information : la rendre lisible

2.2 Utilisation de la palette globale

La version Astra Pro propose une "Palette globale" qui vous permet de gérer la palette de couleurs de chaque module du thème, même lorsqu'il ne fonctionne pas. Elementor ou les éditeurs Gutenberg peuvent également appeler les mêmes valeurs de couleur pour une cohérence globale.

3. les principes fondamentaux de la colorimétrie professionnelle

3.1 Sélection de la couleur primaire

La couleur principale doit être conforme à la marque. logo Il est recommandé de s'en tenir à une couleur principale + 80-90% des tons neutres (p. ex. noir, blanc et gris) pour améliorer la texture de la page. Il est recommandé de s'en tenir à une couleur principale + 80-90% des tons neutres (par exemple, noir, blanc et gris) pour renforcer la texture de la page.

3.2 Couleurs secondaires et d'accentuation

• couleur secondaireLes couleurs sont utilisées pour enrichir la hiérarchie de la palette de couleurs, par exemple. Bannière Couleur de base, fond divisé.
• couleur d'accentCouleur d'accentuation : utilisée pour les boutons CTA ou le texte d'accentuation, généralement plus claire ou plus foncée que la couleur principale.

3.3 Maintien du contraste des couleurs

Le contraste entre le texte et les couleurs d'arrière-plan est suffisant pour répondre aux normes d'accessibilité WCAG et pour éviter la dyslexie causée par de faibles niveaux de gris.

4. il est recommandé d'utiliser des outils de mélange de couleurs professionnels gratuits

Les outils suivants sont gratuitsOutil de mélange des couleurs en ligneIl convient aux utilisateurs d'Astra pour générer rapidement des échantillons de couleurs professionnels.

4.1 Refroidisseurs

• FonctionnalitéUn schéma de 5 couleurs peut être généré en un seul clic, et des couleurs complémentaires peuvent être générées automatiquement une fois que la couleur du logo est verrouillée.
• Scénarios applicables: Correspondance des couleurs de la marque, Web Conception de l'interface utilisateur.
• spécificitésLes fonctions d'exportation PNG / PDF / SCSS sont prises en charge, et la bibliothèque d'échantillons est sauvegardée après l'enregistrement.

4.2 Adobe Color

• FonctionnalitéLes couleurs : fournir le cercle chromatique, les couleurs complémentaires, les couleurs trichromatiques, les couleurs analogues et d'autres modes de mélange des couleurs.
• Scénarios applicablesLa nécessité d'une conception de site web conforme à la théorie de la correspondance des couleurs.
• spécificitésLes utilisateurs daltoniens peuvent ainsi vérifier ce qui est visible pour les utilisateurs daltoniens.

4.3 Chasse aux couleurs

• FonctionnalitéLe site Web de l'association est une bibliothèque de coloris populaires partagés par la communauté des designers.
• Scénarios applicablesLe projet : Rechercher des solutions créatives lorsque l'inspiration se fait rare.
• spécificitésChaque jeu de couleurs est accompagné de valeurs HEX qui peuvent être copiées directement dans les paramètres de couleur d'Astra.

4.4 Khroma

• FonctionnalitéOutil de palette de couleurs personnalisée basé sur l'IA : saisissez votre couleur préférée et l'IA vous recommandera un schéma de couleurs similaire.
• Scénarios applicablesLes sites web : La nécessité d'une conception de site web qui corresponde à l'esthétique de chacun tout en conservant une certaine uniformité.

4.5 Happy Hues (happyhues.co)

• FonctionnalitéLa palette de couleurs : elle donne un aperçu de l'aspect de chaque palette de couleurs avec les différents éléments de l'interface utilisateur.
• Scénarios applicablesVoir l'aspect de la palette de couleurs sur un site web réel.

5. appliquer les outils de mélange des couleurs aux modèles Astra

• Utiliser les outils ci-dessus pour générer ou sélectionner un ensemble de schémas de couleurs (couleurs primaires, secondaires, d'accentuation, d'arrière-plan et de texte suggérées).
• Pour convertir le HEX code couleurCopie à Astra Apparence > Personnalisé > Global > Couleur milieu

• Postuler à :
  • Titre etboutonsUtilisation des couleurs primaires
  • partition en arrière-planUtilisation de couleurs secondaires ou de gris clair
  • Région CTAUtilisation de couleurs d'accentuation pour améliorer les taux de conversion
• Après l'enregistrement, prévisualisez l'ensemble du site et vérifiez que les modules sont visuellement cohérents et que l'affichage mobile est normal.

6. la pratique : rester simple et cohérent

• Ne pas utiliser plus de 3-4 couleurs primaires sur la même page.
• bouton-poussoir avec CTA Couleurs vives, évitez de trop vous rapprocher de la couleur de fond.
• Un style de couleur cohérent sur l'ensemble du site pour réduire les coûts de sensibilisation.

remarques finales

Astra est un thème conçu pour la flexibilité du design, avec un schéma de couleurs raisonnable, le site semble plus professionnel, atmosphérique, et améliore la convivialité du référencement et la confiance. Cet article recommande Coolors, Adobe Color, Color Hunt, Khroma, Happy Hues et d'autres outils de mélange de couleurs gratuits, même si vous n'êtes pas un designer, grâce à l'outil peut être adapté au positionnement de la marque de la palette de couleurs avancée.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.