Les concepteurs et les développeurs Web utilisent souvent du code hex. Cette méthode a ses propres mérites et défauts. Il aide énormément car il standardise l'ensemble du flux de travail parmi les différents développeurs.Vous pouvez utiliser différents types d'affichage avec une précision de couleur variable et toujours s'en tenir à la palette de couleurs d'origine sans aucune confusion. Mais souvent, il est encombrant d'utiliser des codes hexadéciques pour représenter les couleurs. Le nombre lui-même ne signifie rien pour un développeur humain et qui peut entraver la créativité.Bien que vous puissiez utiliser une multitude de cueilleurs de couleurs d'Adobe à un sélecteur de couleurs HTML de W3Schools, les bascules entre eux et votre éditeur peuvent rompre la concentration et rendre votre vie beaucoup plus difficile.

Pour remédier à cette situation, regardons un sélecteur de couleurs que vous pouvez installer en tant que plugin pour un éditeur de texte atomique, ce qui rend le processus entier beaucoup plus fluide. Vous devez faire installer l'atome sur votre système. Une fois que vous avez installé, vous pouvez installer ce package particulier. Il en a plus de 1.7 millions de téléchargements et cela le fait ressortir, si vous décidez de rechercher via ATOM Editor lui-même.

Installation de couleurs

Ouvrez le Paramètres [Ctrl +,] dans votre éditeur d'atomes et dans le Installer Section Recherche de nouveau paquets.

Installer le pipette à couleurs (version 2.3.0 ou version ultérieure) et une fois installé, n'oubliez pas de Activer il.

Une fois que tout est fait. Vous pouvez aller de l'avant et ouvrir un nouveau fichier texte et nous pouvons commencer à le tester.

Diverses options de cueillette de couleurs

Ouvrez un nouveau fichier à l'intérieur de l'atome, et avec lui, utilisez le Keybinding [Ctrl + Alt + C] si vous êtes sous Windows ou Linux ou utilisez [CMD + Shift + C] si vous utilisez Mac OSX.

Vous verrez un certain nombre de curseurs et de différentes barres à droite. Celui à droite le plus est de sélectionner la couleur à gauche est la barre qui détermine l'opacité de votre couleur et le carré au milieu décide de quelle nuance d'une couleur donnée sera sélectionnée.

Vous pouvez aller de l'ombre extrêmement légère qui aurait l'air blanc, quel que soit le choix initial de votre couleur ou vous pouvez choisir une version entièrement grisée ou noir. Le cas d'utilisation normal consiste à choisir quelque chose entre les deux qui correspond à votre cas d'utilisation.

Par exemple, les gens utilisent des couleurs différentes pour le même élément pour que le site se sente un peu plus interactif. Les hyperliens peuvent se voir attribuer une couleur bleue et lorsque vous planez votre souris dessus, la couleur change en noir.

L'opacité est encore un autre facteur important que les développeurs utilisent pour masquer des éléments sous un patch coloré, et lorsque l'utilisateur effectue une certaine action, l'opacité va à zéro et l'élément ci-dessous est rendu visible.

Normes différentes

Vous remarquerez que les couleurs peuvent être affichées selon différentes normes, notamment dans les formats RVB (vert rouge et bleu), Hex et HSL.

Commençons par le format hexagonal, car il est un peu utilisé, du moins au niveau du débutant.

C'est simplement un chiffre hexadécimal (qui est un système de numérotation qui passe de 0 à 9 et a ensuite un représenter 10, b représenter 11 et ainsi de suite, jusqu'à 15 ans qui est représenté en utilisant F). Choisissez une couleur à l'aide du package de sélecteur de couleurs, cliquez sur le bouton hexagonal sous le widget et vous verrez que le code hexagonal correspondant pour cette couleur est collé dans votre éditeur.

La norme suivante utilise RVB qui montre quel pourcentage de couleur est rouge, quel pourcentage est vert et combien est bleu.

La même couleur que ci-dessus a la représentation RVB comme suit

Enfin, vous devez connaître HSL qui représente la teinte, la saturation et la légèreté.

Hue représente la couleur de l'élément. Il pourrait aller de l'extrémité rouge du spectre jusqu'au bleu et il ignore simplement les couleurs en tant que combinaisons de rouge, vert et bleu (du moins du point de vue du développeur). Ceci est souvent décrit comme une roue chromatique avec du rouge, du vert et du bleu à 60 degrés les uns des autres, mais le sélecteur de couleurs l'avait ouvert à une seule barre à droite.

La prochaine chose à craindre est la saturation, qui décrit à quel point la couleur va être intense. Les couleurs entièrement saturées n'ont pas de nuances de gris, 50% saturés sont des couleurs plus claires et 0% les plus ne sont pas en distingue de gris. L'espace carré est parfait pour sélectionner cela.

La légèreté décrit à quel point les couleurs vont apparaître brillantes. Les couleurs 100% claires sont indiscernables du blanc et 0% celles apparaissent complètement noires. Par exemple, si votre site contient beaucoup de matériel de lecture, vous voudriez une solution moins brillante pour faciliter le lecteur de s'engager. Alors c'est HSL.

Conclusion

Les éditeurs comme Atom et Visual Studio Code ont toute une éthique de packages et de thèmes utiles construits autour d'eux. Le sélecteur de couleurs n'est qu'un exemple qu'un développeur peut utiliser pour renoncer à des voyages inutiles dans W3Schools ou à empiler le débordement. L'utilisation de sélecteur de couleurs vous oblige toujours à avoir un affichage précis de couleur qui est correctement calibré.

Une fois que vous avez décidé de la palette de couleurs pour votre projet, vous pouvez commencer à construire des projets plus rapidement et plus lisses à l'aide de packages comme Color Picker.