Aller au contenu principal
ToolsByUs

Choisir une couleur

Le sélecteur de couleurs prend une couleur — saisie, collée ou prélevée avec la pipette de votre système — et la restitue d’un coup en HEX, RGB, HSL, HSV, OKLCH et CMYK. Il construit aussi un dégradé de teintes et d’ombres à onze paliers en OKLCh, de sorte que chaque palier garde la teinte de départ, et il indique le contraste de chaque palier sur blanc et sur noir pour que vous voyiez d’emblée lesquels peuvent porter du texte.

100 % local
HEX
#00696f
RGB
rgb(0 105 111)
HSL
hsl(183 100% 21.8%)
HSV
hsv(183 100.0% 43.5%)
OKLCH
oklch(0.474 0.0806 201.7)
CMYK
cmyk(100% 5% 0% 56%)
approximatif
Teinte
183°
Luminosité
47%
Chroma
0.081

Teintes claires et foncées

Onze niveaux sur une courbe de luminosité OKLCh. Les taux concernent le blanc et le noir ; il faut 4,5:1 pour le corps de texte.

1.1 / 19.5

1.2 / 17.9

1.4 / 14.9

1.8 / 11.5

2.5 / 8.4

3.5 / 5.9

5.1 / 4.1

7.5 / 2.8

10.6 / 2.0

14.3 / 1.5

18.0 / 1.2

Harmonies

La teinte est tournée dans l’espace OKLCh pour conserver la luminosité d’origine. En HSL, le jaune devient éblouissant et le bleu trop sombre.

Complémentaire

La teinte opposée. Contraste maximal, souvent difficile à utiliser autrement qu’en accent.

Analogue

Les teintes voisines à 30° de chaque côté. Un choix discret pour toute une interface.

Triadique

Trois teintes espacées de 120°. Équilibrées, mais il vaut mieux atténuer deux d’entre elles.

Tétradique

Deux paires complémentaires. Quatre teintes vives sont souvent trop pour une mise en page.

Complémentaire divisée

La teinte opposée divisée de 30° de chaque côté. Un fort contraste avec moins de tension visuelle.

Monochromatique

Une seule teinte dont varient la luminosité et le chroma. Courant dans les systèmes de design.

Sur blanc et sur noir

Sur blanc: 6.46:1Corps de texte conforme AATexte de grande taille conforme AA
Sur noir: 3.25:1Corps de texte non conforme AATexte de grande taille conforme AA

Comment fonctionne Choisir une couleur ?

Une couleur à l’écran, c’est trois nombres, et chaque format présent ici est ces mêmes trois nombres sous d’autres habits. Hex et rgb() sont la même valeur écrite en base 16 et en base 10. hsl() et hsv() sont la même valeur en coordonnées polaires, d’où l’existence du curseur de teinte. Ces quatre formats font des allers-retours sans perte les uns vers les autres, et cet outil convertit entre eux exactement.

Pourquoi le dégradé est construit en OKLCh

HSL a une propriété utile et une propriété fatale. Celle qui est utile : un curseur de teinte y a du sens. Celle qui est fatale : sa « luminosité » n’est pas la luminosité — hsl(60 100% 50%) est un jaune aveuglant et hsl(240 100% 50%) un bleu presque noir, et HSL appelle les deux 50%. Construisez un dégradé de teintes en parcourant la luminosité HSL et vous obtenez une échelle où les paliers du milieu sautent en luminosité apparente pendant que les nombres avancent régulièrement.

OKLCh n’a pas ce problème. Son axe de luminosité suit ce que l’œil rapporte, donc descendre le long de cet axe produit un dégradé qui paraît régulier. Chaque palier est en plus vérifié contre le gamut sRGB et ramené dedans s’il tombe dehors — sans cela, les paliers les plus saturés s’écrêtent vers la même couleur et l’échelle s’aplatit silencieusement exactement à l’extrémité que le designer regarde.

La pipette

La pastille de couleur à côté du champ ouvre le sélecteur de votre système d’exploitation lui-même, qui sur macOS, Windows et la plupart des bureaux Linux inclut une pipette capable de prélever n’importe quel pixel à l’écran — y compris dans d’autres applications. Aucune page ne sait faire cela seule, et c’est pourquoi c’est le contrôle natif qui est ici plutôt qu’une imitation en canvas. Elle ne peut pas exprimer la transparence, donc le champ texte porte l’alpha : tapez #00696f80 et la pastille affiche le sarcelle opaque pendant que le champ garde les 50%.

CMYK, et ce qu’il vaut

Les chiffres CMYK sont l’approximation indépendante du périphérique, celle qu’utilise chaque convertisseur en ligne. Une vraie conversion exige un profil ICC pour la presse, le papier et le jeu d’encres, et la même valeur sRGB donne des nombres différents sur papier couché et sur papier journal. Prenez-les comme point de départ d’une conversation avec un imprimeur, pas comme une spécification à lui envoyer.

Une couleur

#00696f

Toutes ses représentations

hex    #00696f
rgb    rgb(0 105 111)
hsl    hsl(183 100% 21.8%)
oklch  oklch(0.474 0.0806 201.7)
cmyk   cmyk(100% 5% 0% 56%)

