Outils couleur

Sélecteur : le grand carré est une carte saturation-valeur à la teinte courante — de gauche à droite la saturation augmente, de haut en bas la luminosité diminue. Cliquez n’importe où dessus pour choisir une couleur. La fine barre verticale à droite est le curseur de teinte (0° à 360°) — faites-le glisser pour changer la teinte de base, le carré se redessine en conséquence. Le côté droit affiche la couleur choisie aux formats HEX, RGB et HSL — cliquez sur une valeur pour la copier.

Palette : le sélecteur de couleur à gauche et la zone de saisie à droite stockent la même couleur de base — ils sont synchronisés dans les deux sens (choisissez une couleur ou saisissez une valeur hexadécimale, les deux se mettent à jour). Les cinq lignes de palette ci-dessous sont toutes dérivées de cette couleur de base par rotation de sa teinte sur le cercle chromatique : complémentaire (teinte +180°, contraste maximal), triadique (+120° / +240°, triade équilibrée), tétradique (+90° / +180° / +270°, quatre couleurs en rectangle), analogue (-30° / base / +30° / +60°, voisines harmonieuses) et complémentaire scindée (+150° / +210°, plus douce que la complémentaire pure). Le premier échantillon de chaque ligne est toujours la couleur de base elle-même, et les autres sont ses variantes à teinte décalée.

Convertir : saisissez une couleur valide — HEX (#3b82f6), fonction CSS (rgb(59,130,246) / hsl(217,90%,60%)) ou couleur nommée (dodgerblue) — et obtenez instantanément la conversion dans tous les formats principaux. La liste des formats permet d’indiquer au lecteur le format à utiliser si la détection automatique se trompe. La sortie affiche HEX, RGB (0-255), HSL (degrés, %, %), HSV et CMJN. Cliquez sur une valeur pour la copier.

Daltonisme : chargez une image et choisissez un type de déficience de la vision des couleurs à simuler. L’outil applique une transformation matricielle de la réponse des cônes à chaque pixel, en recalculant les valeurs RGB pour approcher la façon dont les personnes atteintes de différentes formes de daltonisme perçoivent l’image. Le canevas de gauche montre l’original, celui de droite la vue simulée. La liste déroulante couvre trois types de dichromatopsie (absence d’un pigment de cône : protanopie, deutéranopie, tritanopie), l’achromatopsie complète (absence de vision des couleurs) et trois types de trichromatopsie anomale (réponse affaiblie des cônes). Les images de faible résolution se chargent plus vite.

Dégradé : il s’agit d’un générateur visuel de dégradé CSS. Choisissez un dégradé linéaire (directionnel) ou radial (du centre vers l’extérieur), réglez l’angle (0° = de bas en haut, 90° = de gauche à droite) et définissez les arrêts de couleur. Chaque arrêt possède un sélecteur de couleur et est réparti uniformément (0 %, 50 %, 100 % pour trois arrêts). Cliquez sur + Arrêt pour ajouter des points de couleur intermédiaires afin de créer des dégradés plus complexes. L’aperçu se met à jour en direct, et le CSS généré est prêt à être copié ci-dessous.

Contraste : calcule le rapport de contraste WCAG 2.1 entre le texte de premier plan et la couleur de fond, à partir de la luminance relative calculée sur les valeurs sRGB (corrigées du gamma). Le rapport va de 1 :1 (couleurs identiques) à 21 :1 (noir sur blanc). Les résultats indiquent réussite ou échec à trois niveaux de conformité : AA texte normal (rapport ≥ 4,5 :1), AAA texte de grande taille (rapport ≥ 4,5 :1 pour un texte ≥ 18 pt ou gras ≥ 14 pt) et AAA texte normal (rapport ≥ 7 :1). L’aperçu du texte d’exemple se met à jour en temps réel lorsque vous modifiez les couleurs.

Extraction : chargez une image quelconque et l’outil identifie sa palette de couleurs dominantes par quantification des couleurs. L’image est réduite à 100×100 px, puis chaque pixel est rangé dans un histogramme de 4 bits par canal (16 niveaux par R/G/B, soit 4096 cases). Les pixels transparents sont ignorés. Les cases les plus fréquentes sont triées par nombre de pixels, et la couleur centrale de chaque case devient un échantillon. Chaque échantillon affiche sa valeur HEX et le pourcentage de pixels de l’image qu’il représente. Réglez le curseur du nombre (2-12) pour contrôler le nombre de couleurs dominantes extraites.

Mélangeur : mélange deux couleurs dans l’espace colorimétrique RGB par interpolation linéaire. Le curseur de proportion détermine le mélange : 0 % correspond à la Couleur 1 pure, 100 % à la Couleur 2 pure, et 50 % à un mélange égal. Chaque canal R, G, B est interpolé indépendamment (par ex. rouge + bleu à 50 % donne du violet). L’aperçu du résultat et les valeurs HEX/RGB se mettent à jour en direct lorsque vous déplacez le curseur ou modifiez l’une des couleurs.

Température : convertit une température de couleur du corps noir en kelvins en couleur visible correspondante, à l’aide de l’algorithme d’approximation de Tanner Helland. Les basses températures (1000-3000 K) produisent des tons orangés chauds, comme la lumière de bougie et les ampoules à incandescence ; les températures moyennes (4000-6500 K) donnent un blanc neutre à la lumière du jour ; les températures élevées (8000-40000 K) virent au bleu froid, comme un ciel couvert ou une eau profonde. L’étiquette ci-dessous identifie la source lumineuse réelle la plus proche pour chaque température.

Nommées : parcourez une collection combinée de 80 couleurs traditionnelles chinoises (胭脂, 朱砂, 黛蓝, etc. — des noms tirés de la littérature, de la peinture et des traditions de teinture chinoises classiques) et de plus de 140 couleurs nommées CSS (la palette web standard). Utilisez la zone de recherche pour filtrer par nom ou valeur HEX, ou changez de catégorie avec la liste déroulante. Cliquez sur une pastille de couleur pour afficher un grand aperçu avec le nom et le code HEX — cliquez sur le code pour le copier.