Share
Bienvenue à la dixième leçon de notre série Web Design for Kids, consacrée à la couleur.
Dans ce didacticiel, nous allons aborder la théorie des couleurs, différentes manières d'utiliser les couleurs dans notre code CSS, la signification de certaines couleurs, et examiner comment sélectionner les couleurs parfaites pour nos sites. Nous finirons avec quelques astuces pour utiliser la couleur sur le web.
N'oubliez pas de poser des questions dans la section commentaires au bas de cette page.!
Théorie des couleurs implique beaucoup de choses, mais l’objectif principal est de voir comment les couleurs se comportent les unes avec les autres dans un dessin. Nous appelons un groupe de couleurs choisies pour être utilisées ensemble Palette de couleurs. Une palette de couleurs bien conçue aura des couleurs qui complément l'autre et avoir bon contraste et vivacité. Nous allons parler de ce que ces mots signifient dans un instant.
Choisir les bonnes couleurs et savoir pourquoi certaines couleurs fonctionnent et d’autres ne peuvent pas déterminer si notre conception fonctionnera ou non. Un mauvais choix de couleurs peut rendre notre site difficile à utiliser, ou notre texte impossible à lire et l'utilisateur quittera notre site Web..
Avant d’aller trop loin dans notre didacticiel, parlons de la terminologie de base des couleurs que nous mentionnerons beaucoup. Nous utiliserons ces termes pour nous aider à mieux comprendre ce qui rend chaque couleur si unique..
UNE teinte est(plus ou moins) la couleur d'un objet. Lorsque nous appelons des choses «rouges» ou «jaunes», nous parlons de leur teinte.
Couleur saturation fait référence à la couleur vive ou forte d’une couleur. Une faible saturation crée une couleur qui semble délavée, alors qu'une saturation élevée produit des couleurs très vives.
Luminosité fait référence à la clarté ou à la noirceur d'une couleur. Cela va du noir (pas de luminosité) au blanc (luminosité totale).
La palette de couleurs est basée sur le rouge, le jaune et le bleu et est très bien connue des artistes. En tant que concepteurs, comprendre comment les couleurs sont créées nous aide à avoir une meilleure idée des couleurs. complément l'autre et pourquoi.
La roue gauche de la voiture ci-dessous montre les trois couleurs primaires. Avec ces trois couleurs on peut créer toutes les autres couleurs.
La roue à droite sur la voiture ci-dessus montre couleurs secondaires aussi: les couleurs qui ont été créées en mélangeant les couleurs primaires. Par exemple, le bleu et le jaune font le vert, alors que le bleu et le rouge font le violet.
La roue chromatique de gauche sur la voiture ci-dessous montre une couche supplémentaire: couleurs tertiaires. Ce sont des couleurs créées en mélangeant une primaire et secondaire Couleur. Par exemple, mélanger le bleu au violet crée un violet bleuâtre foncé.
Il existe un certain nombre de systèmes de couleurs (manières de décrire les couleurs), mais seuls certains systèmes conviennent au Web..
RVB signifie “Red Green Blue” et décrit comment nous percevons les couleurs sur les écrans électroniques. Ces trois couleurs peuvent être combinées pour produire de nombreuses autres couleurs. Les trois valeurs sont répertoriées dans l’ordre, chacune allant de 0 à 255..
corps arrière-plan: rgb (138, 138, 226);
Le CSS ci-dessus produit un fond jaune-orange sur une page. Entre les parenthèses, vous pouvez voir différentes valeurs de rouge, de vert et de bleu..
Nous avons seulement utilisé une couleur hexadécimal valeur jusqu'à présent dans cette série, mais nous pouvons utiliser une couleur dans notre CSS de différentes façons.
Visitez ce site pour une liste rapide des valeurs hexadécimales et RVB pour 500 couleurs spécifiques..
HSL signifie «teinte saturation luminosité» et la valeur est composée de trois chiffres dans cet ordre.
Nous pouvons déclarer le même jaune-orange sur le corps d'une page en utilisant une valeur HSL au lieu des valeurs Hex ou RGB de la couleur:
corps arrière-plan: hsl (43,100%, 57%);
La première valeur ici, 43, représente un angle sur un cercle de couleur. C’est ce qui nous donne la teinte. Le rouge correspond à 0 ou 360 degrés, le vert à 120 degrés et le bleu à 240 degrés.
La deuxième valeur nous donne un pourcentage de saturation pour la couleur, 100% étant ici saturation complète.
La valeur finale, légèreté, détermine à quel point la teinte est claire ou sombre. 100% est blanc, 0% est noir et tout ce qui se trouve entre les deux déterminera une combinaison des deux..
La valeur que nous utilisons dans notre CSS est notre choix, mais les valeurs HSL sont plus faciles à deviner en sélectionnant une valeur d'angle se déplaçant dans le sens anti-horaire du rouge (0), puis en ajoutant le pourcentage de saturation et de luminosité que nous souhaitons..
Il y a un nombre limité de couleurs qui ont des noms que nous pouvons utiliser dans notre CSS, aucun nombre requis.
corps fond: vert;
Une liste complète de ces noms de couleurs peut être trouvée ici.
Si nous avons déjà une valeur Hex et que nous avons besoin de la valeur RVB ou HSL de cette couleur (ou vice versa!), Il existe certains outils intéressants qui fonctionneront pour nous, comme rgb.to et Colorrrs..
Les couleurs ont beaucoup de sens. Selon le pays dans lequel vous vivez, une certaine couleur peut signifier danger, amour, bonheur ou mal. Les couleurs peuvent amener les utilisateurs à réagir avec certaines émotions. Il est donc important de les comprendre pour pouvoir communiquer notre message à l'utilisateur..
Regardez ce tableau qui montre comment différentes couleurs signifient différentes choses selon les cultures..
Discutons brièvement de certaines significations derrière les trois couleurs primaires: jaune, rouge et bleu..
Le jaune attire l'attention de l'utilisateur plus que toute autre couleur et d'habitude représente le bonheur et le soleil. Par ailleurs, le jaune peut aussi signifier «prudence», comme le montrent de nombreux panneaux de signalisation..
Utiliser du jaune sur le Web peut être très accrocheur, il est donc préférable de ne pas en abuser et de ne mettre en avant que des informations importantes..
Selon le pays dans lequel vous vivez, le rouge peut signifier quelque chose: danger, colère, énergie, amour et bonheur. Quoi qu’il en soit, le rouge est toujours utilisé pour représenter un extrême sentiment ou action.
Dans la conception Web, le rouge est souvent utilisé pour communiquer la suppression ou les erreurs. C'est une couleur audacieuse qui attire l'attention de l'utilisateur afin qu'elle puisse bien fonctionner comme couleur d'accent. Trop de rouge sur un site peut être accablant et il peut être difficile de dire ce qui est particulièrement important.
Le bleu représente à la fois le calme et la tristesse et est une couleur très populaire sur le Web..
La sensation créée par l'utilisation du bleu dans les dessins dépendra grandement de la nuance et de la teinte que nous choisirons. Tandis qu'un bleu foncé communiquera force et fiabilité, un bleu plus clair sera plus amusant et convivial.
La plupart des sites auront une série de couleurs permettant de hiérarchiser et de définir les sentiment d'une conception. Notre choix de couleurs peut être tout aussi important que toutes les autres décisions de conception que nous avons eu à prendre jusqu'à présent. Nous devons donc surveiller de près les couleurs qui vont bien ensemble, que nous ayons ou non obtenu un bon contraste sur toute la page. si les couleurs ont la même sensation ou signification que notre contenu.
Voici un autre aperçu de la palette de couleurs principale utilisée dans la série de didacticiels Tuts + Town:
Les couleurs les plus claires sont utilisées comme arrière-plans, tandis que les couleurs les plus sombres sont utilisées pour le texte ou pour surligner certaines sections..
De manière générale, les couleurs existantes à travers les uns des autres sur la roue des couleurs sont considérés comme agréables à l'oeil. Ceux-ci sont complémentaire couleurs-quand ils combinent ils produisent une nuance de gris. Il est possible que les couleurs situées les unes à côté des autres sur la roue chromatique fonctionnent bien ensemble, mais il faudra peut-être un peu d'ajustement de la saturation et de la luminosité pour obtenir le bon couplage..
Nous avons également abordé un peu contraste dans le précédent tutoriel sur les bases de la conception, mais jetons brièvement un autre regard.
Un bon contraste réduit la fatigue oculaire et clarifie la hiérarchie visuelle. Le meilleur exemple de contrat bon / mauvais peut être vu en comparant certaines combinaisons de couleurs d’arrière-plan et de texte.
L'image ci-dessus montre un faible contraste à gauche et un meilleur contraste à droite. Le texte avec un contraste faible est difficile à lire et blesse les yeux, créant un effet flou.
Il existe des outils qui nous fournissent des listes de belles palettes de couleurs parmi lesquelles choisir, ce qui peut vous faire gagner beaucoup de temps et vous inspirer..
Coolors.co est l’un des sélecteurs de couleurs les plus faciles à utiliser actuellement..
Il nous fournit de belles palettes de couleurs que nous pouvons personnaliser et modifier en appuyant sur la barre d'espace..
Adobe Color est un autre outil de sélection des couleurs qui tire parti de cette incroyable roue des couleurs dont nous avons parlé plus tôt..
Nous pouvons modifier la roue chromatique en déterminant notre palette, puis effectuer des réglages supplémentaires pour chaque couleur..
Adobe Color nous permet également de sauvegarder nos palettes préférées et de parcourir celles déjà sélectionnées et présélectionnées..
Lorsque vous choisissez des couleurs pour le Web et que vous les appliquez aux éléments de la page, il est important de garder quelques points à l'esprit pour vous assurer que ces couleurs améliorent l'expérience de l'utilisateur..
Le contraste est si important qu'en cas de doute, choisissez l'option la plus sûre. même si cela semble un peu «ennuyeux»! Certaines des tâches les plus importantes en tant que concepteurs sont de veiller à ce que les choses soient fonctionnelles, faciles à utiliser et à lire. Un faible contraste empêchera nos utilisateurs de pouvoir lire notre merveilleux contenu.
Par conséquent, même si vous êtes aventureux dans vos choix de couleurs, ceux-ci ne doivent jamais nuire au fonctionnement général du site ni détourner l'attention du contenu..
Les outils de sélection de palette de couleurs, tels que Coolors, nous fournissent souvent cinq couleurs. Cinq couleurs nous permettent d’avoir une ou deux couleurs dominantes et quelques couleurs moins dominantes pour des choses comme les boutons et les liens..
Avoir beaucoup plus de cinq couleurs différentes expose nos conceptions au risque d’être incohérentes et difficiles à suivre; si blanc, noir et gris ne doivent pas être comptés ici.
Il est très important de ne pas s'écarter de l'utilisation de couleurs généralement acceptées par de nombreuses personnes. Par exemple, la plupart des gens sont habitués à vert signifiant «ajouter» et rouge à «supprimer». Inverser cela sur notre site Web serait une mauvaise décision de conception, car ce n'est pas ce à quoi on s'attendait et cela déroutera probablement les utilisateurs..
Dans ce tutoriel, nous avons discuté des théories et des règles de couleur et de la manière de les sélectionner et de les utiliser correctement sur le Web. Chaque couleur porte son propre message. Nous devons nous assurer que ce message correspond à celui de notre contenu grâce à des choix de palette bien pensés..
Nous terminerons ensuite notre série avec quelques réflexions finales et différentes manières de partager notre travail acharné avec vos amis et votre famille en ligne.
On se voit en ville!
Accentsconagua