Convertisseur de couleurs

Convertissez des couleurs entre HEX, RGB, HSL et OKLCH, trouvez chaque couleur d’un bout de CSS et créez nuances et harmonies — directement dans votre navigateur.

À propos de Convertisseur de couleurs

De quoi s’agit-il

Cet outil prend une couleur ou tout un bloc de CSS, SVG ou JSON et y trouve chaque couleur. Pour la couleur active, il affiche tous les formats courants, une gamme de nuances de 50 à 950, les harmonies complémentaire et analogue et le contraste sur blanc et sur noir. Le résultat s’exporte en variables CSS, configuration Tailwind ou JSON Figma.

Fonctionnalités principales

  • Chaque couleur trouvée dans du CSS, SVG ou JSON collé — HEX, rgb(), hsl(), oklch() et plus.
  • La couleur active dans tous les formats courants, avec une pipette.
  • Une gamme de nuances de 50 à 950.
  • Les harmonies complémentaire et analogue.
  • Contraste sur blanc et sur noir avec repères AA et AAA ; export en variables CSS, Tailwind ou JSON Figma.

Comment l’utiliser

  1. Collez une couleur ou un bloc de CSS, SVG ou JSON, ou cliquez sur « Exemple ».
  2. Choisissez la couleur à travailler.
  3. Copiez-la dans le format voulu, ou regardez les nuances et les harmonies.
  4. Exportez les couleurs en code si vous construisez un thème.

Quand c’est utile

  • Convertir les couleurs HEX d’une maquette en OKLCH ou HSL pour votre CSS.
  • Obtenir une gamme complète de nuances à partir d’une seule couleur de marque.
  • Rassembler toutes les couleurs d’une ancienne feuille de style.

Confidentialité et limites

Vos données

Vos couleurs et votre code sont traités dans votre navigateur et ne sont pas envoyés à un serveur — le site reçoit seulement un événement anonyme « outil ouvert », sans le contenu. Un résultat envoyé vers un autre outil reste 24 heures sur cet appareil dans « Activité récente ».

Limites

  • Les variables CSS comme var(--brand) ne sont pas résolues : seules les valeurs de couleur écrites dans le texte sont trouvées.
  • Certains formats arrondissent légèrement les valeurs : un aller-retour peut modifier le dernier chiffre.

Questions fréquentes

Quels formats de couleur sont pris en charge ?

HEX (3, 6 ou 8 chiffres), rgb(), hsl(), oklch(), oklab() et les noms de couleur CSS comme rebeccapurple. Chaque format trouvé dans le texte s’affiche à côté de sa valeur dans tous les autres.

Comment la gamme de nuances est-elle construite ?

À partir de la couleur active, des paliers plus clairs et plus foncés de 50 à 950 sont créés et nommés comme les palettes Tailwind, pour les intégrer directement à un thème.

Puis-je convertir beaucoup de couleurs d’un coup ?

Oui — collez un fichier CSS entier ou un JSON de design tokens, et toutes les couleurs qu’il contient sont trouvées et listées.