Comment appliquer des palettes de couleurs à votre site Web Divi (20 exemples !)

Dans le didacticiel Divi d'aujourd'hui, nous allons partager des palettes de couleurs étonnantes que vous pourrez utiliser sur les prochains sites Web que vous créerez avec Divi. L'utilisation des bonnes couleurs pour votre site Web est l'une des principales choses qui déterminera à quoi ressemblera votre site Web dans l'ensemble.

En plus de partager avec vous des palettes de couleurs étonnantes, nous allons également vous montrer un moyen solide d'ajouter ces palettes de couleurs à votre site Web. En cas de doute, vous pouvez toujours suivre ces étapes de base qui vous aideront à créer de beaux résultats.

Conseils généraux

1. Choisissez un site Web de couleur foncée ou de couleur claire

Dans la palette de couleurs que vous utiliserez, vous aurez sans aucun doute des couleurs claires et foncées. Le contraste est obligatoire dans une palette de couleurs afin que le contenu écrit ne se perde pas.

Maintenant, cela nous amène immédiatement à la première question que vous devez vous poser lorsque vous souhaitez appliquer une palette de couleurs à votre site Web ; voulez-vous créer un site Web de couleur foncée ou de couleur claire ? Ce n'est pas parce que vous en choisissez un que vous ne pouvez pas les combiner, mais faire un choix vous aide à choisir votre palette de couleurs plus facilement.

2. Choix de couleur

En théorie, vous pouvez déterminer vous-même le nombre de couleurs que vous souhaitez avoir dans votre palette de couleurs. Il n'y a pas de méthode standard pour appliquer ou déterminer des palettes de couleurs. Cependant, pour créer un bel équilibre de couleurs avec Divi, nous vous recommandons d'utiliser cinq couleurs.

Pour vous aider à appliquer les palettes de couleurs avec cinq couleurs à votre site Web, nous avons choisi un type de méthode que nous appliquerons systématiquement à la même mise en page lors de la présentation des différentes palettes de couleurs. Mais avant de plonger dans cela, examinons les différents types de couleurs que vous devez avoir dans votre palette de couleurs si vous souhaitez suivre notre méthode.

2 couleurs de fond

Assurez-vous que les couleurs de fond que vous choisissez correspondent les unes aux autres. Vous utiliserez ces couleurs d'arrière-plan à proximité les unes des autres et pour obtenir de beaux résultats ; ils doivent avoir une certaine harmonie.

1 couleur de police

La prochaine chose que vous devrez choisir est la couleur de la police. Logiquement, la couleur de la police dépend des couleurs d'arrière-plan que vous choisissez. Si vous avez choisi des couleurs d'arrière-plan claires, assurez-vous que la couleur de votre police est de couleur foncée et vice versa.

1 lien hypertexte et couleur CTA

La couleur du lien hypertexte que vous choisissez est l'une des couleurs qui donnent vie à votre site Web. Assurez-vous que cette couleur se démarque des autres couleurs de votre palette, car vous l'utiliserez pour les appels à l'action que vous incluez sur votre site Web.

1 couleur pour les touches finales

Enfin, vous pouvez choisir une autre couleur prête à l'emploi qui apportera de la couleur à votre site Web. Bien que cette couleur ne soit pas aussi importante que la couleur du lien hypertexte, elle vous aidera à compléter l'équilibre des couleurs sur votre site Web.

3. Assurez-vous qu'il y a suffisamment de contraste

Comme mentionné précédemment; il est essentiel de fournir un contraste entre certaines des couleurs de votre palette de couleurs. Si vous utilisez une palette de couleurs pour un site Web, ce contraste vous aidera principalement à rendre lisible le contenu écrit que vous partagez. Parce que; si votre contenu n'est pas facile à lire ; à quoi ça sert finalement ?

4. Trouvez le bon équilibre d'utilisation des couleurs

Il existe différentes manières de déterminer la fréquence à laquelle vous souhaitez utiliser une couleur particulière dans votre palette de couleurs. Il est nécessaire de créer un bon équilibre des couleurs si vous ne voulez pas qu'ils se sentent dépassés par les couleurs que vous utilisez sur votre site Web.

Assurez-vous d'utiliser la plupart du temps les couleurs les plus neutres de votre palette de couleurs et utilisez les autres couleurs pour accentuer le contenu que vous fournissez.

