Color Picker Pro
Sélecteur de couleurs avancé avec prise en charge de plusieurs formats
Formats de couleur
Harmonie des couleurs
Color Picker Pro
Sélecteur de couleurs avancé avec prise en charge de plusieurs formats
Fonctionnalités
- Choisissez les couleurs via curseurs teinte/saturation/luminosité ou collez une valeur HEX, RGB ou HSL pour synchroniser tous les canaux instantanément
- Sortie en six formats simultanément : HEX, RGB, RGBA, HSL, HSLA et CMYK (prêt pour impression, sans intégration de profil)
- Ratio de contraste WCAG 2.1 contre toute couleur de texte test, avec badges AA (4.5:1) et AAA (7:1) via la formule de luminance relative W3C
- Générateur d'harmonie produisant variantes complémentaires, triadiques, analogues et monochromatiques depuis la teinte courante
- Palettes curatées incluant Material Design, Tailwind CSS et un set haute-contraste axé accessibilité
- Historique local de couleurs jusqu'à 20 picks récents persisté en localStorage (effacé sur demande, jamais synchronisé)
- Support canal alpha pour sorties RGBA et HSLA prêtes à intégrer dans des CSS custom properties
- Échantillons aléatoires et copie en un clic pour toute chaîne de format individuelle
Mode d'emploi
- Glissez les curseurs teinte/saturation/luminosité ou collez un HEX connu pour piloter le sélecteur depuis un point de départ précis.
- Ajustez le curseur alpha pour transparence (overlay, effet verre, token de design).
- Ouvrez Formats pour voir HEX, RGB(A), HSL(A) et CMYK côte à côte et copier celui attendu par votre stack.
- Activez le panneau Accessibilité et définissez une couleur texte test pour vérifier le ratio WCAG AA ou AAA avant livraison.
- Ouvrez Harmonie pour obtenir compagnons complémentaires, triadiques ou analogues pour une palette équilibrée.
- Ajoutez les picks à l'Historique en expérimentant ; cliquez sur un swatch pour le rappeler plus tard.
Conseils et bonnes pratiques
- Prévisualisez les changements en temps réel pendant que vous ajustez.
- Copiez le code généré directement dans votre feuille de style CSS.
- Testez vos designs en mode clair et sombre pour l'accessibilité.
- Utilisez les outils dev du navigateur en parallèle pour tests live.
- Sauvegardez vos configurations favorites pour accès rapide.
FAQ
Pourquoi le même HEX affiche des valeurs RGB différentes ailleurs ?
Les valeurs couleur peuvent être en sRGB ou display-P3, et les navigateurs rendent différemment selon calibrage moniteur et profils ICC. Ce sélecteur utilise sRGB (défaut CSS Color Module Level 3) et arrondit en canaux 8 bits (0–255). Pour des tokens design wide-gamut, utilisez un outil P3 et convertissez avec color() de CSS Color Level 4.
Comment le ratio de contraste WCAG est-il calculé ?
Le ratio utilise la formule de luminance relative W3C : chaque canal sRGB est linéarisé (gamma sRGB-vers-linéaire), pondéré 0.2126R + 0.7152G + 0.0722B, puis luminances claire et sombre combinées en (L1 + 0.05) / (L2 + 0.05). AA passe à 4.5:1 pour texte normal, 3:1 pour grand texte ; AAA à 7:1. Le calcul tourne dans votre navigateur sur la paire courante.
Quelque chose est-il envoyé à un serveur quand je choisis une couleur ?
Non. Conversions de couleur, lookup de palettes, math de contraste et historique tournent tous côté client en JavaScript. Le seul stockage persistant est localStorage pour l'historique, qui vit sur votre appareil et ne le quitte jamais. Vous pouvez utiliser l'outil hors-ligne une fois la page mise en cache.
Pourquoi la sortie CMYK ne correspond pas exactement à mes valeurs Pantone ou Adobe ?
CMYK est dépendant du périphérique et requiert un profil ICC pour être précis en impression. Les outils navigateur ne peuvent pas embarquer de profil CMYK, donc la sortie ici est une conversion sRGB-vers-CMYK naïve, utile pour référence rapide seulement. Pour production, générez CMYK dans Photoshop ou Illustrator avec le profil de votre imprimeur.
Comment le générateur d'harmonie choisit-il ses couleurs ?
Le générateur fait tourner la teinte HSL courante : complémentaire est +180 degrés, triadique ajoute deux couleurs à +120 et +240, analogue ajoute voisins à +30 et +330, monochromatique décale saturation et luminosité. C'est une approche mécanique de roue chromatique : bon point de départ mais ne tient pas compte d'uniformité perceptive, qui requiert Oklch ou Lab.
Puis-je utiliser ces valeurs directement comme CSS custom properties ?
Oui. La sortie HSL tombe directement dans CSS moderne comme `--brand: hsl(217 100% 60%)` ou avec alpha `hsla(217, 100%, 60%, 0.8)`. HSL est généralement préférée pour tokens de design car les rampes de luminosité deviennent triviales — bumper la troisième valeur donne états hover et active instantanés sans recalculer RGB.
Le sélecteur supporte-t-il display-P3 ou wide-gamut ?
Pas actuellement. Le sélecteur suppose sRGB et sort 8 bits par canal HEX/RGB. Pour P3 ou Rec.2020, utilisez un outil émettant CSS Color Level 4 comme `color(display-p3 0.4 0.5 0.9)`. Nous l'ajouterons quand le support navigateur se stabilisera sur toutes les cibles.
Pourquoi mon historique de couleurs sauvegardé a disparu ?
L'historique persiste dans localStorage lié à ce domaine. Effacer données navigateur, mode privé/incognito ou changer de navigateur le réinitialise. Plafond 20 entrées pour éviter problèmes de quota — les vieux picks sont évincés à mesure que de nouveaux arrivent.