titre : " ; Convertisseur de couleurs : Convertir HEX, RVB, HSL, HWB et CMYK the Right Way" ; slug : outil de conversion de couleurs-guide : catégorie de convertisseur de couleurs : type de couleur : cluster
Convertisseur de couleurs : Convertissez HEX, RVB, HSL, HWB et CMYK de la bonne manière
La première fois qu'une couleur m'a mordu, c'était sur un tirage J'avais construit une page de destination pour un de mes produits WordPress, signé sur la marque bleu dans le navigateur, et ensuite envoyé le même " ; bleu" ; à une imprimerie pour un lot d'autocollants Ce qui est revenu était une marine plate légèrement grisée qui ne ressemblait en rien à l'écran Personne n'avait converti la couleur de l'écran RVB en CMJN, alors l'imprimante a deviné, et la supposition était fausse C'était le jour où j'ai cessé de traiter une couleur comme une seule corde et commencé à la traiter comme une valeur qui doit être parlée dans plusieurs langues à la fois.
C'est exactement à cela que sert un convertisseur de couleur Vous lui donnez une couleur dans une syntaxe et il vous rend une syntaxe sur deux, donc le bleu dans votre CSS, le bleu dans votre fichier de conception et le bleu que votre imprimante reçoit sont tous prouvablement de la même couleur J'ai construit le convertisseur de couleurs sur Toolz.dev parce que j'en avais assez de coller des codes hexadécimaux dans trois sites différents pour obtenir RVB, HSL et CMJN séparément.
tl;dr : Un convertisseur de couleur prend une couleur et la réexprime en HEX, RVB, HSL, HWB et CMYK à la fois, plus le nom de couleur CSS le plus proche Utilisez RVB et HEX pour les écrans, HSL ou HWB lorsque vous souhaitez pousser une couleur à la main, et CMYK pour l'impression Le convertisseur Toolz.dev fonctionne entièrement dans votre navigateur, garde le canal alpha intact et ne télécharge jamais ce que vous collez.
Qu'est-ce qu'un convertisseur de couleur ?
Un convertisseur de couleurs analyse une couleur écrite dans n'importe quelle syntaxe CSS courante et calcule son équivalent dans les autres. Quelles syntaxes existent et comment chacune convertit est définie par Module de couleur CSS niveau 4. Le calcul n'est pas compliqué, mais le faire à la main est fastidieux et sujet aux erreurs. Conversion #4466EE pour RVB signifie diviser les six chiffres hexadécimaux en trois paires et lire chaque paire comme un nombre en base 16 : 44 a 68 ans, 66 est 102, et EE est 238, donnant rgb(68, 102, 238). Aller dans l'autre sens signifie diviser chaque canal en une chaîne hexagonale à deux chiffres et les joindre Pour accéder à HSL, cela signifie normaliser les canaux, trouver le minimum et le maximum, et calculer la teinte, la saturation et la légèreté de ceux-ci Vous ne voulez pas faire cela dans votre tête à 2 heures du matin.
La valeur d'un convertisseur n'est pas seulement économiser l'arithmétique Il est garantissant la cohérence Lorsqu'un outil produit tous les formats à partir d'une seule couleur analysée, il n'y a aucune chance que le RVB que vous avez copié et le HSL que vous avez copié décrivent des couleurs légèrement différentes parce que vous avez arrondi différemment entre les étapes Une source, une vérité, chaque format.
Pourquoi les formats de couleurs existent-ils ?
Chaque format de couleur survit car il est véritablement bon dans un seul travail.
RVB est le fonctionnement des écrans Un écran émet une lumière rouge, verte et bleue, et mélanger ces trois à différentes intensités produit chaque couleur que vous voyez Cela fait de RVB la langue native du navigateur : quelle que soit la syntaxe que vous écrivez en CSS, le moteur de rendu la résout en RVB avant qu'elle n'allume un pixel.
HEX est RVB en sténographie. #4466EE est le même que rgb(68, 102, 238)[traduction], juste emballé dans une chaîne compacte facile à coller dans une feuille de style ou un outil de conception Il est populaire parce qu'il est court et sans ambiguïté, pas parce qu'il est plus capable.
HSL décrit une couleur par teinte, saturation et légèreté C'est le format que j'atteins lorsque je règle une interface utilisateur à la main Pour rendre un bouton plus sombre en vol stationnaire, je laisse tomber la légèreté de quelques points et laisse la teinte et la saturation seules Essayer de faire cela en RVB brut signifie changer les trois canaux par des quantités inégales et espérer que la teinte ne dérive pas.
HWB, défini dans la spécification CSS Color Module Level 4 (https://www.w3.org/TR/css-color-4/), décrit la même teinte par la quantité de blanc et la quantité de noir qui y est mélangée Il correspond clairement à la façon dont les gens pensent réellement aux teintes et aux nuances : ajouter du blanc pour éclaircir, ajouter du noir pour assombrir Il est plus récent, donc je l'utilise surtout lorsque la lisibilité du code compte plus que la portée du navigateur.
CMJN est le modèle d'impression Les imprimantes déposent de l'encre cyan, magenta, jaune et noire sur du papier blanc, et chaque encre soustrait la lumière plutôt que de l'ajouter C'est pourquoi une couleur d'écran vive peut paraître plus terne sur le papier : les gammes de couleurs que les deux modèles peuvent produire, appelées gamuts, sont différentes Un convertisseur vous donne l'approximation CMJN, mais il ne peut pas inventer une encre qui n'existe pas.
Comment convertir-je HEX en RVB et retour ?
La conversion la plus courante, dans une large mesure, est HEX en RVB et RVB en HEX. Voici la méthode manuelle pour que vous puissiez vérifier la santé mentale de n'importe quel outil, y compris le mien.
Pour convertir HEX en RVB, divisez les six chiffres en trois paires et lisez chacun sous forme de nombre hexadécimal de 0 à 255. sténographie à trois chiffres comme #46E se développe en doublant chaque chiffre #4466EE premièrement. Pour convertir RVB en HEX, prenez chaque valeur de canal, convertissez-la en une chaîne hexagonale à deux chiffres avec un zéro non significatif si nécessaire et rejoignez-les derrière un hachage.
Plutôt que de le faire à plusieurs reprises, collez la valeur dans le convertisseur couleur et lisez chaque format à la fois Si vous devez également choisir une couleur visuellement et la voir mise à jour en direct, le sélecteur de couleurs est le meilleur point de départ, et les deux outils partagent le même noyau de conversion donc leurs nombres concordent.
Quand dois-je utiliser CMJN au lieu de RVB ?
Utilisez CMJN uniquement lorsque la sortie est de l'encre sur papier Les cartes de visite, les autocollants, l'emballage et tout travail d'impression commerciale attendent des valeurs CMJN, et envoyer RVB à une imprimante signifie que l'imprimante ou son logiciel convertit pour vous, souvent avec des résultats que vous n'avez pas approuvés. C'était mon erreur d'autocollant dans une phrase.
Utilisez RVB, et sa sténographie HEX, pour tout ce qui sera affiché sur un écran : sites Web, applications, graphiques sociaux, vidéo Si un projet s'étend sur les deux mondes, gardez RVB ou HEX comme source de vérité et générez l'approximation CMJN avec un convertisseur au moment où vous passerez la main à l'impression, afin de pouvoir observer les valeurs CMJN et signaler toute couleur qui se déplacera mal avant qu'elle ne vous coûte un tirage.
Comment les formats de couleurs se comparent-ils ?
| format | le mieux pour | Support alpha | exemple |
|---|---|---|---|
| jeter un sort sur | Compact CSS, transfert de conception | Formulaire à 8 chiffres seulement | #4466EE |
| RVB/RGBA | Écrans, couleur programmatique | Oui (RGBA) | rgb(68, 102, 238) |
| HSL/HSLA | Teinte et légèreté réglées à la main | Oui (HSLA) | hsl(228, 83%, 60%) |
| HWB | Teintes et nuances lisibles | Oui (avec slash alpha) | hwb(228 27% 7%) |
| cmJ | Imprimer, encre sur papier | non | cmyk(71%, 57%, 0%, 7%) |
Le tableau mérite d'être gardé à l'esprit car il correspond parfaitement à un flux de travail : conception en HEX ou sélection visuelle, syntonisation en HSL ou HWB, expédition sur écrans en RVB ou HEX et conversion en CMJN uniquement à la limite d'impression.
Comment la transparence circule-t-elle entre les formats ?
Alpha est l'endroit où beaucoup de conversions tournent tranquillement mal Le canal alpha contrôle l'opacité, de 0 (entièrement transparent) à 1 (entièrement opaque).RGBA et HSLA le portent comme quatrième valeur, et un HEX à 8 chiffres le porte comme quatrième paire : #4466EECC est-ce bleu avec environ 80 pour cent d'opacité, parce que CC est 204 sur 255. Plain HEX et cmyk() n'avoir aucun canal alpha du tout.
Le convertisseur Toolz.dev préserve l'alpha à travers chaque format qui le supporte Si vous collez rgba(0, 0, 0, 0.5) vous obtenez #00000080 dans la rangée HEXA et hsla(0, 0%, 0%, 0.5) dans la ligne HSLA, tous décrivant le même noir à moitié transparent Lorsque vous copiez plutôt la ligne HEX ou CMJN simple, vous copiez la couleur entièrement opaque, ce qui est un choix délibéré, pas un bug : ces formats ne peuvent pas exprimer l'opacité, donc ils montrent la couleur comme si elle était solide Lorsque la transparence compte, copiez à partir d'une ligne alpha-consciente.
Puis-je convertir un nom de couleur CSS ?
Oui, et ça marche dans les deux sens Tapez un mot clé tel que tomato, rebeccapurple, ou slategray et le convertisseur le résout en HEX, RVB, HSL, HWB et CMYK. L'ensemble complet des 148 couleurs nommées provient de la spécification CSS Color Module Level 4, les valeurs correspondent donc exactement à ce qu'un navigateur résout.
Aller dans l'autre sens est l'endroit où il devient véritablement utile Coller une couleur numérique et le convertisseur rapporte le nom CSS exact si l'on correspond, et affiche toujours la couleur nommée la plus proche par distance RVB quand ce n'est pas le cas Cette correspondance la plus proche est pratique pour nommer les variables et écrire des documents de conception lisibles : #663399 revient comme rebeccapurple" ; plus proche : rebeccapurple" ; donc vous savez dans quel quartier vous vous trouvez.
Comment cela s'adapte-t-il à un véritable flux de travail de conception ?
Voici comment j'utilise réellement la couleur dans un projet et où chaque outil s'adapte.
Je commence par choisir une couleur primaire, généralement visuellement avec le sélecteur de couleurs. Une fois que j'ai ma marque bleue, je la fais passer à travers le convertisseur couleur pour verrouiller ses valeurs HEX, RVB, HSL et CMJN en un seul endroit, et je les colle dans le système de conception doc afin que chaque coéquipier et chaque fournisseur travaillent à partir des mêmes chiffres.
Ensuite, je construis la palette Les nuances de support proviennent de la légèreté des coups de coude en HSL, et je vérifie chaque paire texte sur fond avec le vérificateur de contraste de couleurs donc la palette est accessible avant son expédition, pas après une plainte Quand j'ai besoin d'un fond fleurir, j'alimente deux de ces couleurs dans le générateur gradient.
Enfin, pour un espacement réactif et une typographie autour de toute cette couleur, j'associe la palette au Générateur de pinces CSS ainsi, les tailles s'adaptent aussi facilement que les couleurs sont cohérentes. La couleur et la disposition sont les deux moitiés du même vernis.
Si vous vous souciez de la destination de vos données pendant que vous travaillez, il vaut la peine de lire comment ces outils les gèrent. Tout dans le convertisseur de couleurs s'exécute côté client, un choix de conception dont j'ai parlé dans le guide sur la confidentialité des données dans les outils en ligne« , et il se trouve aux côtés du reste de mon kit quotidien dans le » Boîte à outils pour les développeurs Web.
Est-il suffisamment précis pour la production ?
Pour le travail à l'écran, oui, sans qualification HEX, RVB, HSL et HWB sont toutes des représentations exactes de la même couleur sRVB, donc convertir proprement entre eux les allers-retours : convertissez une couleur en HSL et retour et vous atterrissez sur le même triple RVB, donnez ou prenez une unité d'arrondi sur un canal Cet arrondi est inhérent à la représentation d'une couleur continue dans des canaux entiers, et non un défaut dans un outil en particulier.
Pour CMJN, traitez la sortie comme une approximation solide et standard plutôt que comme une preuve gérée par couleur La vraie couleur d'impression dépend du papier spécifique, des encres et du profil ICC que votre imprimante utilise, ce qu'aucun outil basé sur un navigateur ne peut connaître Le convertisseur utilise la formule CMJN naïve standard, qui est exactement ce que la plupart des outils de conception montrent par défaut et est un point de départ fiable Lorsqu'un travail est critique pour les couleurs, obtenez une preuve physique de l'imprimante avant la pleine course C'est la leçon que mes autocollants grisés-marine m'ont enseignée, et il est moins cher d'apprendre de ce paragraphe que d'une boîte de mauvais autocollants.
Qu'en est-il des espaces colorimétriques plus récents comme LAB et OKLCH ?
Si vous suivez de près CSS, vous avez vu lab(), lch(), oklab(), et oklch() apparaissant dans les feuilles de style et les outils de conception Ceux-ci proviennent de la spécification CSS Color Module Level 4 et ils résolvent un vrai problème : RVB, HSL et HWB sont tous liés au modèle d'écran sRVB, donc deux couleurs qui semblent également différentes de l'œil peuvent être très différentes distances numériques l'une de l'autre, et un affichage à large gamme peut montrer des couleurs que sRVB ne peut tout simplement pas décrire Les espaces de couleurs OK sont perceptuellement uniformes, ce qui les rend excellents pour générer des palettes uniformément étagées et pour interpoler des dégradés qui ne boueux pas au milieu.
J'ai délibérément gardé ce convertisseur concentré sur les formats que vous collez dans le CSS de production quotidienne et que vous utilisez manuellement sur les imprimantes : HEX, RVB, HSL, HWB et CMYK. C'est l'ensemble qui couvre l'écrasante majorité des tâches réelles, et chacune d'entre elles correspond proprement à la même couleur sRVB, de sorte que les conversions entre elles sont exactes et réversibles. Les espaces plus larges impliquent des décisions de mappage de gamme qui sont faciles à se tromper subtilement, et les mélanger dans un simple convertisseur échangerait la clarté contre la couverture dont la plupart des gens n'ont pas besoin.
La règle pratique que je suis : atteindre OKLCH lorsque vous générez algorithmiquement une palette ou un gradient et que vous voulez des étapes perceptuellement paires, et rester avec HEX, RVB, et HSL pour le travail quotidien de l'écriture des composants Lorsque vous faites de la conception dans OKLCH, convertissez les couleurs d'ancrage résultantes en HEX ou RVB avec votre outil de conception avant le transfert, de sorte que les valeurs dans votre feuille de style sont les mêmes que celles que ce convertisseur et vos coéquipiers peuvent lire.
Questions fréquentes
Comment convertir-je HEX en RVB ?
Divisez le code HEX à six chiffres en trois paires et lisez chacune sous forme de nombre hexadécimal de 0 à 255. In #4466EE, 44 est 68 (rouge), 66 est 102 (vert), et EE est 238 (bleu), donnant rgb(68, 102, 238). Collez le code HEX dans le convertisseur et la valeur RVB apparaît immédiatement à côté de tous les autres formats.
Comment convertir-je RVB en HEX ?
Convertissez chacune des valeurs rouge, verte et bleue (0 à 255) en un nombre hexadécimal à deux chiffres et joignez-les après un hachage. rgb(68, 102, 238) se transforme #4466EE. Le convertisseur le fait instantanément et vous donne également la forme HEXA à 8 chiffres lorsqu'une valeur alpha est présente.
Quelle est la différence entre HSL et HWB ?
HSL décrit une couleur par teinte, saturation et légèreté, tandis que HWB décrit la même teinte par la quantité de blanc et la quantité de noir qui y est mélangée. HWB est souvent plus intuitif pour les teintes et les nuances : l'augmentation de la blancheur éclaircit la couleur et l'augmentation de la noirceur l'assombrit. Les deux correspondent exactement à la même valeur RVB, vous pouvez donc basculer librement entre eux.
Quand dois-je utiliser CMJN au lieu de RVB ?
Utilisez CMJN pour l'impression et RVB pour les écrans CMJN est un modèle soustractif basé sur les encres cyan, magenta, jaune et noire, c'est donc ce que les imprimeurs commerciaux attendent RVB est additif et décrit la lumière émise par les écrans Une couleur d'écran a une approximation CMJN, mais les deux gamuts diffèrent, de sorte que les couleurs vives de l'écran peuvent paraître plus ternes dans l'impression.
Le convertisseur prend-il en charge la transparence ?
Oui. Fournissez une valeur alpha via rgba(), hsla()(en), ou un HEX à 8 chiffres et l'opacité est préservée dans chaque sortie sensible à l'alpha. Formats sans canal alpha, tels que HEX simple et cmyk(): affichez la couleur entièrement opaque, alors vérifiez la sortie RGBA ou HEXA lorsque la transparence est importante.
Puis-je convertir un nom de couleur CSS ?
Oui. Tapez un mot clé CSS tel que tomato, rebeccapurple, ou slategray et le convertisseur le résout en HEX, RVB, HSL, HWB et CMYK. Cela fonctionne également à l'envers : collez une couleur numérique et il rapporte le nom CSS exact si l'on correspond, plus la couleur nommée la plus proche pour référence.
Le convertisseur de couleur est-il gratuit et privé ?
Oui. Le convertisseur est entièrement gratuit sans inscription, sans limites et sans filigrane. Toute analyse et conversion s'exécutent dans votre navigateur à l'aide de JavaScript côté client, de sorte que les couleurs que vous saisissez ne quittent jamais votre appareil et que l'outil continue de fonctionner hors ligne une fois la page chargée.