Procédure pas à pas : ajouter la palette de couleurs à votre site Web

Dans la prochaine partie de cet article, nous allons vous expliquer comment appliquer des palettes de couleurs à votre site Web. Nous gérerons les différentes étapes que nous prenons lors de l'ajout des couleurs à la mise en page d'un site Web. Après cette procédure pas à pas, vous arriverez à la partie où nous partageons les palettes de couleurs. Non seulement nous avons partagé les couleurs, mais nous les avons également utilisées sur une mise en page Divi pour mettre en pratique la procédure pas à pas.

Sans plus attendre, examinons les différentes étapes du processus.

1. Décidez comment vous allez ajouter les couleurs

Vous pouvez ajouter la palette de couleurs de deux manières :

• Ajout de toutes les couleurs section par section
• Complétez votre site couleur par couleur

Bien que vous mélangez probablement ces deux méthodes, nous vous recommandons de commencer par compléter votre site Web couleur par couleur. De cette façon, vous n'aurez pas à copier et coller les différents codes de couleurs en continu. Vous copiez chaque couleur une fois, puis passez à l'autre.

2. Ajoutez les couleurs d'arrière-plan

Une fois que vous avez décidé comment vous allez insérer les couleurs, vous pouvez commencer par les couleurs d'arrière-plan. L'une des raisons pour lesquelles commencer par les couleurs d'arrière-plan est une bonne idée est que vous verrez immédiatement les résultats. Vous définissez la base des couleurs que vous utilisez sur votre site Web.

Si vous avez choisi de créer un site Web de couleur claire ; commencez par ajouter la couleur la plus claire à l'arrière-plan de la deuxième section et poursuivez avec la deuxième couleur la plus claire de votre troisième section.

3. Ajoutez la couleur du texte

Après avoir ajouté les couleurs d'arrière-plan de votre site Web, vous pouvez commencer à ajouter la couleur du texte à votre site Web. Tout le contenu écrit sur votre site Web doit avoir cette couleur (à l'exception des hyperliens et des appels à l'action).

4. Ajoutez la couleur du lien hypertexte et du CTA à votre site Web

Ensuite, la prochaine chose que vous pouvez faire est de faire ressortir les hyperliens et les appels à l'action sur votre site Web. Ils attirent l'attention des gens et les rendent curieux de ce qu'est un lien ou un appel à l'action.

Assurez-vous que tous les éléments cliquables de votre site Web contiennent cette couleur. En conservant cette cohérence, vos visiteurs reconnaîtront facilement où ils peuvent cliquer pour continuer leur séjour sur votre site.

5. Ajoutez la couleur de la touche finale

La dernière chose à faire est d'ajouter la couleur de la touche finale au site Web. Dans les exemples et les palettes de couleurs que nous avons créés, nous utilisons cette couleur de touche finale à trois endroits : la couleur du cercle de présentation, le texte d'en-tête du module de personne et la barre de menu principale.

Bien que la couleur de la touche finale ne soit pas la couleur principale que vous utiliserez sur votre site Web, elle vous permettra d'apporter la touche de couleur supplémentaire dont votre site Web avait besoin. Après tout, vous ne voulez pas que votre site Web ait l'air monotone ou ennuyeux.

Palettes de couleurs

Maintenant que nous avons analysé les étapes nécessaires pour appliquer la palette de couleurs à votre site Web, il est temps de commencer à explorer des palettes de couleurs étonnantes. En plus de vous montrer le résultat de l'exemple de mise en page que nous avons créé, nous partagerons également les codes de couleur que nous avons utilisés pour atteindre ce résultat.

1. Carreaux pendant des jours

La première palette de couleurs que nous avons sélectionnée contient principalement des couleurs plus douces (et légèrement pastel). Puisque nous avons choisi un site Web clair, les couleurs les plus claires de la palette de couleurs occupent la majeure partie du site Web. Cependant, les couleurs plus foncées de notre palette de couleurs garantissent que le site Web contient l'équilibre des couleurs nécessaire.

Les couleurs utilisées dans cet exemple sont les suivantes (de gauche à droite) :

• #EBE8E2
• #768A95
• #B98077
• #007193
• #E2D7D7

2. Désert