Quelles options et quels cas limites Choisir une couleur prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
HEX#rrggbb6 chiffresLa forme la plus courte, et la seule qui survive à un collage n’importe où. 4 et 8 digits ajoutent la transparence ; 3 digits est une forme abrégée pour des paires doublées.
RGB0–255rgb()Les mêmes trois nombres en base 10. La syntaxe moderne les sépare par des espaces et la transparence par une barre oblique ; la forme avec les virgules fonctionne toujours partout.
HSLdeg %, %hsl()Teinte, saturation, luminosité. Idéal pour un curseur de teinte, mais trompeur pour tout ce qui dépend de la brillance — sa luminosité n’est pas une luminosité perçue.
HSVdeg %, %hsb()Teinte, saturation, valeur. C’est sur quoi la plupart des pipettes de couleur sont construites, y compris celle de Photoshop. Non valide en CSS.
OKLCH0–1, 0–0.4, degoklch()Uniforme perceptuellement. Les étapes égales paraissent égales, la teinte reste constante lors d’un changement de luminosité, et c’est ce que CSS Color 4 utilise. Supporté par tous les navigateurs actuels.
CMYK0–100%naïveL’approximation indépendante du périphérique. Utile comme référence d’impression approximative, pas pour une spécification de presse — cela nécessite un profil ICC.
Échelle50–95011 étapesTeintes et ombres sur une courbe de luminosité fixe, avec une chroma décroissante aux deux extrémités pour que les teintes claires ne soient pas fluorescentes et les foncées ne brillent pas.
Contrasteratiovs #fff / #000Le ratio WCAG 2.x de chaque étape par rapport au blanc et au noir, ce qui détermine si du texte peut être placé dessus.

Questions fréquentes

Comment utiliser une pipette pour prélever une couleur sur mon écran ?

Cliquez sur la pastille de couleur à côté du champ texte. Cela ouvre le sélecteur de votre système d’exploitation lui-même, qui sur macOS, Windows et la plupart des bureaux Linux possède une pipette qui prélève n’importe quel pixel à l’écran, y compris dans d’autres applications. Une page web ne peut pas lire les pixels en dehors d’elle-même, donc le contrôle natif est la seule voie pour cela — un sélecteur en canvas dans la page ne peut prélever que sur une image que vous avez déjà chargée.

Qu’est-ce qu’OKLCH, et faut-il l’utiliser plutôt que HSL ?

OKLCH est un espace de couleur perceptuellement uniforme : des pas numériques égaux ont l’air de pas visuels égaux, et changer la luminosité ne déplace pas la teinte. HSL ne fait ni l’un ni l’autre, et voilà pourquoi un dégradé de teintes généré en HSL a des paliers d’aspect irrégulier alors même que les nombres sont régulièrement espacés. Tous les navigateurs actuels prennent en charge oklch() en CSS. Utilisez HSL quand vous voulez un curseur de teinte ; utilisez OKLCH quand la valeur alimente un dégradé, un mélange, ou toute décision de luminosité.

Pourquoi les teintes du dégradé paraissent-elles différentes d’un éclaircissement de la valeur hex ?

Parce qu’éclaircir une valeur hex signifie déplacer trois canaux sRGB vers 255, et cela change la teinte aussi bien que la luminosité — de façon plus visible dans les bleus et les violets, qui dérivent vers le gris. Le dégradé ci-contre déplace la luminosité en OKLCh et garde teinte et chroma, puis ramène chaque palier dans le gamut sRGB s’il atterrit dehors. C’est ce qui fait que le palier 100 et le palier 800 restent reconnaissablement de la même couleur.

Peut-on obtenir une couleur avec de la transparence ?

Oui. Tapez un hex à huit chiffres comme #00696f80, ou rgba(0 105 111 / 50%), et l’alpha est conservé à travers chaque conversion qui a une place pour l’accueillir. La pastille native ne peut pas montrer la transparence — c’est une limite du contrôle, pas de cette page — donc elle affiche la couleur opaque pendant que le champ texte garde la vraie valeur.

La conversion CMYK est-elle assez précise pour être envoyée à un imprimeur ?

Non, et celle d’aucun convertisseur en ligne ne l’est. Le CMYK dépend du périphérique : la même valeur sRGB donne des pourcentages d’encre différents sur papier couché et sur papier non couché, et encore d’autres sur une autre presse. C’est l’approximation standard indépendante du périphérique, juste pour choisir un échantillon et pour parler à un imprimeur de ce que vous voulez à peu près. L’imprimeur fera la vraie conversion avec le profil de sa presse.

Ce que je prélève est-il envoyé quelque part ?

Non. Chaque conversion ici est de l’arithmétique qui s’exécute dans cet onglet. La page ne fait aucune requête réseau après son chargement — coupez votre connexion et le sélecteur continue de fonctionner, et c’est le test qui vaut la peine d’être fait si vous préférez vérifier plutôt que de nous croire sur parole.

Équipe ToolsByUs · Comment nous vérifions nos outils