Cinq outils complémentaires
Le choix de couleurs, l’extraction depuis une image, les palettes, les dégradés et le contraste reposent sur le même studio. Le sélecteur de mode ouvre la page de chaque outil.
Studio de couleurs
Choisissez des couleurs, extrayez une palette d’image, composez vos palettes, créez des dégradés CSS et vérifiez le contraste du texte.
Choisir un mode
Sélecteur de couleur
Harmonie des couleurs
Actuelle
Formats de couleur
Outils associés
Vos statistiques
0
Couleurs choisies
0
Palettes exportées
0
Dégradés créés
0
Contrastes vérifiés
Sélecteur de couleur
Mode le plus utilisé
0%
Score d’activité
Comment utiliser le studio de couleurs
Impossible de charger la vidéo. Vous pouvez suivre les instructions ci-dessous.
La vidéo présente l’interface en anglais.
Cliquez ou faites glisser le curseur sur la barre arc-en-ciel pour choisir la teinte. Ajustez la luminosité et la saturation dans la zone située dessous. Les valeurs à côté se mettent à jour. Si le navigateur le permet, vous pouvez aussi utiliser « Prélever à l’écran ».
Des outils pour travailler les couleurs
Couleurs d’images et de GIF
Prélevez une couleur dans l’aperçu ou extrayez une palette. Les GIF animés disposent de commandes par image. Le redimensionnement, le décodage et le regroupement peuvent modifier les couleurs obtenues.
Bibliothèque de dégradés CSS
Choisissez parmi 60 modèles avec recherche ou créez un fond linéaire, radial, conique ou multipoint. Consultez les limites des exports de code et d’images avant de les utiliser.
En afficher 3 de plusAfficher moins
Six harmonies de couleurs
Essayez les couleurs complémentaires, analogues, triadiques, complémentaires adjacentes, tétradiques et monochromatiques. Vérifiez séparément le contraste avant de les utiliser pour du texte.
Contraste du texte et du fond
Comparez deux couleurs unies aux quatre seuils WCAG AA et AAA pour le texte. Les filtres approximatifs de l’aperçu ne prouvent pas la conformité aux règles d’accessibilité.
Essayez d’ajuster le contraste
L’ajustement AA ou AAA tente de modifier les valeurs RVB du texte. Il peut échouer ou changer la teinte. Vérifiez donc le rapport obtenu.
Questions fréquentes
Quels outils de couleur sont disponibles ?
Le sélecteur affiche cinq formats et six harmonies. L’extraction d’image prélève des couleurs dans les photos et les images de GIF. L’outil de palettes modifie les nuances, le générateur de dégradés crée des fonds CSS et le vérificateur de contraste compare une paire de couleurs unies aux seuils WCAG pour le texte. Le sélecteur de mode ouvre chaque outil sur sa propre page.
Quels formats de couleur puis-je copier ?
Le sélecteur affiche HEX, RGB, HSL, HSV et une estimation CMYK. Copiez les valeurs séparément ou utilisez Copier tous les formats. Les champs sont en lecture seule. Les valeurs affichées sont arrondies et le CMYK n’utilise aucun profil ICC d’impression.
Puis-je extraire les couleurs d’un GIF animé ?
Oui. L’outil d’extraction propose la lecture et le choix d’images pour les GIF animés. Prélevez une couleur ou extrayez une palette de l’image choisie. Les grandes animations peuvent demander beaucoup de mémoire.
Quels formats d’image puis-je ouvrir ?
Utilisez un format que le navigateur sait décoder, comme PNG, JPG ou WebP. HEIC et HEIF disposent d’un décodeur local chargé au besoin. Les GIF animés sont décodés image par image. La prise en charge varie selon le navigateur et aucun décodeur TIFF spécifique n’est fourni ici.
En afficher 10 de plusAfficher moins
Quelles harmonies de couleurs sont proposées ?
Complémentaire, Analogue, Triade, Complémentaire divisée, Tétrade et Monochromatique. Cliquez sur une nuance proposée pour en faire la couleur actuelle. Une harmonie associe des couleurs sans vérifier l’accessibilité du texte.
Quels dégradés puis-je créer ?
Les dégradés linéaires, radiaux et coniques acceptent jusqu’à six arrêts. Les multipoints permettent dix points et superposent des dégradés radiaux CSS. La bibliothèque contient 60 modèles. Tailwind simplifie les dégradés en linéaires, le SVG remplace les types coniques et multipoints par des linéaires et les exports d’images ont leurs propres limites de rendu. L’export conique en image nécessite sa prise en charge par Canvas.
Quels rapports de contraste exigent les WCAG ?
Le texte courant exige au moins 4,5:1 pour AA et 7:1 pour AAA. Le grand texte exige respectivement 3:1 et 4,5:1. Un résultat conforme concerne la paire de couleurs et le seuil de texte choisis, pas un site entier.
L’outil peut-il ajuster le contraste pour moi ?
Ajuster à AA et Ajuster à AAA tentent d’éclaircir ou d’assombrir les canaux RVB du texte. La teinte peut changer et l’ajustement peut échouer avec le fond actuel. Vérifiez le rapport obtenu avant d’utiliser la couleur.
Que montrent les options de vision des couleurs ?
Protanopie, Deutéranopie et Tritanopie appliquent de simples filtres CSS à l’aperçu. Ce sont des effets visuels approximatifs, pas des modèles validés de vision des couleurs ni une preuve d’accessibilité.
Comment conserver une palette ?
Enregistrez-la comme modèle nommé dans ce navigateur ou exportez-la. Exporter les couleurs propose des fichiers PNG, JPG, SVG et JSON ainsi que la copie de variables CSS. Une palette de travail non enregistrée revient à Material quand vous rouvrez la page.
Où l’historique des couleurs est-il conservé ?
L’historique partagé conserve jusqu’à 20 entrées récentes dans ce navigateur, avec leur mode d’origine. Ouvrez Historique des couleurs pour les retrouver. Effacer les données du site peut les supprimer. L’historique n’est pas synchronisé entre appareils.
Puis-je prélever une couleur à l’écran ?
Prélever à l’écran utilise l’API EyeDropper lorsque le navigateur et l’appareil la prennent en charge. Elle exige un contexte sécurisé et renvoie une valeur HEX sRGB. Sinon, utilisez le curseur de teinte et la zone de couleur.
Où vont mes images et mes modèles ?
Les images choisies sont traitées dans ce navigateur, sans envoi à un serveur de conversion. Les modèles nommés et l’historique récent sont stockés localement dans IndexedDB. Exportez les résultats importants avant d’effacer les données du site.
Puis-je utiliser le studio de couleurs hors ligne ?
Les commandes et calculs déjà chargés peuvent fonctionner sans connexion, mais la page et tous les scripts nécessaires doivent être disponibles. Le décodeur HEIC est chargé au besoin, donc l’ouverture d’un nouveau fichier HEIC peut nécessiter une connexion pour le récupérer.
Détails techniques
Valeurs et harmonies de couleurs
Le sélecteur convertit les valeurs RGB en HEX, HSL, HSV et CMYK estimé. Les valeurs sont arrondies et les champs de format sont en lecture seule. Six harmonies décalent la teinte ou font varier la luminosité. La sortie CMYK n’utilise aucun profil ICC d’impression.
Aperçu d’image et extraction
L’échantillonnage Canvas lit l’aperçu redimensionné. L’extraction automatique regroupe les valeurs RGB échantillonnées avec K-means pour créer une palette de 1 à 20 couleurs. Le navigateur décode la plupart des formats. HEIC et HEIF ont un décodeur local de secours, les GIF des commandes par image.
En afficher 4 de plusAfficher moins
Calcul du contraste du texte
Le rapport compare la luminance relative de deux couleurs sRGB unies. AA exige 4,5:1 pour le texte courant et 3:1 pour le grand texte. AAA exige 7:1 et 4,5:1. Les résultats utilisent le rapport non arrondi et ne prouvent pas une conformité complète aux WCAG.
Dégradés CSS et limites d’export
Les types linéaire, radial et conique utilisent les fonctions CSS de dégradé. Les multipoints superposent des dégradés radiaux. Tailwind génère du code linéaire simplifié, le SVG remplace les types coniques et multipoints par des linéaires. Canvas rend les PNG et JPG en 1200 × 600 pixels. L’export conique nécessite sa prise en charge par Canvas. Les proportions fixes et le mélange des couleurs peuvent différer de l’aperçu CSS.
Modification et export de palettes
Sept modèles de quatre couleurs servent de départ. Les nuances peuvent être modifiées, ajoutées, retirées, verrouillées et réordonnées. L’export propose des bandes de couleurs PNG, JPG ou SVG, un fichier JSON et la copie de variables CSS. La largeur PNG et JPG va de 120 à 7680 pixels. Enregistrez un modèle nommé pour conserver la palette entre les visites.
Historique et modèles du navigateur
L’historique contient jusqu’à 20 entrées récentes dans le stockage IndexedDB partagé du studio. Les modèles nommés conservent localement les couleurs et réglages des modes. La disponibilité et la conservation des données dépendent du navigateur. Il n’y a pas de synchronisation automatique entre appareils.