Sélecteur de couleur HTML — HEX, RGB, HSL et contraste

Sélecteur de couleur HTML : HEX, RGB et HSL en un clic

Cliquez sur la pastille pour ouvrir le sélecteur, choisissez une couleur et récupérez aussitôt ses codes HEX, RGB et HSL. L’outil génère aussi un extrait CSS à copier et affiche le ratio de contraste de la couleur sur fond blanc et sur fond noir.

Comment utiliser le sélecteur

1. Cliquez sur la pastille de couleur pour ouvrir le sélecteur de votre navigateur.
2. Choisissez la teinte voulue. L’aperçu et les trois codes se mettent à jour.
3. Cliquez sur Copier HEX, Copier RGB ou Copier HSL selon le format dont vous avez besoin.
4. Reprenez l’extrait CSS pour l’ajouter directement dans votre feuille de style.
5. Retrouvez vos dernières couleurs dans « Récemment utilisé » pour y revenir plus tard.

HEX, RGB, HSL : quelle différence ?

• HEX (par exemple #6366f1) : le format le plus courant en HTML et en CSS.
• RGB (par exemple rgb(99, 102, 241)) : trois valeurs de 0 à 255 pour le rouge, le vert et le bleu.
• HSL (par exemple hsl(239, 84%, 67%)) : teinte, saturation et luminosité. Pratique pour créer une variante plus claire ou plus foncée d’une même couleur.

Pourquoi vérifier le contraste

Un texte doit rester lisible sur son fond. Le ratio de contraste indique si la couleur choisie se lit bien sur du blanc ou sur du noir. Les recommandations d’accessibilité WCAG demandent au minimum 4,5:1 pour un texte courant. Utilisez ce ratio pour écarter rapidement les combinaisons trop pâles.

Questions fréquentes

Les couleurs sont-elles enregistrées ?
L’historique reste dans votre navigateur. Rien n’est envoyé à un serveur.

Puis-je saisir un code HEX à la main ?
Le champ HEX sert à copier le résultat. Pour une couleur précise, choisissez-la dans le sélecteur de votre navigateur.

Le sélecteur est-il le même sur tous les navigateurs ?
Non, son apparence dépend du navigateur et du système. Les codes obtenus, eux, sont identiques.