Convertir les codes couleur
Format #RRGGBB. Le plus utilisé en CSS
Rouge, Vert, Bleu (0-255)
Teinte, Saturation, Luminosité. Ajustement intuitif des couleurs
Teinte, Saturation, Valeur. Utilisé dans les outils graphiques
Espace colorimétrique CSS moderne perceptuellement uniforme
Inclut le canal alpha (transparence)
Le sélecteur de couleurs (Color Picker) est un outil en ligne permettant de convertir les codes entre différents modèles de couleurs et de choisir visuellement la couleur souhaitée. Il prend en charge tous les principaux formats de couleurs tels que HEX, RGB, HSL, HSV et OKLCH, et vous permet d'explorer les couleurs via des curseurs et palettes intuitifs pour copier instantanément les codes. Le canal alpha (transparence) est également pris en charge.
Sélection de la couleur
Faites glisser le curseur de couleur ou cliquez dans la zone de couleur pour sélectionner la couleur souhaitée. Vous pouvez également saisir directement un code HEX ou un autre format.
Vérification des formats
La couleur sélectionnée est automatiquement convertie et affichée dans tous les formats : HEX, RGB, HSL, HSV, OKLCH.
Réglage de la transparence
Dans l'onglet alpha, ajustez la transparence dans une plage de 0 à 100 % pour créer des couleurs semi-transparentes.
Copie du code
Cliquez sur la valeur du format de couleur souhaité pour la copier automatiquement dans le presse-papiers. Collez-la directement dans votre CSS, vos outils de design, etc.
HEX est une notation hexadécimale au format #RRGGBB, la plus couramment utilisée en CSS. RGB exprime les couleurs par une combinaison de rouge (0-255), vert (0-255) et bleu (0-255). HSL utilise la teinte (Hue, 0-360), la saturation (Saturation, 0-100 %) et la luminosité (Lightness, 0-100 %), ce qui est le plus proche de l'intuition humaine.
OKLCH est un espace colorimétrique CSS moderne perceptuellement uniforme (perceptually uniform). Avec le HSL classique, les couleurs pouvaient paraître de luminosité différente même avec les mêmes valeurs de saturation et de luminosité. OKLCH résout ce problème, ce qui le rend avantageux pour créer des palettes cohérentes. Il est inclus dans la norme CSS Color Level 4.
La valeur alpha est un nombre entre 0 (complètement transparent) et 1 (complètement opaque) qui indique la transparence de la couleur. En CSS, elle s'utilise comme rgba(59, 130, 246, 0.5), et en HEX, on ajoute 2 chiffres à la fin comme #3B82F680. Elle est utilisée pour les superpositions, les ombres, les arrière-plans, etc.
Selon les directives WCAG 2.1, le rapport de contraste de luminosité entre le texte et l'arrière-plan doit être d'au moins 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille. Lors du choix des couleurs, il est important de vérifier le contraste avec la couleur d'arrière-plan afin que les personnes malvoyantes puissent également lire le contenu.
Saisissez le code HEX copié depuis des outils de design comme Figma ou Sketch dans cet outil, et il sera automatiquement converti en formats utilisables en CSS tels que RGB et HSL. La gestion via des variables CSS est efficace pour les changements de thème, et le format HSL facilite le réglage de la luminosité et de la saturation.