Installe notre application 🪄 clique sur l'icône en haut à droite de la barre d'adresse.

Sélecteur de couleurs

0 sur 0 notes
HEXA
CMYK
HSLA
HSVA
RGBA
Un cercle chromatique visuel pour choisir des teintes et les convertir aux formats hexadécimal, RVB et TSL.

Sélectionne une teinte sur la roue visuelle et convertis-la instantanément en hex, rgb et hsl. Ce color picker gratuit fait le boulot sans te demander de créer un compte.

Comment la roue des couleurs génère les formats

Tu cliques sur la roue. L'outil calcule alors les coordonnées exactes dans l'espace teinte, saturation et luminosité. Il applique des matrices de conversion standard pour extraire les équivalents dans les autres espaces colorimétriques. Tu récupères le code hex brut, le triplet rgb et les valeurs hsl d'un seul coup. Tout ce calcul mathématique s'exécute directement dans ton navigateur.

Le modèle traite la couleur comme un cylindre 3D. La teinte s'enroule sur le bord circulaire. La saturation part du centre gris vers l'extérieur. La luminosité va du noir pur en bas au blanc en haut. Bouger un seul curseur met à jour les autres, car ils sont liés mathématiquement. Tu peux aussi taper des nombres exacts dans les champs si tu connais déjà tes valeurs cibles.

Quand utiliser ce color picker gratuit

Les designers s'en servent pour extraire des valeurs exactes d'une maquette quand un client veut un bleu précis. Les devs frontend en ont besoin pour traduire un choix visuel en variable css valide. Tu veux peut-être juste trouver une teinte complémentaire pour une slide de présentation. L'outil fait le pont entre l'intuition visuelle et les exigences strictes du code.

C'est particulièrement utile quand tu construis un design system et que tu dois vérifier les ratios de contraste. Tu choisis une couleur de base, tu vérifies son code hex, puis tu ajustes manuellement le curseur de luminosité jusqu'à ce que le texte reste lisible sur un fond sombre.

  • Extraire des codes hex exacts depuis une image de charte graphique.
  • Générer des palettes complémentaires ou analogues pour un nouveau thème de site.
  • Convertir une valeur rgb issue d'une capture d'écran en code hex utilisable.
  • Tester le contraste du texte en ajustant la luminosité jusqu'à valider le ratio.

Les limites de ce color picker en ligne

Cet outil opère entièrement dans l'espace colorimétrique standard srgb. Il ne peut pas générer de valeurs pour les écrans à large gamut comme display-p3 ou rec2020. Si tu designes pour des mobiles haut de gamme supportant des gamuts plus larges, les valeurs hex et rgb obtenues ici seront écrêtées ou mal mappées lors du rendu sur ces appareils.

Tu ne peux pas non plus entrer une valeur cmyk directement pour la voir sur la roue. La conversion de cmyk vers rgb dépend fortement du profil icc spécifique de l'imprimante cible. L'outil suppose une conversion générique standard. C'est parfait pour le web design, mais imprécis pour la production print professionnelle. Vérifie toujours les épreuves physiques.

Comment utiliser le color picker

  1. Clique n'importe où dans le grand carré de couleur pour définir la saturation et la luminosité de base.
  2. Fais glisser le curseur vertical à droite pour ajuster la teinte globale.
  3. Ajuste les valeurs exactes via les champs de saisie numériques pour hex, rgb ou hsl.
  4. Copie le code généré directement depuis la zone de texte à côté de ton format préféré.
  5. Ajuste le curseur d'opacité si tu as besoin d'une valeur rgba ou hsla avec un canal alpha spécifique.

Comparaison des formats de couleur

Chaque environnement exige son propre format de chaîne. Savoir lequel utiliser t'évite des bugs de rendu.

FormatExemple de syntaxeCas d'usage principal
Hex#ff5733Feuilles de style CSS et attributs HTML
RGBrgb(255, 87, 51)API Canvas et CSS legacy
HSLhsl(11, 100, 60)Variables CSS et ajustements programmatiques de luminosité
RGBArgba(255, 87, 51, 0.5)Feuilles de style CSS nécessitant une transparence partielle

Frequently asked questions

Ce color picker est-il vraiment gratuit ?
Oui. L'outil est totalement gratuit et ne te demande pas de créer un compte. Tu peux générer autant de codes couleur que nécessaire sans jamais tomber sur un mur payant.
Comment picker une couleur depuis une image ?
Cet outil se base sur la roue visuelle et les curseurs, pas sur une pipette d'image. Pour extraire une couleur d'une photo, utilise d'abord la pipette couleur native de ton OS ou un outil d'extraction dédié. Une fois la valeur initiale obtenue, colle le code hex résultant dans le champ ici pour l'ajuster.
Pourquoi mon code hex a-t-il l'air différent sur mon téléphone ?
Le calibrage des écrans varie énormément d'un appareil à l'autre. Un code hex représente une valeur mathématique absolue dans l'espace srgb, mais l'écran physique modifie la façon dont cette lumière est émise. Si la couleur paraît fausse, le problème vient du profil de l'écran, pas du code généré.
Puis-je convertir du cmyk en hex ici ?
Tu peux entrer des valeurs cmyk, mais le code hex résultant n'est qu'une approximation. Le cmyk est un modèle soustractif pour l'encre, alors que hex est un modèle additif pour la lumière. La conversion manque du profil icc spécifique de l'imprimante nécessaire pour une vraie précision.
L'outil fonctionne-t-il sur les navigateurs mobiles ?
Oui. L'interface est responsive et les zones de toucher pour les curseurs et le carré de couleur sont assez grandes pour une saisie au doigt. Tu peux copier les codes générés dans ton presse-papier exactement comme sur un desktop. Le layout empile simplement les contrôles verticalement sur les petits écrans pour éviter le chevauchement des éléments.

Outils populaires