Skip to main content
chambe.dev

Convertisseur de Couleur et Vérificateur de Contraste

Outil convertisseur de couleur gratuit. Convertit entre les formats HEX, RGB, HSL. Vérifie les ratios de contraste WCAG et génère des palettes de couleur.

Vérificateur de Contraste

Texte d'Exemple
7.25:1
Ratio de Contraste
✓
WCAG AA
✓
WCAG AAA

Palette de Couleur

Convertissez les couleurs entre différents formats instantanément. Que vous ayez besoin de HEX pour CSS, RGB pour les outils de design, ou HSL pour la manipulation de couleur, cet outil gère toutes les conversions.

Vérifiez les ratios de contraste de couleur pour la conformité d'accessibilité WCAG et générez des palettes de couleur harmonieuses basées sur votre couleur sélectionnée.

Comment Utiliser Cet Outil

  1. 1 t
  2. 2 o
  3. 3 o
  4. 4 l
  5. 5 s
  6. 6 .
  7. 7 c
  8. 8 o
  9. 9 l
  10. 10 o
  11. 11 r
  12. 12 .
  13. 13 h
  14. 14 o
  15. 15 w
  16. 16 T
  17. 17 o
  18. 18 U
  19. 19 s
  20. 20 e
  21. 21 .
  22. 22 s
  23. 23 t
  24. 24 e
  25. 25 p
  26. 26 s

Cas d'Utilisation

Design Web

Convertissez les couleurs entre formats pour CSS, Sass et outils de design.

Accessibilité

Assurez que les couleurs de texte et d'arrière-plan respectent les exigences de contraste WCAG.

Branding

Créez des palettes de couleur cohérentes avec des variations de tons appropriées.

Développement

Convertissez rapidement les formats de couleur en travaillant sur différentes plateformes.

Questions Fréquentes

Quelle est la différence entre HEX, RGB et HSL ?

HEX utilise la notation hexadécimale (#RRGGBB), RGB spécifie les valeurs de rouge, vert, bleu (0-255), et HSL utilise la teinte (0-360), saturation et luminosité en pourcentages. Ce sont différentes façons de représenter les mêmes couleurs.

Qu'est-ce que le ratio de contraste WCAG ?

WCAG (Directives d'Accessibilité du Contenu Web) définit des ratios de contraste minimaux pour la lisibilité du texte. AA requiert 4.5:1 pour le texte normal, AAA requiert 7:1. Des ratios plus élevés sont plus accessibles.

Pourquoi utiliser HSL plutôt que RGB ?

HSL est plus intuitif pour ajuster les couleurs. Vous pouvez facilement créer des variations plus claires/foncées en changeant la luminosité, ou des versions plus/moins saturées, tout en gardant la même teinte.

Comment créer une palette de couleur ?

Commencez avec une couleur de base et variez la luminosité pour créer des tons. La palette ci-dessous montre 10 variations de clair (50) à foncé (900), similaire aux échelles de couleur Tailwind CSS.

Quel ratio de contraste viser ?

Pour le texte de corps, visez au moins 4.5:1 (AA). Pour le grand texte (18px+ ou 14px+ gras), 3:1 est acceptable. Pour une meilleure accessibilité, visez 7:1 (AAA) quand c'est possible.