Share
Les codes de couleur HTML sont un élément commun et crucial de la conception Web moderne. De nos jours, la plupart des sites sont principalement conçus avec des images, mais les couleurs sont particulièrement importantes lorsque vous devez définir une valeur hexadécimale de couleur à la volée lors du codage. Dans ce guide, nous allons apprendre les bases du codage couleur, pour vous donner le pouvoir de créer des couleurs sans utiliser de sélecteur de couleur.
Comme vous le savez peut-être, il existe deux méthodes courantes pour définir une couleur dans la conception Web:
Les deux sont le plus souvent implémentés à l'aide de CSS ou HTML, comme vous pouvez le voir ci-dessous:
Texte ici Texte ici
.foo color: rgb (111,222,111);
Dans le premier exemple de code, chaque texte "Text Here" serait affiché en gris clair. Nous verrons pourquoi c'est plus tard; Notez cependant que même si les méthodes de couleur semblent être très différentes, elles sont en réalité de la même couleur..
Dans le deuxième exemple, nous avons juste un code CSS rapide. C'est assez simple - tout ce qui a une classe de "foo" aura une couleur de texte de RGB (111.222.111). Pour les plus curieux, ce serait une couleur vert lime.
Jusqu'ici, la plupart de cela devrait vous sembler logique. Passons maintenant à la façon dont nous passons de ces codes relativement cryptés à quelque chose d'un peu plus concret.
En RVB, chaque valeur entre les virgules peut être un nombre compris entre 0 et 255. Par exemple:
rgb (10,137,29)
Puisque RVB signifie "Rouge Vert Bleu", cela signifie qu'il existe une valeur de 10 pour le rouge, de 137 pour le vert et de 29 pour le bleu. Inévitablement, il s’agit d’une sorte de fraction irréductible. Ainsi:
Plus le nombre est élevé, plus le résultat final aura une certaine couleur..
Lorsqu'il est défini sur zéro, il n'y a aucune de cette couleur particulière. À 255, l'inverse se confirme bien sûr. Donc:
Cela est vrai car le système de couleurs RVB est basé sur la couleur à travers lumière. Ceci est très différent de la manière dont vous créez normalement des couleurs, par exemple avec de la peinture ou des crayons. Si vous utilisiez une combinaison de peinture à base de peinture à base de poudre, vous obtiendrez probablement quelque chose comme un brun trouble, mais certainement pas du blanc.!
La couleur hexadécimale est généralement plus difficile à expliquer que la couleur RVB. Fondamentalement, ils sont les mêmes. Cependant, le fonctionnement interne d’hexadécimal est sans doute plus compliqué..
Pour expliquer la couleur hexadécimale, nous devons d’abord retomber dans un système binaire et dans le système de base à seize chiffres afin de comprendre ce que quelque chose de ce genre tente réellement de "dire":
# 554BFF
Pour ceux d'entre vous qui ne savent pas comment fonctionne l'un ou l'autre, voici un bref guide:
Si cela vous semble un peu déroutant, je suggère de relire dessus. Si cela n'a toujours pas de sens par la suite, c'est parfait, les exemples suivants vous aideront à renforcer votre compréhension..
Hexadécimale, comme son nom l'indique, fournit seize "valeurs" utilisables qu'un nombre peut prendre. Comme vous l'avez peut-être remarqué plus tôt, un "petit" peut vous donner un nombre quelconque compris entre 0 et 15: total de seize valeurs!
En supposant que nous ayons les éléments suivants:
1111
Et sachant que les valeurs binaires de chaque bit deviendront comme suit:
8 4 2 1
La valeur binaire de 1111 deviendra:
8 + 4 + 2 + 1
lequel est…
15
De même, si le nombre binaire avait été égal à 0000, le résultat final aurait été égal à zéro, car 0 + 0 + 0 + 0 est égal à 0..
binaire: 0101
Les valeurs pour chaque bit sont 8,4,2 et 1 (dans l’ordre). Additionnez les valeurs binaires de celles-ci:
0 + 4 + 0 + 1
Égalité 5.
Espérons que ces exemples rapides sont utiles. Je vous encourage à en essayer d'autres rapidement. Je vais même vous en donner un:
Convertir de binaire à décimal: 1010
Indice: il est entre 9 et 11.
Cela peut donner l'impression que cela ne mène nulle part en matière de développement Web, mais croyez-moi, nous y sommes presque.
En hexadécimal, il existe seize représentations différentes pour une séquence binaire: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E et F. Celles-ci, à leur tour, , représente les nombres de 0 à 15 (total de 16 chiffres). Les deux représentent le même nombre binaire. Mais rapidement - arrêtez-vous et réfléchissez - #FFFFFF donne du blanc, n'est-ce pas? Et vous ne pouvez jamais avoir une lettre plus haute que F dans un code de couleur HTML. Garde cela à l'esprit.
Voici un tableau rapide qui mappe la relation entre binaire, décimal et hexadécimal:
Cela signifie que si vous voulez créer le nombre 15, vous pouvez écrire F en hexadécimal ou 1111 en binaire. De plus, si vous voulez faire 10, écrivez A en hexadécimal ou 1010 en binaire.
Nous sommes maintenant un peu plus près de comprendre exactement comment fonctionne l'hexadécimal. Rapidement, imaginons un exemple de code couleur HTML divisé en trois parties:
# 006699 à -> # 00,66,99
Maintenant, cela semble un peu familier; si vous pensez ce que je pense, vous avez raison. Le format hexadécimal est organisé exactement de la même manière que le mode RVB: il a une valeur pour chaque rouge, vert et bleu. La différence fondamentale est:
Nous allons maintenant voir comment vous pouvez créer une valeur jusqu'à 255, car jusqu'à présent, nous n'avons appris à créer que des nombres allant jusqu'à 15..
Binaire: 0110 Valeurs en bits: 128 64 32 16 Ajoutez ensemble toutes les valeurs vraies: 0 + 64 + 32 + 0 Rendements: 96
Nous avons constaté que le premier quartet à droite équivaut à six. Et maintenant, nous avons constaté que le deuxième grignotage à gauche valait 96. Alors, que faites-vous avec cela? Il suffit de les ajouter! 96 + 6 = 102. Par conséquent, la valeur hexadécimale de 66 est 102 dans le système décimal normal.
Cela signifie que, en hexadécimal, l'équivalent RVB de 66 (en hexagone) est 102. Par conséquent, le numéro 666666 est égal à rgb (102,102,102).
Faisons encore une conversion hexadécimale en décimale:
Hexadécimale: FF Binaire: 1111 1111 Valeurs en bits: 128 64 32 16 8 4 2 1 Ajouter: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Rendements: 255
255 est la valeur maximale pour toute couleur. Donc, si nous avions #FFFFFF, que nous savons tous être blancs, ce serait rgb (255,255,255), qui est blanc aussi.
Pour la compréhension, faisons une dernière conversion. Cette fois, nous allons convertir une couleur hexadécimale entière en RVB. Notre couleur est # 6AB4FF.
6A ------ Binary: 0110 1010 Add: 64 + 32 + 8 + 2 96 + 10 Rendements: 106 ------ B4 ------ Binary: 1011 0100 Add: 128 + 32 + 16 + 4 176 + 4 Rendement: 180 ------ FF ------ (Nous l'avons déjà fait, nous savons donc que c'est 255)
Conclusion: # 6AB4FF est équivalent à rgb (106,180,255).
Maintenant, vous vous demandez peut-être comment nous passons de ces valeurs à une couleur réelle que nous pouvons imaginer dans notre tête. La prochaine section aidera à couvrir cela. Donc, maintenant que nous savons comment hexadécimal et RVB sont liés, et maintenant que nous savons comment fonctionne hexadécimal, nous allons maintenant examiner comment vous pouvez créer une couleur à la volée dans votre propre code et vous aider à créer des couleurs. couleur sans jamais avoir besoin d'utiliser un sélecteur de couleur.
Fait amusant rapide: Comme il y a 8 bits dans chaque valeur de rouge, vert et bleu, cela signifie qu'il y a 24 bits au total dans une couleur RVB (8 * 3 = 24). C’est ici que l’on désigne le terme couleur 24 bits, souvent appelé "True Color".
Avec la couleur 24 bits, nous sommes en mesure de créer jusqu'à 16 777 216 - plus de seize millions - de couleurs. Ceci est généralement plus que satisfaisant pour tout projet. La couleur 32 bits a toutefois commencé à prendre de l'ampleur, mais pas nécessairement dans le domaine de la conception Web. Vous pouvez en savoir plus sur la profondeur de couleur sur Wikipedia.org dans cet article. De plus, vous pouvez afficher une image de l’ensemble des 16 millions de couleurs environ dans une seule image ici (David Naylor Blog). C'est assez fascinant, vraiment! Les tailles d’image de 4096x4096 ont un sens puisque 4096 est la racine carrée de 16 777 216.
Pour que ces connaissances nous soient utiles, vous allez devoir apprendre à créer vos propres couleurs rapidement et facilement. Nous allons commencer aussi simple que possible, puis passer à des couleurs plus difficiles à articuler.
Disons que nous voulons faire une couleur grise à la volée. Les couleurs en niveaux de gris sont courantes et tendent à être les plus utiles dans de nombreux cas. Jusqu'à présent, nous savons ce qui suit: # 000000 est égal à noir,
et #FFFFFF est égal à blanc. Par conséquent, les couleurs les plus courantes des niveaux de gris vont être des incréments entre ces deux valeurs. Pour créer une nuance de gris, il convient d’établir des valeurs appropriées entre le blanc et le noir..
Logiquement, une valeur proche de #FFFFFF sera un ton de gris plus clair et une valeur plus proche de # 000000 sera plus sombre. Dans cet esprit, faisons une couleur gris assez claire. Quelques réflexions rapides nous donnent la résolution suivante: #DDDDDD est suffisamment à l’écart du blanc pour que ce soit clairement un beau gris clair pour nous..
Plus tard, nous voulons faire un gris plus foncé. Encore une fois, simple. Faites juste quelque chose comme # 333333. Comme vous pouvez le voir, les valeurs de gris sont très simple. Si vous estimez avoir besoin d’une nuance de gris encore plus précise, n’oubliez pas que, en règle générale,,
si chaque valeur pour le rouge, le vert et le bleu est identique ou presque identique, elle apparaîtra en gris. Un exemple de ceci est la couleur "Gainsboro" qui a un code de couleur #DCDCDC. Cela signifie que c'est juste un de moins que notre couleur #DDDDDD dans chaque valeur de rouge, de vert et de bleu. Vous ne pourrez probablement pas différencier les deux, mais incrémenter ou décrémenter de 1 vous donnera un peu plus de "précision des gris".
Le deuxième ensemble de couleurs le plus simple que vous pouvez créer est le rouge, le vert et le bleu (évidemment). Utilisons le rouge comme exemple. Si nous voulons créer du rouge RVB pur, nous donnerons la valeur de couleur
la valeur maximale de rouge, avec 0 vert et 0 bleu. C'est logique, non? Pour rendre le rouge en hexadécimal, nous venons de mettre # FF0000. Maintenant nous avons rouge.
La création de vert et de bleu suit exactement le même principe. Pour faire du vert pur: # 00FF00 (tout vert, rien d’autre). Pour faire du bleu pur: # 0000FF (tout bleu, rien d’autre).
Assez simple; Cependant, ces couleurs sont, dans la plupart des cas, absolument hideuses lorsqu'elles sont utilisées dans une conception Web. Par conséquent, pour utiliser ces couleurs, nous devrons les colorer en conséquence..
Heureusement, l'ombrage est également facile. Utilisons le bleu pour cet exemple. Nous avons déjà configuré # 0000FF pour nous. Afin de changer la nuance de notre valeur bleue, nous devons simplement changer les deux derniers caractères du code de couleur hexadécimal. Puisque le FF est le bleu le plus élevé possible, nous ne pouvons vraiment que le rendre plus sombre. En tant que tel, faisons juste cela:
Changer # 0000FF en # 000055 (diminuer la quantité de noir, rapprochant ainsi le bleu du noir) donnera un bleu plus foncé.
Comme vous pouvez le constater, ombrer le rouge, le vert et le bleu n’est pas difficile, c’est une simple question de diminuer la quantité d’une certaine couleur. La même règle s'applique au rouge et au vert, pas seulement au noir, de sorte que # 005500 est une nuance de vert plus sombre et que # 550000 est une nuance de rouge plus sombre. (Bien sûr, vous pouvez aller plus bas ou plus haut que 55 si vous le souhaitez).
Je suppose que vous pensez probablement: alors qu'en est-il du jaune, du violet et de toutes les autres couleurs? Eh bien, heureusement, il est juste un peu plus complexe que les trois grands de RGB. Commençons par le jaune.
Pour créer du jaune, nous devons d'abord penser au spectre de couleurs. "Roy G. Biv", qui signifie "rouge, orange, jaune, vert, bleu, indigo, violet" est une petite mnémonique que les gens aiment utiliser. Maintenant, la logique est un peu déroutante, mais essayez de rester avec moi. Pour obtenir le jaune, nous utilisons les deux couleurs principales rouge, vert et bleu de part et d’autre de l’endroit où se trouverait le jaune. Dans ce cas, ce serait rouge et vert. Ainsi, si nous écrivions # FFFF00, nous aurions le jaune. Fantastique!
Il n'y a que quelques autres combinaisons possibles utilisant cette méthode, nous allons donc les passer rapidement en revue. Entre le rouge et le bleu sur une roue de couleur, le code serait # FF00FF, et nous aurions le rose, ou le magenta comme on l'appelle traditionnellement, Ensuite, entre le vert et le bleu (# 00FFFF), nous avons le cyan. Et maintenant, malheureusement, c’est en fait toutes les combinaisons simples que nous pouvons faire. Le reste nécessite une réflexion, que nous allons parcourir dans une minute. Tout d'abord, voyons comment nuancer ces couleurs.
Assez simplement, nous allons commencer à ombrer du cyan cette fois, ce qui, comme nous nous en souvenons, est # 00FFFF. Et… vous l'avez probablement deviné, mais pour nuancer le jaune, le cyan ou le rose, tout ce que vous avez à faire est de changer les valeurs de FF en valeurs plus petites. Dans cet exemple, en dégradant le cyan d'une variété beaucoup plus sombre, nous pourrions faire quelque chose comme # 005555. L'un des noms de couleur HTML officiels, DarkCyan, est # 008B8B, ce qui en fait un peu plus clair que celui que nous venons de créer. Nous y voilà donc: comment nuancer le jaune, le cyan et le rose.
Pour rendre une couleur plus claire, il suffit simplement de définir des valeurs faibles (les valeurs 00 en général). plus grand et en laissant le FF (ou d'autres couleurs principales) seul. Par exemple, si nous avions le vert et que nous voulions le rendre plus léger, nous commencerions par le numéro 00FF00. Ensuite, pour l’alléger, nous augmenterions simplement les valeurs 00. #AAFFAA produit une belle couleur verte au printemps.
De plus, afin de rendre le # FF00FF (Rose) plus clair, le processus est identique. Augmentez les valeurs basses: #FFAAFF. Cela produit une couleur rose pâle. Fonctionne comme un charme!
Jusqu'à présent, nous avons appris à créer la plus simple des couleurs, mais dans la plupart des applications, cette connaissance ne sera pas utile pour un projet. C'est là que cette deuxième partie entre en jeu.
Afin de créer une belle couleur, nous devrons travailler à partir de ce que nous savons déjà et réfléchir à ce que nous essayons de créer de manière logique. Créons un scénario. nous voulons créer une couleur orange subtile qui correspond à nos besoins - un peu comme une nuance légèrement plus foncée de soda à l'orange.
Nous allons commencer avec ce que nous savons déjà faire, et c'est jaune: # FFFF00. Nous devons le rapprocher un peu de la zone orange. Pour ce faire, nous atténuerions une partie de la "traction" verte, comme j'aime l'appeler. Cela augmente la quantité de rouge. J'ai choisi de le changer en # FF5500. Cet exemple simple et rapide vous donne une idée de la manière dont vous allez créer une couleur. La dernière chose que je voudrais mentionner est que vous vous demandez peut-être pourquoi je n’ai pas commencé à ajouter à la quantité de bleu, que nous avons laissée avec une valeur de 00. La raison en est que, lorsque vous commencez à ajouter du bleu lentement par incréments de 11, 22, 33, et cetera, ça a toujours l’air assez orange. Cependant, une fois que vous avez dépassé les 55 ans, vous verrez quelques problèmes. En particulier, si nous augmentons le nombre jusqu'à quelque chose comme # FF5599. Qu'est-ce qui se passe est que cela se transforme en une couleur vraiment rose. Pourquoi est-ce? Pensez au moment où nous avons créé le rose. Le code était # FF00FF. Le rouge est au maximum et le bleu au maximum. Ainsi, dans notre couleur orange, lorsque vous commencez à passer de # FF5500 à # FF5599, nos valeurs de rouge et de vert ne sont plus les valeurs prédominantes. Au lieu de cela, il est rouge et bleu, ce qui donne du rose. De cette façon, la valeur de 55 pour le vert éclairerait simplement notre nuance de rose au lieu de la déplacer vers la zone orange..
Note au lecteur: Certes, la création de codes de couleur complexes n’est pas pratique. Au moment où vous auriez besoin de créer une couleur suffisante, vous auriez pu facilement obtenir plusieurs bonnes couleurs dans un sélecteur de couleurs. Pour une couleur complexe, il vaut mieux ne pas essayer de la créer vous-même. Au lieu de cela, laissez simplement ce qui a été éprouvé et économisez un temps précieux. Vous volonté, Cependant, vous souhaitez utiliser vos compétences pour effectuer une tâche simple comme assombrir ou éclaircir une couleur rapidement lors de vos déplacements..
Donc, vous voyez ce code de couleur charmant qui vous regarde au visage, mais vous ne savez pas de quelle couleur il s'agit. Génial! C’est probablement là que le plus de plaisir entre en jeu. La meilleure façon de vous apprendre à le faire est de réaliser un simple test. Une fois, on m'a posé les quelques questions suivantes sur un test dans l'un de mes cours d'informatique.
J'espère que vous avez réussi à résoudre tous ces problèmes! Surtout les deux premiers. Vous auriez dû être en mesure de comprendre que la réponse à la première question était noire ou B. Pour la deuxième question, la réponse était également très simple. En suivant le schéma de rouge, vert, bleu, nous savons que puisque chaque valeur, sauf le vert, est définie sur 00, la couleur aura une certaine nuance de vert. De plus, puisque la valeur du vert est FF (ou 255), nous savons que cette couleur sera du vert pur. Ainsi, la réponse sera A.
Il semble que la seule couleur difficile à déchiffrer ici soit le numéro trois, # FFCC66. C'est compréhensible. Étant donné que la valeur bleue (66) est beaucoup plus petite que les deux autres nombres, elle peut être considérée comme relativement dépourvue de pertinence. Ainsi, vous pouvez le comparer à la couleur jaune, # FFFF00. Entre ces deux, ils se ressemblent un peu. Avec cette méthode, vous pouvez éliminer les trois premières réponses, car aucune d’elles n’est très proche du jaune. Donc la réponse est ré. La diminution de la valeur verte de CC nuira légèrement à la couleur et l’augmentation du bleu poussera la couleur à ressembler beaucoup plus à l’or.
Le processus de décodage des codes de couleur comprend principalement la réflexion et la comparaison avec les couleurs déjà connues.!
Voici un dernier conseil rapide sur la manière d'accélérer la création d'une couleur à l'aide du système hexadécimal. En utilisant cette méthode, vous pouvez réduire certains codes de couleur de sept à quatre (par exemple, #_ _ _ _ _ _ _ à # _ _ _ _). Cette méthode s'appelle un raccourci de couleur. Elle repose sur l'idée de prendre la valeur de chacun des trois personnages principaux et de la dupliquer de manière invisible. Ce que je veux dire par là est la suivante: si vous aviez le code de couleur # 123, ce serait l’équivalent de # 112233. Vous pouvez le faire pour tout code de couleur où chaque valeur hexadécimale pour le rouge, le vert et le bleu correspond exactement au même caractère. Quelques raccourcis plus courants sont:
J'espère que cet article vous a aidé à comprendre comment fonctionnent les codes de couleur. Dans de nombreux programmes, tels que Photoshop, il sera certes plus simple d’utiliser les sélecteurs de couleurs intégrés. Le principal domaine dans lequel cette compétence vous sera utile est lorsque vous parcourez un code source CSS et que vous souhaitez simplement déterminer le type de couleur utilisé sans avoir à recourir à une autre ressource. Indépendamment de la méthode la plus rapide, en tant que concepteurs et concepteurs Web, nous devrions souhaiter connaître ces éléments! Merci beaucoup d'avoir lu. C'est un sujet naturellement difficile à comprendre, alors parlons davantage dans les commentaires!
Accentsconagua