ColorSmith
Des aperçus de couleur et un vrai sélecteur de couleur pour l’éditeur de Visual Studio. Un aperçu n’apparaît que là où le code définit réellement une couleur — jamais sur le mot « red » dans le texte d’une page ni sur #123 dans un commentaire.
Gratuit · Visual Studio 2022 et 2026 · 14 langues d’interface · aucune télémétrie
Pourquoi une extension de couleurs de plus
Détection intelligente
Chaque langage a son propre analyseur lexical : chaînes, commentaires et code sont distingués. Un nom de couleur n’obtient un aperçu que dans un contexte de couleur (Foreground="Red", color: red), pas dans du texte ordinaire.
Un sélecteur qui vaut le détour
HEX, RGB, HSL et OKLCH, pipette avec loupe, teintes claires et foncées, couleurs du fichier, favoris, contraste WCAG. Le résultat est réécrit dans la notation que le code utilise déjà.
Gratuit, sans contrepartie
Ni abonnement, ni période d’essai, ni écrans de rappel, ni télémétrie. Les paramètres restent sur votre machine.
Parle votre langue
Anglais, tchèque, allemand, espagnol, français, italien, japonais, coréen, polonais, portugais (Brésil), russe, turc, chinois (simplifié et traditionnel). Suit la langue de Visual Studio.
Fonctionnalités
- Aperçus dans l’éditeur pour les couleurs hex, les fonctions CSS (
rgb(),hsl(),hwb(),oklch(),oklab()), les couleurs nommées, les membres .NET (Colors.Red,Brushes.Teal,SKColors.Gold) et les appels avec arguments littéraux (Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - Quatre modes d’affichage : carré avant la valeur, carré dans la marge, soulignement (par défaut) ou arrière-plan de la valeur elle-même. Seul le premier décale le texte.
- Cliquez sur un aperçu pour ouvrir le sélecteur ; la modification remplace la valeur sur place en conservant sa notation.
- Carte de couleur au survol : valeurs dans plusieurs espaces colorimétriques, couleur nommée la plus proche et contraste sur blanc et sur noir.
- Valeurs composées : CSS
light-dark()(aperçu partagé),color-mix()(résultat calculé), dégradés CSS et pinceaux de dégradé XAML. - Ressources :
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …}etvar(--accent)sont résolus à partir des fichiers XAML et CSS de la solution ; les valeurs des thèmes clair et sombre donnent un aperçu partagé. - Classes de couleur Tailwind CSS :
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - Remplacer dans la solution : changez une couleur partout, chaque emplacement dans sa propre notation, avec en option la recherche des « nuances proches ».
- Aperçu de couleur dans IntelliSense : lorsqu’une couleur est sélectionnée dans la liste de saisie semi-automatique, une pastille de cette couleur s’affiche au-dessus du curseur.
Langages
| Langage | Ce qui obtient un aperçu |
|---|---|
| C#, Visual Basic, F# | chaînes hex, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb avec des littéraux, Unity Color / Color32, SkiaSharp, MAUI |
| C / C++ | chaînes hex, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | chaînes hex et CSS, noms affectés à des cibles de couleur (fillStyle = 'red'), new THREE.Color(), classes Tailwind dans JSX |
| Python | chaînes hex, matplotlib "tab:blue", QColor(…), noms uniquement comme arguments de couleur (color="red", Tkinter bg=) |
| XAML / AXAML | propriétés de couleur, setters, ressources <Color>, pinceaux de dégradé, références de ressources, MAUI AppThemeBinding |
| CSS / SCSS / LESS | valeurs de déclaration uniquement, variables, light-dark(), color-mix(), dégradés, var() |
| HTML / Vue / SVG / Razor | attributs style, attributs de couleur, blocs <style> et <script>, blocs C# Razor, classes Tailwind |
Sélecteur de couleur
Cliquez sur un aperçu ou sur Modifier dans la carte de couleur. Le sélecteur s’ouvre à côté de la valeur et indique dans quelle notation il la réécrira (Color.FromArgb() dans l’exemple).
- Zone saturation/luminosité, barres de teinte et d’alpha.
- Saisie en HEX, RGB, HSL et OKLCH ; la ligne du dessous montre exactement ce qui sera écrit dans le code.
- La pipette prélève une couleur n’importe où à l’écran. Une loupe montre les pixels sous le curseur ; les flèches le déplacent d’un pixel, Shift+flèches de dix.
- Copier en tant que HEX pour XAML/.NET ou CSS,
rgb(),hsl(),oklch(),Color.FromArgb, UnityColorou0xAARRGGBB. - Teintes claires et foncées de la couleur actuelle, couleurs dans ce fichier, favoris (bouton étoile) et couleurs récentes.
- Contraste (WCAG) de la couleur utilisée comme texte sur l’arrière-plan de l’éditeur, sur blanc ou sur noir, avec les mentions AA / AAA / Grand.
- La couleur nommée la plus proche (≈ DodgerBlue) ; cliquez dessus pour utiliser le nom exact.
- Enter applique, Esc annule ; un clic en dehors du sélecteur applique aussi. Les sections se replient, et le sélecteur s’en souvient. Le bouton ? ouvre cette page.
Les couleurs composées et les couleurs de ressources sont en lecture seule dans le sélecteur : modifiez les couleurs qu’elles contiennent, ou la ressource là où elle est définie.
Carte de couleur
Survolez une couleur pour afficher sa carte. En modes soulignement et arrière-plan, la carte comporte aussi des boutons : Modifier ouvre le sélecteur, Copier copie la valeur, Remplacer la couleur dans la solution… lance un remplacement dans toute la solution. Alt+clic sur un aperçu copie la valeur sans rien ouvrir.
light-dark() : les deux valeurs et un aperçu partagé.
Fonctionnement de la détection
ColorSmith ne parcourt pas le texte avec une seule grande expression régulière. Chaque fichier est découpé en chaînes, commentaires et code par l’analyseur lexical de son langage, et une valeur ne devient une couleur que si l’emplacement ne laisse aucun doute. Dans le doute, pas d’aperçu.
| Obtient un aperçu | Reste tel quel |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (hex court dans les commentaires) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (valeur inconnue) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" en Python | status = "red", (255, 0, 0) |
a { color: navy } | sélecteurs #main, .red, font-family: Red Hat |
Hex à 8 chiffres
#XXXXXXXX signifie alpha en premier en .NET, XAML et Qt (#AARRGGBB) et alpha en dernier en CSS et JavaScript (#RRGGBBAA). Pour les chaînes C#, VB et C++, l’ordre est un paramètre, car Unity et le code orienté web placent l’alpha en dernier.
Remplacer dans la solution
Ouvrez-le avec l’ampoule (Ctrl+.) sur une couleur ou avec le bouton de la carte de couleur. Il trouve la couleur dans toutes ses notations dans le dossier de la solution (hors bin, obj et node_modules), vous laisse choisir les emplacements et réécrit chacun dans sa propre notation. Les fichiers modifiés s’ouvrent sans être enregistrés, avec une étape d’annulation par fichier, pour que vous puissiez tout vérifier avant d’enregistrer.
Paramètres
Outils → Options → SmithWorks → ColorSmith. Chaque option est décrite juste en dessous.
| Option | Par défaut |
|---|---|
| Afficher les aperçus de couleur | activé |
| Mode d’affichage | Soulignement |
| Taille de l'aperçu | Moyen |
| Aperçu de couleur dans IntelliSense | activé |
| Remplacer dans la solution | activé |
| Couleurs hex dans les commentaires | activé |
| Classes Tailwind CSS | activé |
| Couleurs des ressources | activé |
| Hex à 8 chiffres en C#, VB et C++ | #AARRGGBB |
| Taille de fichier maximale (Ko) | 4096 |
| Langages | tous activés |
Les paramètres sont stockés dans %LocalAppData%\ColorSmith, avec les favoris et les couleurs récentes du sélecteur.
FAQ
Pourquoi ma couleur n’a-t-elle pas d’aperçu ?
Le plus souvent, l’emplacement est ambigu : un nom hors d’un contexte de couleur, un appel avec un argument variable, un hex court dans un commentaire ou une valeur construite avec var()/calc(). Vérifiez aussi que le langage est activé dans les paramètres et que le fichier ne dépasse pas la taille limite.
Les couleurs peuvent-elles apparaître sous forme d’icônes dans la liste IntelliSense ?
Non. Visual Studio ne permet pas à une extension de modifier les icônes des éléments de saisie semi-automatique d’autres fournisseurs. ColorSmith affiche à la place une pastille de couleur au-dessus du curseur.
L’aperçu décale-t-il mon code ?
Uniquement en mode « carré avant la valeur ». Les modes marge, soulignement et arrière-plan ne déplacent jamais le texte.
Puis-je modifier une couleur de ressource là où elle est utilisée ?
Pas encore. La carte montre la valeur de chaque thème avec son fichier et sa ligne ; modifiez-la là où elle est définie.
ColorSmith envoie-t-il des données ?
Non. Aucune télémétrie, aucun accès réseau.
Où signaler un problème ou proposer une fonctionnalité ?
Ouvrez un ticket dans le dépôt Feedback sur GitHub — il y a des formulaires pour les bogues et les idées. Vous pouvez aussi utiliser l’onglet Q&A sur le Marketplace.
Historique des versions
1.0.2
- Commentaires : un bouton dans la barre de titre du sélecteur et un lien « Envoyer des commentaires » dans les paramètres ouvrent le dépôt Feedback sur GitHub.
- Les paramètres se trouvent désormais dans Outils → Options → SmithWorks → ColorSmith, à côté des autres extensions SmithWorks.
1.0.1
- Le bouton Paramètres (roue dentée) dans la barre de titre du sélecteur ouvre Outils → Options → ColorSmith.
- Une demande unique et facile à ignorer d’évaluer l’extension après une longue utilisation, et un lien « Évaluer sur le Marketplace » dans les paramètres.
1.0.0
- Première version publique.
- Bouton d’aide dans le sélecteur et lien Documentation dans les paramètres.