Choisissez une couleur visuellement, affinez ses valeurs HEX, RGB ou HSL, vérifiez le contraste et copiez le CSS prêt à l'emploi dans votre navigateur.
Saisissez #RGB, #RGBA, #RRGGBB ou #RRGGBBAA. La pipette apparaît lorsque votre navigateur la prend en charge.
L'aperçu conserve la dernière couleur valide jusqu'à ce que cette valeur soit corrigée.
Les valeurs de base, de teinte et de nuance fonctionnent désormais ensemble dans un composant réel.
Les couleurs que vous choisissez apparaîtront ici sur cet appareil.
Cinq mélanges sRGB vers le blanc et cinq vers le noir, avec l'alpha préservé.
Le texte doit rester lisible sur l'arrière-plan choisi.
La transparence est appliquée sur l'arrière-plan avant le calcul du rapport.
La couleur est entièrement transparente, donc aucun texte n'est rendu et il n'y a rien à mesurer. Augmentez l'alpha pour obtenir un véritable résultat de contraste.
Utilisez ce sélecteur de couleur en ligne pour choisir une couleur visuellement ou saisir une valeur HEX, RGB ou HSL exacte. Le sélecteur de couleur hexadécimale maintient chaque format synchronisé, préserve la transparence alpha et transforme une sélection en une famille de couleurs CSS pratique. Il fonctionne également comme un sélecteur de couleur pour les navigateurs et les claviers configurés en anglais britannique.
Un sélecteur de couleurs CSS utile nécessite plus qu'un simple échantillon. Cet outil mélange cinq teintes sRGB déterministes vers le blanc et cinq nuances vers le noir, tout en préservant la valeur alpha sélectionnée. L'aperçu du composant appliqué montre la couleur de base, une teinte et une nuance ensemble, et l'exportation CSS utilise des noms de variables explicites de type teinte-1 à nuance-5. Besoin d'une harmonie complète au lieu d'une seule famille ? Envoyez la couleur au générateur de palettes de couleurs.
Sur les navigateurs compatibles, le bouton Prélever sur l'écran ouvre la pipette native du navigateur, vous permettant de prélever n'importe quel pixel visible, sans avoir à installer d'extension ou de module complémentaire de sélecteur de couleur. Si l'API EyeDropper n'est pas disponible, tous les contrôles manuels du sélecteur de couleur continuent de fonctionner. L'outil pipette conserve votre alpha actuel au lieu de le remplacer silencieusement.
L'aperçu du contraste compare la couleur du texte sélectionnée avec un arrière-plan modifiable et indique les résultats WCAG AA pour le texte normal et le texte agrandi une fois la transparence appliquée. Considérez ceci comme une vérification de couleur ciblée plutôt que comme un audit d'accessibilité complet ; la taille de police réelle, la graisse, les états, les dégradés, les icônes et les composants environnants doivent toujours être examinés. Le vérificateur de contraste de couleurs complet ajoute les seuils AAA, non textuels et les alternatives accessibles.
L'analyse des couleurs, les aperçus, les couleurs récentes, les calculs de contraste et la génération de CSS s'exécutent localement dans ce navigateur. Les couleurs récentes sont stockées uniquement sur cet appareil lorsque le stockage local est disponible. Aucune couleur sélectionnée n'est envoyée aux outils d'analyse, et un lien de partage contient des valeurs de couleur uniquement lorsque vous le créez explicitement.
Ouvrez le contrôle de couleur visuel et choisissez une teinte, ou saisissez une valeur HEX, RGB ou HSL. Chaque sélection valide met à jour l'aperçu, la famille de couleurs, le résultat du contraste et les variables CSS.
Oui, si votre navigateur prend en charge l'API EyeDropper. Choisissez 'Sélectionner depuis l'écran', sélectionnez un pixel visible, et l'outil applique cette valeur RGB tout en conservant votre valeur alpha existante.
Oui. Utilisez les formats HEX à 4 ou 8 chiffres, RGBA, HSLA, ou le curseur alpha. Les valeurs HEXA, RGBA, HSLA, les aperçus, les teintes, les nuances, le contraste, les couleurs récentes et les variables CSS restent synchronisés.
Les teintes sont des mélanges sRGB uniformes entre la couleur de base et le blanc ; les nuances sont des mélanges sRGB uniformes entre la couleur de base et le noir. Ce sont des aides déterministes, et non une échelle de perception OKLCH.
Non. Le sélecteur s'exécute localement. Les couleurs récentes sont conservées dans ce navigateur, et les valeurs exactes sont exclues des données analytiques. Un lien de partage inclut les couleurs sélectionnées uniquement si vous en faites la demande.
Non. HSL décrit une couleur par sa teinte, sa saturation et sa luminosité, tandis que HSV/HSB utilise la teinte, la saturation et la valeur ou la brillance. Ils partagent l'axe de la teinte mais la saturation est mise à l'échelle différemment, donc une conversion de HSL vers HSV modifie les deux derniers nombres. Ce sélecteur modifie le HSL car CSS prend en charge hsl() directement ; les valeurs HEX et RGB restent identiques dans les deux cas.
Phoenix Code vous offre l'édition HTML et CSS, la recherche sur l'ensemble du projet, Git et l'aperçu en direct dans un éditeur de code complet pour navigateur ou de bureau.