La palette de couleurs suivante dans la liste s'appelle Désert. L'équilibre des couleurs de cette palette de couleurs penche légèrement vers un site Web de couleur plus foncée. La couleur qui domine dans cet exemple est la couleur bleue. Mais il y a aussi une couleur de texte très claire qui garantit que le contraste nécessaire est là.

Les couleurs utilisées dans cette palette sont les suivantes (de gauche à droite) :

• #507782
• #7C8E93
• #D89C79
• #443F3C
• #FFE8D8

3. Fête

La prochaine palette de couleurs n'est pas celle que vous verrez souvent. Les couleurs n'apparaissent pas souvent dans la même palette de couleurs, mais elles sont assez intrigantes. Si vous voulez que votre site Web soit unique, cette palette est la voie à suivre.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #E6EBD1
• #A59E4C
• #544C4D
• #AF3D4B
• #CED3BC

4. Promesse de petit doigt

La palette de couleurs suivante dans la rangée est une excellente option si vous souhaitez créer un site Web de couleur sombre. Les nuances noires et les nuances roses sont connues pour être une bonne combinaison. Ils donnent une touche ludique supplémentaire au site Web sans paraître trop féminin. Les nuances noires garantissent que l'apparence de votre site Web contient toujours la profondeur nécessaire.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #33383A
• #ECC9C8
• #E2566D
• #4F575A
• #D3D8DA

5. Santorin

Dans cette palette suivante, vous pouvez clairement remarquer que le bleu domine les autres couleurs. Avec cette palette de couleurs, vous obtenez immédiatement une sensation légère et positive. Le bleu est connu pour être l'une de ces couleurs que les gens préfèrent lors de la création d'un site Web. C'est une couleur standard qui reflète le professionnalisme. Cependant, les nuances de bleu qui sont utilisées dans cette palette de couleurs montrent également un côté ludique.

La palette de couleurs que nous avons utilisée dans cet exemple est (de gauche à droite) :

• #1198EA
• #0A5785
• #A85A4D
• #F1F5FA
• #C5DFF8

6. Plaisir violet

La couleur dominante dans cette palette de couleurs est évidemment le violet. Bien qu'elle soit souvent perçue comme une couleur déprimante, cette palette de couleurs et son utilisation sur un site Web semblent différer. Lorsqu'elle est combinée à des couleurs plus vives, la couleur violette peut donner des résultats époustouflants.

Les couleurs utilisées dans cette palette de couleurs sont les suivantes :

• #D7D7ED
• #52517B
• #737172
• #FCFCFC
• #F0F1A

7. Subtil

La prochaine palette de couleurs que nous aimerions partager est assez neutre et dans le même style que la palette de couleurs du Festival. Vous n'en voyez pas souvent non plus, mais cela a l'air très propre.

Les couleurs utilisées dans cet exemple sont (de gauche à droite) :

• #DAE2D5
• #4B7263
• #A8A461
• #494949
• #CCCCCC

8. Entreprise

La prochaine palette de couleurs que nous souhaitons partager est idéale pour toutes sortes de sites Web commerciaux. Les couleurs utilisées reflètent une certaine positivité et jeunesse. Les couleurs de fond claires permettent aux couleurs jaune et turquoise d'apporter une valeur ajoutée au site.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #181242
• #4ABDAC
• #DBDBDB
• #F7B733
• #FCFCFC

9. Rose

Qui n'aime pas la couleur rose? Cette prochaine palette de couleurs apporte un facteur féminin à votre site Web. Les couleurs claires dominent le site Web, mais elles veillent également à ce que les couleurs plus foncées soient également activées.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #152038
• #DDA199
• #FF614C
• #F5F5F5
• #E2E2E2

10. Chocolat

La prochaine palette de couleurs que nous voulons mettre à l'honneur est Chocolat. La bonne chose à propos de cette palette de couleurs est que les couleurs d'arrière-plan et la couleur du texte se retrouvent dans la même catégorie de couleurs. Cela laisse de la place aux deux autres couleurs pour se distinguer de ces couleurs et attirer l'attention.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #FFF4E8
• #FFE2C4
• #822317
• #935B3B
• #346E70

11. Sophistiqué

Cette prochaine combinaison de couleurs est quelque chose que vous ne vous attendriez pas à première vue. Le violet et le vert jaune ne sont pas si souvent utilisés ensemble, mais comme vous pouvez le voir dans le résultat ; ils correspondent assez bien. Pour garder l'accent sur ces deux couleurs, les couleurs d'arrière-plan et la couleur du texte sont plutôt neutres.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #88D317
• #4F2649
• #FCFCFC
• #EFEFEF
• #080816

