Extraire de l'image
Déposer l'image ici, coller (Ctrl+V), ou
Couleurs récentes
Color Picker Hex & Image Extractor
Un week-end, j'ai passé beaucoup trop de temps à essayer de faire correspondre un violet du logo d'un client dans Figma, pour finalement réaliser que le code hexadécimal que j'avais copié-collé était légèrement erroné parce que je l'avais obtenu à partir d'une capture d'écran JPEG compressée au lieu du fichier d'origine. La différence entre #895BF5 et #8B5CF6 est pratiquement invisible à l'écran, à moins que vous ne les placiez côte à côte sur un fond blanc, et c'est alors incroyablement évident et ennuyeux. C'est ce genre de choses qui m'a poussé à vouloir un sélecteur de couleurs qui fasse tout en un seul endroit - saisir la couleur, la voir dans tous les formats, vérifier son apparence par rapport à un texte, et c'est tout. Utilisez l'outil ci-dessus, choisissez votre couleur ou insérez une image, et vous obtenez HEX, RGB, HSL, HSV et CMYK en un seul coup d'œil.
Ce qu'il y a ici
Le sélecteur principal vous donne un pavé de saturation et de luminosité avec un curseur de teinte en dessous, ce qui est assez standard, mais la partie que j'utilise le plus est l'extraction d'image. Vous pouvez déposer une capture d'écran ou la coller dans le presse-papiers et cliquer n'importe où pour obtenir les couleurs exactes. C'est bien plus fiable que de regarder dans l'échantillonneur de couleurs de Photoshop, surtout lorsque vous travaillez à partir d'une photo de référence ou d'un document de marque que quelqu'un vous a envoyé au format PNG. La bande des couleurs récentes garde vos dernières sélections visibles, ce qui semble être une petite chose mais qui permet d'éviter un nombre absurde d'allers-retours lorsque vous essayez de créer une palette à partir de zéro.
Chaque couleur est restituée dans cinq formats : HEX, RGB, HSL, HSV et CMYK. Il existe un bouton “Copier tous les formats” si vous voulez tout avoir dans votre presse-papiers en une seule fois, ce qui est vraiment utile lorsque vous documentez un guide de style et que vous devez coller toutes les valeurs dans une feuille de calcul ou une table de Notion. L'année dernière, je tenais une feuille Google avec les spécifications des couleurs pour une quarantaine de sites différents et copier-coller chaque format individuellement à partir du sélecteur de couleurs DevTools de Chrome me rendait fou, c'était tellement fastidieux pour quelque chose qui ne devrait prendre qu'une seconde.
La section des harmonies de couleurs génère des palettes complémentaires, analogues, triadiques, complémentaires divisées, tétradiques et carrées à partir de la couleur que vous avez choisie. Chaque harmonie dispose d'un bouton “Copier CSS” qui vous donne l'ensemble des propriétés CSS personnalisées. Honnêtement, les modes triadique et tétradique sont ceux que j'utilise lorsque j'ai besoin d'une palette de couleurs rapidement - le mode complémentaire est trop évident pour la plupart des projets, et le mode analogique peut sembler un peu plat à moins que vous n'optiez délibérément pour un look monochrome-adjacent. Cela dit, si vous construisez quelque chose qui doit être calme ou cohérent, le mode analogique est sous-estimé et fonctionne mieux que ce que l'on croit.
Il y a également une bande de teintes et de nuances qui génère des variations plus claires et plus foncées de la couleur sélectionnée par étapes égales, ce qui est le genre de chose que Tailwind CSS fait automatiquement avec ses échelles de couleurs, mais que vous devriez autrement calculer manuellement en ajustant la valeur de clarté dans HSL. L'aperçu du contraste en haut montre votre couleur avec un texte foncé et un texte clair superposés afin que vous puissiez voir si elle passera les contrôles d'accessibilité - il ne s'agit pas d'un calculateur de ratio de contraste WCAG complet, donc si vous avez besoin de ratios exacts pour la conformité, vous aurez besoin d'un vérificateur de contraste dédié pour cela. Mais pour une vérification rapide lors du choix des couleurs de la marque ou des accents de l'interface utilisateur, il fait l'affaire.
Une chose que je voudrais mentionner à propos des valeurs CMJN : elles sont calculées à partir de RVB, ce qui signifie qu'il s'agit d'approximations. Si vous envoyez quelque chose à un imprimeur commercial - cartes de visite, emballages, etc. - vous devez travailler avec un profil de couleur CMJN approprié dans InDesign ou Illustrator, et non pas convertir les couleurs de l'écran. La sortie CMJN permet de se faire une idée approximative de l'aspect d'une couleur à l'impression, et elle est suffisamment proche pour les maquettes numériques, mais elle ne correspondra pas à un nuancier Pantone. Cela vaut la peine de le savoir.
FAQ
Quelle est la différence entre les formats de couleur HEX, RGB et HSL ?
Il s'agit de trois façons de décrire exactement la même couleur. HEX est un code à six caractères utilisé dans les CSS et les outils de conception - #895BF5, par exemple. RVB décompose la couleur en valeurs rouges, vertes et bleues comprises entre 0 et 255, ce qui correspond à la manière dont les écrans restituent les couleurs. HSL décrit la couleur en termes de teinte (position de la roue chromatique, 0-360°), de saturation (degré de vivacité) et de luminosité (degré de clarté ou d'obscurité). La plupart des développeurs web utilisent par défaut le format HEX parce qu'il est compact, mais le format HSL est sans doute plus intuitif si vous essayez d'ajuster une couleur à la main - augmenter la luminosité de 10% est beaucoup plus facile à raisonner que de deviner le canal RVB à modifier.
Puis-je extraire les couleurs exactes d'une image téléchargée ?
Oui - déposez une image dans la zone d'extraction ou collez-en une depuis votre presse-papiers avec Ctrl+V, puis cliquez n'importe où sur l'image pour saisir la couleur à ce pixel. Gardez à l'esprit que si l'image est un JPEG compressé, les couleurs que vous sélectionnez peuvent être légèrement différentes de l'original en raison d'artefacts de compression. Ce phénomène est particulièrement visible avec les dégradés et les couleurs de marque unies qui ont été soumises à la compression des médias sociaux. Pour obtenir les résultats les plus précis, utilisez un fichier PNG ou un fichier source non compressé.
Les valeurs CMJN sont-elles suffisamment précises pour l'impression ?
Il s'agit d'approximations. Les valeurs CMJN sont converties mathématiquement à partir de RVB, qui est un modèle de couleur d'écran - il ne tient pas compte du comportement de l'encre, du papier ou du profil de couleur spécifique utilisé par votre imprimante. Pour une référence approximative ou une maquette numérique, elles conviennent parfaitement. Mais si vous envoyez des fichiers à un imprimeur commercial pour des cartes de visite ou des emballages, vous devez travailler dans un profil CMJN dédié dans InDesign ou Illustrator, idéalement avec des références Pantone. L'écart entre le CMJN converti en RVB et l'impression réelle peut être étonnamment important, en particulier avec les violets brillants et les verts saturés qui ne se reproduisent tout simplement pas bien en CMJN.
Comment fonctionnent les harmonies de couleurs ?
Les harmonies de couleurs sont basées sur les relations géométriques du cercle chromatique. La complémentaire associe deux couleurs directement opposées l'une à l'autre (comme le violet et le jaune-vert), l'analogique regroupe les couleurs voisines sur la roue, et la triadique place trois couleurs à 120° l'une de l'autre. Les calculs sont effectués en LSH - la couleur complémentaire ajoute simplement 180° à la teinte, la couleur triadique ajoute 120° et 240°, et ainsi de suite. Il ne s'agit pas de regroupements arbitraires, mais de principes de théorie des couleurs utilisés en peinture et en design depuis des siècles. Le bouton “Copier CSS” exporte l'harmonie complète sous forme de propriétés personnalisées afin que vous puissiez les insérer directement dans une feuille de style.
L'aperçu des contrastes vérifie-t-il la conformité aux normes d'accessibilité WCAG ?
Pas entièrement. L'aperçu montre votre couleur avec du texte foncé et clair superposé afin que vous puissiez voir d'un coup d'œil s'il est lisible, mais il ne calcule pas un rapport de contraste spécifique. Les WCAG 2.1 exigent un rapport minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille. Si vous avez besoin de vérifier ces chiffres exacts pour vous conformer aux règles d'accessibilité, un vérificateur de rapport de contraste spécialisé vous donnera les valeurs précises et un résultat de réussite ou d'échec. L'aperçu présenté ici est davantage une vérification rapide de la cohérence pendant que vous choisissez les couleurs, et ne remplace pas un audit en bonne et due forme.