Si vous vous souvenez aussi loin qu’en janvier, l’un de mes objectifs pour 2013 était d’en apprendre davantage sur la couleur et de partager une partie de ce que j’apprends avec vous. J’ai parlé auparavant de la façon dont je sens que mes compétences en matière de travail avec la couleur sont insuffisantes et j’ai dit qu’à un moment donné cette année, je prendrais quelques livres sur la couleur dans l’espoir de changer cela.
Un anniversaire, un frère quelque peu généreux et un service de qualité d’Amazon plus tard, et un assortiment de livres (y compris quelques-uns spécifiquement sur la couleur) sont ici en attente d’être lus. Merci David.
J’ai fini de lire l’un des livres sur la couleur, Design Elements : Color Fundamentals, et j’ai pensé que je devrais commencer à partager. Je veux commencer par la façon dont nous décrivons les couleurs en partie parce que c’est le début et en partie parce que cela a conduit à une certaine clarté dans la façon dont je comprends la couleur.
Comment nous décrivons la couleur
Il y a 3 façons primaires de décrire une couleur et puisque le livre l’a ajouté, j’ajouterai également une 4e façon de décrire la couleur.
- Tonalité – un autre mot pour la couleur
- Saturation (chroma) – l’intensité ou la pureté d’une teinte
- Luminosité (valeur) – le degré relatif de noir ou de blanc mélangé à une teinte donnée
- Température – la chaleur ou la fraîcheur perçue d’une couleur
Détaillons un peu plus chacune d’elles.
Les teintes sont des couleurs et la teinte que nous voyons dépend de la longueur d’onde de la lumière réfléchie ou produite. Je doute avoir besoin de vous dire ce qu’est une couleur et puisque couleur et teinte sont synonymes, vous devriez savoir ce qu’est une teinte également. Je vous rappelle toutefois que nous percevons tous les couleurs différemment. La teinte que vous voyez peut ne pas être la même que celle que je vois.
La saturation fait référence au degré de pureté ou d’intensité d’une teinte donnée. Une saturation de 100% signifie qu’il n’y a pas d’ajout de gris à la teinte. La couleur est complètement pure. A l’autre extrême, une teinte avec 0% de saturation apparaît comme un gris moyen. Plus une couleur est saturée (proche de 100 %), plus elle paraît vive ou lumineuse. Les couleurs désaturées, en revanche, apparaissent plus ternes.
La saturation d’une teinte dépend également dans une certaine mesure des couleurs à côté desquelles elle se trouve. Une teinte saturée à 50% placée à côté d’une teinte saturée à 25% paraîtra plus vive que si la même teinte était placée à côté d’une teinte saturée à 75%.
La luminosité mesure le degré relatif de noir ou de blanc qui a été mélangé à une teinte donnée. L’ajout de blanc rend la couleur plus claire (crée des teintes) et l’ajout de noir la rend plus sombre (crée des ombres). L’effet de la luminosité ou de la valeur est relatif aux autres valeurs de la composition. Vous pouvez faire paraître une couleur plus claire en la plaçant à côté d’une couleur plus sombre.
Plus la différence de valeur entre les éléments est grande, plus le contraste entre eux est important. Pour cette raison, la clarté est un bon moyen de montrer le contraste et d’indiquer la hiérarchie entre les éléments. Environ 7 étapes de luminosité est la variation maximale que l’œil humain peut discerner. Au-delà, il devient difficile de distinguer les différences.
La température est la chaleur ou la fraîcheur perçue d’une couleur. Les couleurs chaudes sont le rouge, l’orange et le jaune, tandis que les couleurs froides sont le vert, le bleu et le violet. Quelque part dans les spectres vert et violet, la température change entre chaud et froid.
La façon dont l’œil reconnaît la température de la couleur peut changer en fonction de la source de lumière. Par exemple, la température réelle d’un écran d’ordinateur peut affecter la température de couleur perçue.
Les couleurs chaudes ont tendance à avancer au premier plan d’une composition tandis que les couleurs plus froides reculent à l’arrière-plan. Tout comme la saturation et la luminosité, la température peut être relative. Placez une couleur chaude contre une autre plus chaude et la couleur initiale paraîtra plus froide que si elle était placée contre une couleur froide.
Harmonie des couleurs
En travaillant avec la couleur, notre objectif est de choisir une palette de combinaisons de couleurs agréables (sauf dans les cas où une combinaison déplaisante complète mieux le message). Nous essayons d’atteindre une sorte d’harmonie des couleurs.
L’harmonie des couleurs peut être subjective. Ce qui fonctionne pour votre œil peut ne pas fonctionner pour le mien. Les principes de la théorie des couleurs visent à réduire la subjectivité en offrant des lignes directrices qui nous aident à trouver des paires et des groupements de couleurs plus susceptibles de bien fonctionner.
Par exemple, l’un des principaux principes soutient que l’œil est toujours à la recherche de l’équilibre et de l’équilibre dans la couleur qui le conduisent à arriver à des combinaisons neutres comme lorsqu’une teinte est combinée avec son opposé ou son complément. C’est une des raisons pour lesquelles nous voyons souvent des images rémanentes d’une couleur différente (mais avec la même saturation et la même luminosité) lorsque nous fixons une couleur pendant trop longtemps.
La théorie des couleurs ne conduit pas toujours à des résultats prévisibles. Parfois, la théorie et la pratique ne correspondent pas tout à fait, ce qui signifie que nous devons développer nos yeux pour la couleur et expérimenter différentes combinaisons de teinte, de saturation et de luminosité.
La déconnexion de la théorie et de la pratique de la couleur
Comme je l’ai dit plus haut, quelque chose a cliqué pour moi en lisant Color Fundamentals. Nous décrivons la couleur en termes de teinte, de saturation et de luminosité (HSL), pourtant nous définissons généralement les valeurs de couleur sur le web en utilisant des valeurs hexadécimales et, dans une moindre mesure, des valeurs RVB. Ne serait-il pas plus logique de travailler avec le système qui décrit mieux la couleur ?
Note : HSL n’est pas la même chose que HSB (teinte, saturation, luminosité) ou HSV (teinte, saturation, valeur) que l’on trouve dans la plupart des outils de couleur.
L’hexagone et le RVB sont en réalité deux versions de la même chose. Chacun fournit 256 valeurs possibles pour la quantité de rouge, de vert ou de bleu dans une couleur donnée. Le HSL fonctionne différemment. Il n’y a pas de moyen facile de jeter un coup d’œil à quelque chose comme rgb(63, 69, 146) ou son équivalent hexa #3f4592 et de savoir facilement qu’il est saturé à 40% ou hsl(236, 40, 41).
Si vous voulez voir les mathématiques impliquées dans la réalisation de la conversion, jetez un coup d’œil à l’un ou à tous les liens ci-dessous
- Algorithmes de couleur
- Conversion des couleurs RVB en LSH
- Conversion des couleurs LSH en RVB
Pourquoi cela ? Pourquoi y a-t-il une déconnexion entre la façon dont nous essayons de comprendre la couleur et la façon dont nous essayons de l’utiliser ? Si quelque chose HSL est le système plus intuitif car il décrit réellement les couleurs que nous voyons et correspond à la théorie des couleurs.
Je réalise que les compétences en matière de couleur viennent du développement d’un œil critique pour les couleurs et de la pose de questions sur la raison pour laquelle quelque chose fonctionne ou ne fonctionne pas. Et il s’agit de répondre à ces questions en observant les couleurs autour de vous.
Il semble juste que ce serait plus facile si la théorie et la pratique parlaient le même langage. Maintenant que j’ai réalisé cela, j’ai décidé de m’engager à utiliser les valeurs HSL autant que possible dans mon code. La pierre d’achoppement est IE8 et les versions inférieures, qui n’acceptent pas hsl() ou rgb(). Ils ont besoin de valeurs hexadécimales. Mais ce n’est pas grave, puisque SASS peut effectuer la conversion. Vous pouvez utiliser hsl() dans SASS et faire en sorte que la sortie html soit une valeur hexadécimale.
Pour accompagner mon engagement, j’ai commencé à construire un outil de couleur simple pour m’aider à apprendre et à étudier. Ce n’est pas quelque chose que vous voudriez utiliser dans son état actuel pour choisir une palette de couleurs, mais il vous permet de jouer avec les valeurs de teinte, de saturation et de luminosité pour voir comment chacun affecte une couleur particulière et les couleurs qui l’entourent. Je partagerai cet outil plus tard dans la semaine.
Depuis un certain temps, je soupçonne que les relations mathématiques entre les couleurs pourraient offrir un guide pour travailler avec elles et j’ai souvent cherché ces relations dans les valeurs hexagonales des couleurs. Mon espoir d’utiliser hsl() davantage et de jouer avec mon outil de couleur simple est qu’ils m’aideront à connecter la théorie aux couleurs que j’utilise dans la conception un peu mieux qu’ils sont connectés pour moi maintenant.
Gardez à l’esprit cette déconnexion dans la façon dont nous apprenons et décrivons la couleur et comment nous l’utilisons. La réalisation m’a donné une plus grande compréhension pour mieux étudier la couleur et c’est pourquoi je voulais commencer cette conversation avec les bases de la façon dont nous décrivons la couleur. J’aurai bientôt d’autres posts sur la couleur, en commençant plus tard dans la semaine lorsque je parlerai de l’outil simple que j’ai créé pour m’aider.
Téléchargez un échantillon gratuit de mon livre, Design Fundamentals.