Outil de Sélection de Couleur - Convertir les Codes Couleur RGB, Hex, CMYK et HSV

Qu’est-ce qu’un sélecteur de couleurs ?

Un sélecteur de couleurs est un outil permettant de choisir une couleur et d’en lire la valeur dans différents formats colorimétriques. Celui-ci affiche simultanément une couleur en RVB (rouge, vert, bleu), en hexadécimal, en CMJN (cyan, magenta, jaune, noir) et en TSL (teinte, saturation, luminosité). La modification d’un format met instantanément à jour les autres.

Comment utiliser le sélecteur de couleurs

Il existe trois façons de choisir une couleur.

Cliquez n’importe où dans le carré du spectre pour sélectionner une teinte et une saturation. La position horizontale définit la teinte, c’est-à-dire la famille de couleurs, comme le rouge ou le bleu. La position verticale définit la saturation, c’est-à-dire l’intensité ou l’aspect délavé de la couleur. Un curseur situé sous le spectre contrôle la luminosité, du noir à gauche à la luminosité maximale à droite.

Il est également possible de saisir des valeurs exactes. Le champ hexadécimal accepte des codes tels que #2ECC71, avec ou sans #. Chaque champ RVB accepte un nombre entier compris entre 0 et 255. Chaque champ CMJN accepte un nombre entier compris entre 0 et 100. Une valeur saisie au-dessus de la plage autorisée est limitée au maximum.

Chaque format colorimétrique possède un bouton de copie à côté de lui. Cliquer dessus copie la valeur dans le presse-papiers et affiche brièvement le message « Copié ! ».

Explication des modèles colorimétriques

RVB

Le RVB décrit une couleur comme un mélange de lumière rouge, verte et bleue, les trois mêmes couleurs qu’un écran utilise pour créer chaque pixel. Chaque canal va de 0 à 255. RVB(255, 0, 0) est un rouge pur, tandis que RVB(0, 0, 0) est du noir. Les navigateurs, les applications et les logiciels vidéo utilisent tous le RVB, car il correspond au fonctionnement des écrans.

Hexadécimal

Un code hexadécimal écrit une couleur RVB en base 16 plutôt qu’en base 10. #2ECC71 comporte trois paires de caractères : 2E pour le rouge, CC pour le vert et 71 pour le bleu. Chaque paire va de 00 à FF. Les codes hexadécimaux sont courants dans la conception web, car CSS les accepte directement et ils sont plus courts à saisir que rgb(). Il existe également une notation abrégée à trois caractères : #0F0 signifie la même chose que #00FF00.

CMJN

Le CMJN est utilisé pour l’impression. Une imprimante crée les couleurs en superposant des encres cyan, magenta, jaune et noire sur du papier blanc ; le procédé soustrait donc la lumière au lieu de l’additionner. Chaque canal est un pourcentage compris entre 0 et 100. CMJN(0, 0, 0, 0) signifie qu’il n’y a aucune encre, ce qui laisse apparaître le papier blanc. Le CMJN ne peut pas reproduire toutes les couleurs qu’un écran peut afficher ; certaines couleurs vives de l’écran, notamment certains bleus et verts, paraissent plus ternes une fois imprimées.

TSL

Le modèle TSL décrit séparément la teinte, la saturation et la luminosité. La teinte correspond à la famille de couleurs et est exprimée en degrés, de 0° à 360°, où 0° correspond au rouge, 120° au vert et 240° au bleu. La saturation indique l’intensité de la couleur, de 0 % (gris) à 100 % (couleur totale). La luminosité indique à quel point la couleur est claire, de 0 % (noir) à 100 % (luminosité maximale). Le modèle TSL se rapproche de la façon dont les personnes décrivent naturellement les couleurs ; c’est pourquoi le spectre et le curseur de luminosité de cet outil reposent sur lui.

Formule de conversion du RVB en hexadécimal

Chaque canal RVB, un nombre compris entre 0 et 255, est converti en un nombre hexadécimal à deux chiffres, puis les trois paires sont réunies avec un # au début.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formule de conversion du RVB en CMJN

Tout d’abord, chaque canal RVB est ramené à une fraction comprise entre 0 et 1. Le noir (K) est défini à partir du canal ayant la valeur la plus élevée. Le cyan, le magenta et le jaune sont ensuite calculés à partir des autres canaux et de K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Lorsque K vaut 1 (la couleur est d’un noir pur), C, M et J sont tous fixés à 0 afin d’éviter une division par zéro.

Formule de conversion du RVB en TSL

Le RVB est d’abord ramené à des fractions comprises entre 0 et 1. Soit $C_{max}$ la plus grande des trois valeurs, $C_{min}$ la plus petite et $\Delta$ leur différence.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ sinon } \frac{\Delta}{C_{max}}\times 100\%$

La teinte dépend du canal ayant la valeur la plus élevée :

undefined