Comprendre les palettes de couleurs Web et Web
Vous pouvez utiliser quatre modèles de couleurs de base pour un site Web. Chaque page de cet article présente une image du jeu de couleurs et explique comment générer un jeu similaire dans Photoshop.
- monochromatiqueEn utilisant des couleurs de la même teinte. Ils peuvent avoir différentes teintes ou nuances selon la quantité de blanc ou de noir ajoutée.
- analogueCela utilise des couleurs proches les unes des autres sur la roue chromatique.
- complémentaireCeci est souvent considéré comme "opposé" car les deux couleurs d'un jeu de couleurs complémentaires sont opposées l'une à l'autre de la roue chromatique.
- triadiqueCes couleurs sont régulièrement réparties sur la roue chromatique.
Tous les jeux de couleurs utiliseront ce jaune comme couleur de base.
02 sur 10Palette de couleurs Web monochromatique
Ce jeu de couleurs utilise le jaune moutarde de la couleur de base et ajoute du blanc et du noir pour teinter et nuancer le jeu en conséquence.
- en haut à gauche - la couleur de base # ffe500
- en haut à droite - ajout d'un remplissage de 50% de blanc pour obtenir # fff280
- en bas à gauche - ajout d'un remplissage de 75% de blanc pour obtenir # fff8bf
- en bas à droite - ajout d'un remplissage de 50% en noir pour obtenir le n ° 7f7200
Les jeux de couleurs monochromatiques sont souvent les plus faciles à regarder. Les légers changements de teinte et d'ombre rendent les couleurs plus fluides. Utilisez ce jeu de couleurs pour que votre site paraisse plus fluide et plus riche.
03 sur 10Schéma de couleurs Web monochromatique
Ajout d'un carré de 20% de noir pour obtenir plus de couleurs dans le schéma. L'ajout de noir ou de blanc à vos couleurs peut créer une nouvelle couleur dans votre palette sans altérer le ton de la page.
04 sur 10Schéma de couleur Web analogue
Cette palette de couleurs prend la couleur de base jaune et ajoute et soustrait 30 degrés à la teinte de la palette de couleurs Photoshop.
- en haut à gauche - la couleur de base # ffe500
- en haut à droite - +30 degrés pour obtenir # 99ff00
- en bas à gauche - -30 degrés pour obtenir # ff6600
- en bas à droite - 100% blanc #ffffff
Les couleurs analogues peuvent très bien fonctionner ensemble, mais parfois elles peuvent se heurter violemment. Assurez-vous de tester ces systèmes avec plus de personnes que vous-même, votre famille et vos amis. Quand ils travaillent, ils créent un site plus coloré que le schéma monochromatique, mais presque aussi fluide.
05 sur 10Schéma de couleurs Web plus analogue
Ajout d'un carré de 20% de noir pour obtenir plus de couleurs dans le schéma.
06 sur 10Palette de couleurs Web complémentaire
Les schémas de couleurs complémentaires, contrairement aux autres schémas de couleurs, ne comportent généralement que deux couleurs. La couleur de base et celle opposée sur la roue chromatique. Photoshop facilite l'obtention de la couleur complémentaire - il vous suffit de sélectionner la zone de couleur dont vous souhaitez compléter le complément et d'appuyer sur Ctrl-I. Photoshop l'inversera pour vous. Assurez-vous de le faire sur un calque dupliqué afin de ne pas perdre votre couleur de base.
- gauche - la couleur de base # ffe500
- droite - le complément # 001aff
Les jeux de couleurs complémentaires sont souvent beaucoup plus frappants que les autres, donc utilisez-les avec précaution. Ils sont le plus souvent utilisés sur des pièces qui doivent se démarquer.
07 sur 10Schéma de couleurs Web plus complémentaires
Pour obtenir cette version, j'ai ajouté 50% de blanc à la moitié inférieure des couleurs et 30% de noir au centre. Comme vous pouvez le constater, cela vous donne quelques options supplémentaires, mais cela reste un jeu de couleurs complémentaire.
08 sur 10Palette de couleurs Web triadique
Les combinaisons de couleurs triadiques se composent de 3 couleurs plus ou moins équidistantes autour de la roue chromatique. Puisqu'une roue de couleurs correspond à 360 degrés, j'ai à nouveau utilisé la boîte de teinte du sélecteur de couleurs pour ajouter et soustraire 120 degrés à la couleur de base.
- en haut à gauche - la couleur de base # ffe500
- en haut à droite - +120 degrés pour obtenir le numéro e500ff
- en bas à gauche - -120 degrés pour obtenir # 00ffe6
- en bas à droite - 100% blanc #ffffff
Les combinaisons de couleurs triadiques produisent souvent des pages Web très dynamiques. Mais comme les couleurs complémentaires, elles peuvent affecter les personnes différemment. Assurez-vous de tester.
Vous pouvez également créer des jeux de couleurs tétradiques ou 4 couleurs, dans lesquels les couleurs sont équidistantes autour de la roue chromatique.
09 sur 10Palette de couleurs Web plus triadique
Comme pour les autres exemples, j'ai ajouté un carré noir à 30% aux couleurs pour obtenir les nuances supplémentaires.
10 sur 10Palettes de couleurs Web discordantes
La beauté est dans l'oeil du spectateur, mais c'est un fait regrettable que toutes les couleurs ne vont pas ensemble. Les couleurs discordantes sont des couleurs distantes de plus de 30 degrés environ sur la roue chromatique et ne sont pas complémentaires ni ne font partie d'un trièdre.
Les couleurs discordantes peuvent être très choquantes et ne doivent être utilisées que pour attirer l'attention. N'oubliez pas que, parce que ces couleurs se heurtent souvent, l'attention que vous obtenez peut ne pas être exactement ce que vous recherchez.
