FileFlipSélecteur de Couleur

Sélecteur de Couleur

Choisissez et convertissez les couleurs entre HEX, RGB, HSL, CMYK. Générez des harmonies et vérifiez le contraste WCAG.

Aperçu

sur blanc 3.7:1AA Failsur noir 5.7:1AA Pass

Contraste

#3b82f6
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
cmyk(76%, 47%, 0%, 4%)
--color-primary: #3b82f6

Harmonies de couleurs

Complémentaire

Analogues

Triadique

Complémentaire divisé

Tétradique

Teintes et ombres

Comment utiliser

  • Cliquez sur le sélecteur ou saisissez une valeur HEX/RGB/HSL
  • Tous les formats se mettent à jour automatiquement
  • Cliquez sur une valeur pour la copier

tools.colorPicker.editorialTitle

tools.colorPicker.editorialBody

Outils associés

Générateur de favicon
Image en Texte (OCR)
Compteur de Mots

Questions fréquentes

Qu'est-ce qu'un sélecteur de couleur et comment ça marche ?
Un sélecteur de couleur permet de choisir une couleur visuellement ou par valeurs et de la voir en différents formats (HEX, RGB, HSL, CMYK). Celui-ci synchronise tous les champs en temps réel et permet de copier tout format, générer des harmonies et vérifier le contraste pour l'accessibilité.
Quelle est la différence entre HEX, RGB et HSL ?
HEX est une écriture compacte du RGB (ex. #ff0000 pour le rouge). RGB utilise trois nombres de 0 à 255. HSL décrit la couleur par Teinte (0–360), Saturation et Luminosité (0–100 %). L'outil convertit entre eux instantanément.
Qu'est-ce que le CMYK et quand l'utiliser ?
CMYK désigne Cyan, Magenta, Jaune et Noir. Il est surtout utilisé en impression. L'outil affiche l'équivalent CMYK de toute couleur pour unifier la marque entre web et print.
Qu'est-ce que le ratio de contraste WCAG ?
WCAG définit des ratios de contraste minimaux entre texte et fond. AA exige 4,5:1 pour le texte normal ; AAA 7:1. L'outil affiche le ratio sur blanc et sur noir et indique si ça passe AA ou AAA.
Qu'est-ce que les harmonies de couleurs ?
Ce sont des ensembles de couleurs qui s'accordent : complémentaire, analogues, triadique, complémentaire divisé, tétradique. L'outil les génère à partir de la couleur choisie. Cliquez sur un échantillon pour l'utiliser comme couleur principale.
Qu'est-ce que les teintes et les ombres ?
Les teintes sont une couleur avec plus de blanc ; les ombres avec plus de noir. L'outil génère neuf pas de 10 % à 90 %, proches des échelles Tailwind CSS.
Puis-je l'utiliser pour le web et le CSS ?
Oui. Vous obtenez HEX, RGB, RGBA, HSL, HSLA et une variable CSS. Copiez toute valeur dans votre feuille de style. Le contraste aide à choisir des couleurs de texte accessibles.
Qu'est-ce qu'une variable CSS (custom property) pour les couleurs ?
Les custom properties CSS permettent de définir une couleur une fois et de la réutiliser (ex. --color-primary: #1a2b3c; puis var(--color-primary)). L'outil affiche la forme variable pour :root.