Skip to content
user@convertitive:~$convertitive

Sélecteur de couleur

Choisissez une couleur, obtenez tous les formats. Plus un calcul de contraste WCAG en direct par rapport au blanc et au noir.

Le sélecteur ci-dessous affiche la couleur choisie et calcule ses représentations dans trois formats : hex, rgb() et hsl(). Chaque format est accompagné d'un bouton de copie en un clic. En dessous, le rapport de contraste WCAG en direct par rapport au blanc pur et au noir pur — idéal pour vérifier les associations texte/fond avant de les intégrer. Consultez notre guide des formats de couleur CSS pour savoir quand utiliser chaque format.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Sélectionnez une couleur

    Cliquez sur l'aperçu de couleur pour ouvrir le sélecteur système, ou saisissez directement une valeur hex ou RVB.

  2. Copiez le format dont vous avez besoin

    Hex pour le stockage et les fichiers de conception. rgb() pour le code qui manipule les canaux. hsl() pour les rotations de teinte dans les design tokens.

  3. Vérifiez le contraste

    Les deux badges de contraste affichent le rapport WCAG par rapport au blanc pur et au noir pur. Utilisez-les pour valider vos associations de couleurs de texte.

Frequently asked questions

Pourquoi trois formats de couleur ?
Chacun a son utilité. Le hex est le format de stockage universel, compatible avec tous les outils. rgb() est ce que le code génère et consomme. hsl() permet à un designer d'ajuster la luminosité ou la saturation indépendamment — idéal pour les variantes de design tokens (états de survol, ajustements de thème).
Que mesure la vérification du contraste WCAG ?
Le rapport entre la luminance relative de deux couleurs, sur une échelle de 1:1 (identique) à 21:1 (noir sur blanc). WCAG 2.1 AA exige 4,5:1 pour le texte courant et 3:1 pour le texte de grande taille et les composants d'interface. La formule est définie dans WCAG 2.1 §1.4.3.
Le sélecteur prend-il en charge OKLCH ?
Pas encore — hex, RVB et HSL couvrent 95 % des cas d'usage courants. Pour OKLCH et la discussion plus large sur les couleurs perceptuelles, consultez notre guide des formats de couleur CSS. Vous pouvez aussi coller une valeur OKLCH dans un préprocesseur CSS ; les navigateurs modernes convertissent en interne.
Pourquoi un hex comporte-t-il parfois 4 chiffres au lieu de 6 ?
Le hex à trois ou quatre chiffres (ex. #F60, #F60A) est un raccourci où chaque chiffre est doublé. #F60 = #FF6600. La forme à 4 chiffres inclut le canal alpha. La plupart du code moderne utilise la forme complète à 6 ou 8 chiffres pour plus de clarté ; les deux formes sont du CSS valide.
Le sélecteur enregistre-t-il mon historique ?
Non. Tout s'exécute dans votre navigateur ; aucune donnée n'est envoyée à un serveur ni conservée d'une page à l'autre.

Outils associés