Color picker : choisir une couleur
Choisissez une couleur (HEX, RGB, HSL, OKLCH) ou via le sélecteur visuel et copiez les codes dans le format voulu.
Soutenez le projet
J’ai choisi de limiter les publicités pour garder l’expérience simple et agréable. Si cet outil vous a été utile, vous pouvez m’aider à le faire vivre — chaque geste compte pour un développeur solo.
Description
Le sélecteur de couleur est un outil en ligne gratuit qui permet de choisir une couleur (saisie en HEX, RGB, HSL ou OKLCH ou via un sélecteur visuel) et d’obtenir immédiatement sa conversion dans les quatre formats : HEX, RGB, HSL et OKLCH. Idéal pour les développeurs et designers qui ont besoin d’un code couleur dans un format précis. Aucun bouton de validation : le résultat se met à jour automatiquement lorsque vous modifiez la couleur. Chaque format est cliquable pour copier le code dans le presse-papiers.
Comment faire
- Saisir une couleur dans le champ prévu : entrez un code HEX (ex.
#3b82f6), une expression RGB (ex.rgb(59, 130, 246)), HSL ou OKLCH. L’outil détecte automatiquement le format. - Ou utiliser le sélecteur visuel : si la valeur est un HEX à 6 chiffres (ex.
#3b82f6), la pastille et la barre de teinte sous le champ deviennent actives. Glissez dans la zone (saturation / luminosité) ou sur la barre de teinte pour ajuster la couleur ; la valeur HEX est mise à jour en direct. - Consulter le bloc « Couleur convertie » : la pastille principale affiche la couleur et permet de copier le code HEX en un clic. Les lignes HEX, RGB, HSL et OKLCH permettent de copier chaque format individuellement.
Aucune action supplémentaire n’est nécessaire : la conversion est effectuée automatiquement après la saisie ou la sélection.
Exemples
Exemple 1 – Bleu
Entrée : #3b82f6.
Résultat : pastille bleue, codes HEX / RGB / HSL / OKLCH à copier (ex. rgb(59, 130, 246), hsl(217, 91%, 60%), etc.).
Exemple 2 – Rouge en RGB
Entrée : rgb(220, 38, 38).
Résultat : couleur convertie en HEX, HSL et OKLCH, tous copiables en un clic.
Exemple 3 – Vert en HSL
Entrée : hsl(142, 71%, 45%).
Résultat : équivalents HEX, RGB et OKLCH affichés et copiables.
Cas d’usage
- Intégration CSS : obtenir rapidement un code dans le format attendu (HEX pour un design, RGB pour du JavaScript, OKLCH pour des feuilles de style modernes).
- Prototypage : vérifier une couleur dans plusieurs notations sans calcul manuel.
- Cohérence : s’assurer qu’une même couleur est utilisée avec le même code dans tout le projet.
Limites et précisions
- Les couleurs sont interprétées et converties dans l’espace sRGB (affichage écran). Les valeurs OKLCH hors gamut sRGB sont ramenées dans le gamut pour l’affichage.
- Le sélecteur visuel (pastille + barre de teinte) ne s’active que lorsque le champ contient un HEX à 6 chiffres valide (ex.
#3b82f6). Pour les autres formats (RGB, HSL, OKLCH), utilisez le champ texte ; la conversion s’affiche automatiquement.
Bonnes pratiques
- Utilisez OKLCH dans vos CSS pour des palettes plus équilibrées perceptuellement (recommandé par les spécifications CSS modernes).
- Pour coller une couleur depuis un logiciel de design, vérifiez le format (souvent HEX) et collez-le dans le champ ; vous obtiendrez les autres formats sans quitter l’outil.
FAQ
Quels formats de couleur sont acceptés en entrée ?
L’outil accepte le HEX (#RGB, #RRGGBB, #RRGGBBAA), RGB/RGBA (ex. rgb(59, 130, 246) ou rgba(59, 130, 246, 0.8)), HSL/HSLA (ex. hsl(217, 91%, 60%)) et OKLCH (ex. oklch(0.6 0.2 250)). La détection est automatique selon la forme de la chaîne saisie.
Pourquoi le sélecteur visuel ne réagit pas ?
Le sélecteur (zone saturation/luminosité et barre de teinte) ne fonctionne que lorsque le champ contient un code HEX à 6 chiffres valide (ex. #3b82f6). Si vous avez saisi du RGB, HSL ou OKLCH, la conversion s’affiche bien mais le sélecteur visuel reste sur une couleur par défaut jusqu’à ce que vous saisissiez un HEX.
Comment copier un format ?
Cliquez sur la pastille principale pour copier le code HEX. Cliquez sur l’une des lignes (HEX, RGB, HSL, OKLCH) dans le bloc « Autres formats » pour copier ce format. Un message « Copié » confirme l’action.
Le résultat se met-il à jour tout seul ?
Oui. Dès que vous modifiez le champ ou la sélection visuelle, la conversion est recalculée automatiquement après une très courte pause (environ 300 ms). Aucun bouton « Convertir » ou « Générer » n’est nécessaire.
Les couleurs sont-elles enregistrées ou envoyées sur un serveur ?
Non. Le calcul est effectué uniquement dans votre navigateur. Aucune couleur n’est envoyée à un serveur ni stockée. Vous pouvez utiliser l’outil en toute confidentialité.
Quelle est la différence entre HEX, RGB, HSL et OKLCH ?
- HEX : notation compacte en base 16 (ex.
#3b82f6), très utilisée en CSS et en design. - RGB : rouge, vert, bleu en nombres (0–255), pratique en JavaScript.
- HSL : teinte, saturation, luminosité ; intuitif pour ajuster teinte et clarté.
- OKLCH : luminosité, chroma, teinte dans un espace perceptuellement uniforme ; recommandé pour les CSS modernes et les dégradés.
Une suggestion ou une demande d'outil ?
Vous avez repéré une erreur, vous souhaitez un nouvel outil ou vous avez un retour à partager ? Contactez-moi par email, je serais ravi d'échanger avec vous.