12. Olivier

Olivia est une palette de couleurs qui n'a pas besoin de beaucoup d'explications. Les types de couleur olive et jaune se combinent très bien. Garder les couleurs plus claires plus neutres permet à ces couleurs de voler la vedette.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #778E3B
• #FFD902
• #132819
• #EFEFEF
• #FCFCFC

13. Porte dorée

Les couleurs beiges douces permettent à votre site Web de refléter une sorte d'exclusivité. Alors que la palette de couleurs semble assez sobre, la couleur violet turquoise de cette palette de couleurs parvient à apporter la chaleur dont le site Web a besoin.

Les couleurs utilisées dans cette palette de couleurs sont (de gauche à droite) :

• #373737
• #F3F4E8
• #ADA075
• #EDE4C9
• #A685BC

14. Capitaine

Cette palette est probablement la palette la plus professionnelle de la liste. Les deux couleurs bleu foncé de cette palette en sont la principale raison. La couleur rouge, cependant, fait un excellent travail pour briser la glace et ajouter de la diversité au site Web.

Les couleurs utilisées dans cet article sont (de gauche à droite) :

• #3B578E
• #DB2323
• #D7ACTE
• #F7F9FF
• #201C44

15. Environnement

La prochaine palette de couleurs que nous aimerions partager est celle de l'environnement. Le nom indique que le vert domine cette palette de couleurs. Ces couleurs vertes douces s'accordent parfaitement avec la couleur turquoise adoucie qui est fournie dans cette palette.

Les couleurs de cette palette sont (de gauche à droite) :

• #C2D3DO
• #56776A
• #42B7A7
• #EDEFF4
• #26423E

16. Doux riche

Dans cette palette suivante, nous pouvons clairement voir à quel point le beige et le rouge sont une bonne combinaison. Ils donnent un sentiment de maturité à tout type de site Web. En ajoutant une autre couleur verte perceptible, l'apparence de votre site Web aura également une certaine jeunesse.

Les couleurs de cette palette sont (de gauche à droite) :

• #984B43
• #233237
• #B7A97C
• #F9F0D4
• #527C40

17. hypnotisant

La palette suivante dans la rangée est un autre site Web de couleur sombre. Les couleurs dominantes sont le violet foncé et le gris. Cependant, les couleurs plus claires parviennent à apporter un peu de chaleur au site Web.

Les couleurs de cette palette sont (de gauche à droite) :

• #D0B6D6
• #3CC203D
• #898989
• #F2F2F2
• #F9AEBD

18. Menthe

La palette de couleurs Mint apporte une sensation de fraîcheur à votre site Web. Tout en étant très sobre à première vue, la couleur orange et violet parvient à donner une sensation de fraîcheur et de renaissance au site.

Les couleurs utilisées dans cette palette sont (de gauche à droite) :

• #31190A
• #B4BCA7
• #F99A53
• #54468E
• #E3EDE5

19. jaune doux

Cette palette de couleurs unique contient principalement des couleurs chaudes. Bien que nous ayons à la fois une couleur sombre et une couleur claire comme couleurs d'arrière-plan, le sentiment général se rapproche davantage d'un site Web de couleur claire.

Les couleurs de cette palette sont (de gauche à droite) :

• #DDCF30
• #437468
• #F1FFD1
• #4A4C49
• #FCFAD9

20. Mystère

La dernière palette de couleurs de la rangée est une autre palette de couleurs sombres que vous pouvez utiliser pour votre site Web. Les couleurs de fond utilisées dans cette palette sont sobres et permettent aux autres couleurs plus vives de la palette de ressortir.

Les couleurs de cette palette sont :

• #131517
• #13828A
• #35363A
• #EEF5F7
• #AF8300

Dernières pensées

Dans cet article, nous avons partagé quelques conseils sur la façon d'appliquer la palette de couleurs que vous choisissez à votre site Web. En plus de cela, nous vous avons également montré 20 belles palettes de couleurs qui pourraient vous aider à apporter de l'élégance à votre site Web. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Et pendant que vous y êtes, faites-le nous savoir; laquelle de ces palettes de couleurs préférez-vous ?

Image en vedette par EDGOR_21 / shutterstock.com