🎨 Sélecteur de Couleur
Choisissez une couleur et obtenez instantanément les valeurs HEX, RGB et HSL.
Qu'est-ce que cet outil ?
Un sélecteur de couleur est un utilitaire qui vous permet de choisir une couleur dans une palette visuelle et de voir instantanément ses valeurs dans les trois formats de couleur les plus courants utilisés sur le web : HEX, RGB et HSL. Les designers, les développeurs et les artistes passent constamment d'une représentation à l'autre parce que différents outils et contextes attendent différents formats. Les feuilles de style CSS acceptent souvent n'importe lequel des trois, mais les logiciels de design comme Figma ou Photoshop peuvent afficher le HEX par défaut, tandis que les bibliothèques de visualisation de données demandent fréquemment des tuples RGB ou HSL. Cet outil comble ces lacunes en affichant les trois valeurs côte à côte et en les gardant synchronisées lorsque vous ajustez la couleur, afin que vous n'ayez jamais à chercher un convertisseur séparé. L'entrée de couleur intégrée ouvre le sélecteur natif de votre système d'exploitation, qui prend en charge une sélection fine sur tout le spectre, tandis que le champ HEX manuel vous permet de coller un code existant pour l'inspecter ou le convertir. Le grand échantillon d'aperçu affiche la couleur exacte à une taille généreuse afin que vous puissiez la juger avec précision, et les boutons de copie en un clic envoient chaque valeur dans votre presse-papiers prête à coller dans une feuille de style, une bibliothèque de composants ou un fichier de design. Comme les conversions sont effectuées avec des mathématiques standard d'espace colorimétrique, les valeurs sont précises et cohérentes entre les navigateurs. Que vous construisiez une palette de marque, que vous choisissiez une couleur d'accent pour un bouton ou que vous traduisiez le code HEX d'un designer dans le HSL dont votre bibliothèque de graphiques a besoin, cet outil vous donne la bonne valeur dans le bon format sans aucune friction.Comment ça marche
L'outil maintient une source unique de vérité pour la couleur actuelle et la convertit entre les formats chaque fois que la source change. Lorsque vous utilisez l'entrée de couleur visuelle, le navigateur renvoie une chaîne HEX telle que #3b82f6, que l'outil lit et divise en ses composantes rouge, vert et bleu en analysant les paires hexadécimales. Ces trois valeurs, chacune allant de zéro à deux cent cinquante-cinq, forment le tuple RGB qui est affiché. Pour produire la représentation HSL, l'outil normalise les canaux RGB sur une plage de zéro à un et trouve les valeurs maximales et minimales pour calculer la luminosité, puis déduit la saturation de l'écart entre elles, et enfin calcule la teinte comme un angle autour de la roue chromatique en fonction du canal le plus grand. Lorsque vous saisissez un code HEX manuellement, l'outil valide l'entrée, accepte les codes avec ou sans dièse initial, et remplit le raccourci à trois chiffres, puis exécute le même pipeline de conversion afin que les sorties RGB et HSL se mettent à jour instantanément. L'échantillon d'aperçu de couleur est mis à jour en définissant son arrière-plan sur la valeur HEX actuelle, vous donnant un rendu précis et grand format de la couleur choisie. Chaque conversion se fait localement en JavaScript, donc l'outil est rapide, privé et fonctionne hors ligne, sans aucun appel réseau requis pour les calculs.Mode d'emploi
Choisir et convertir une couleur ne prend qu'un instant.
- Cliquez sur le carré coloré pour ouvrir le sélecteur de couleur natif de votre système et choisir n'importe quelle couleur visuellement. Alternativement, saisissez un code HEX à six chiffres dans le champ de saisie HEX, avec ou sans le dièse initial.
- Lorsque vous changez la couleur, l'échantillon d'aperçu se met à jour instantanément et les valeurs HEX, RGB et HSL se recalculent en temps réel.
- Examinez les trois valeurs affichées sous l'aperçu. Chacune est présentée dans le format exact prêt à coller dans CSS ou un outil de design.
- Cliquez sur le bouton Copier à côté du format dont vous avez besoin pour envoyer cette valeur dans votre presse-papiers, puis collez-la dans votre feuille de style, composant ou document. Vous pouvez changer de couleur aussi souvent que vous le souhaitez, et chaque valeur reste parfaitement synchronisée.
Questions Fréquentes
Questions Fréquentes
Quelle est la différence entre HEX, RGB et HSL ?
HEX exprime une couleur sous forme de chaîne hexadécimale à six chiffres comme #FF5733, où chaque paire de chiffres représente les canaux rouge, vert et bleu. RGB liste ces mêmes trois valeurs de canal sous forme de nombres décimaux de 0 à 255, par exemple rgb(255, 87, 51). HSL décrit une couleur par teinte, saturation et luminosité, ce qui semble souvent plus intuitif car vous pouvez assombrir ou saturer une couleur en ajustant une seule valeur.
Puis-je saisir un code HEX manuellement ?
Oui. Saisissez n'importe quel code HEX valide à six chiffres, avec ou sans le dièse initial, dans le champ HEX et l'outil met instantanément à jour l'aperçu et affiche les valeurs RGB et HSL correspondantes. Le raccourci à trois chiffres tel que #3b5 est également accepté et développé en sa forme à six chiffres.
Quel format devrais-je utiliser dans mon CSS ?
Les trois formats sont valides en CSS moderne, le choix est donc surtout une question de commodité. Le HEX est compact et largement utilisé dans les feuilles de style. Le RGB est clair lorsque vous devez ajuster l'opacité avec la notation rgba(). Le HSL est particulièrement utile lorsque vous voulez créer des teintes et des nuances de la même teinte, parce que vous pouvez changer uniquement la luminosité tout en gardant la teinte et la saturation fixes.
Les valeurs converties sont-elles précises ?
Oui. Les conversions utilisent des mathématiques standard d'espace colorimétrique, donc les valeurs HEX, RGB et HSL sont précises et cohérentes entre les navigateurs. Comme ces formats décrivent tous le même espace colorimétrique sRGB, la conversion entre eux ne perd jamais d'information.
Conseils et Recommandations
Lors de la construction d'une palette de couleurs, partez d'une seule couleur de marque et utilisez la lecture HSL pour générer des variantes harmonieuses en ajustant la luminosité et la saturation tout en gardant la teinte constante, ce qui produit des teintes et des nuances qui semblent aller ensemble. Pour les interfaces accessibles, vérifiez toujours le rapport de contraste entre votre couleur choisie et le texte ou l'arrière-plan sur lequel elle se trouve, car une couleur qui semble frappante peut encore échouer aux normes de lisibilité. N'oubliez pas qu'une luminosité HSL de cinquante pour cent n'est pas la même chose que la luminosité perceptive, donc des jaunes très brillants et des bleus très sombres à la même luminosité HSL peuvent sembler assez différents. Si vous transmettez des couleurs à un développeur, fournissez le code HEX comme valeur canonique et incluez les équivalents RGB et HSL comme références. Enfin, stockez votre palette finale dans un fichier de tokens partagé afin que chaque membre de l'équipe référence les mêmes valeurs, ce qui empêche la dérive subtile qui se produit lorsque les couleurs sont copiées à l'œil d'un outil à l'autre.