ColorSmith
Muestras de color y un verdadero selector de color para el editor de Visual Studio. La muestra aparece solo donde el código realmente define un color: nunca en la palabra «red» del texto de una página ni en #123 dentro de un comentario.
Gratis · Visual Studio 2022 y 2026 · 14 idiomas de interfaz · sin telemetría
Por qué otra extensión de colores
Detección inteligente
Cada lenguaje tiene su propio analizador léxico que distingue cadenas, comentarios y código. Un nombre de color recibe muestra solo en un contexto de color (Foreground="Red", color: red), no en texto normal.
Un selector que vale la pena abrir
HEX, RGB, HSL y OKLCH, cuentagotas con lupa, tonos claros y oscuros, colores del archivo, favoritos, contraste WCAG. El resultado se escribe en la notación que ya usa el código.
Gratis y sin letra pequeña
Sin suscripción, sin período de prueba, sin avisos molestos, sin telemetría. La configuración se queda en su equipo.
Habla su idioma
Inglés, checo, alemán, español, francés, italiano, japonés, coreano, polaco, portugués (Brasil), ruso, turco y chino (simplificado y tradicional). Sigue el idioma de Visual Studio.
Características
- Muestras en el editor para colores hex, funciones CSS (
rgb(),hsl(),hwb(),oklch(),oklab()), colores con nombre, miembros de .NET (Colors.Red,Brushes.Teal,SKColors.Gold) y llamadas con argumentos literales (Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - Cuatro modos de visualización: un cuadrado antes del valor, un cuadrado en el margen, un subrayado (predeterminado) o el fondo del propio valor. Solo el primero desplaza el texto.
- Haga clic en una muestra para abrir el selector; el cambio reemplaza el valor en su sitio y conserva su notación.
- Tarjeta de color al pasar el mouse: valores en varios espacios de color, el color con nombre más cercano y el contraste sobre blanco y negro.
- Valores compuestos:
light-dark()de CSS (muestra dividida),color-mix()(resultado calculado), degradados CSS y pinceles de degradado de XAML. - Recursos:
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …}yvar(--accent)se resuelven a partir de los archivos XAML y CSS de la solución; los valores de tema claro y oscuro dan una muestra dividida. - Clases de color de Tailwind CSS:
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - Reemplazar en la solución: cambia un color en todas partes, cada lugar en su propia notación, con búsqueda opcional de «tonos similares».
- Vista previa en IntelliSense: mientras la lista de finalización tiene un color seleccionado, aparece una etiqueta con ese color encima del cursor.
Lenguajes
| Lenguaje | Qué recibe muestra |
|---|---|
| C#, Visual Basic, F# | cadenas hex, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb con literales, Color / Color32 de Unity, SkiaSharp, MAUI |
| C / C++ | cadenas hex, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | cadenas hex y CSS, nombres asignados a destinos de color (fillStyle = 'red'), new THREE.Color(), clases de Tailwind en JSX |
| Python | cadenas hex, "tab:blue" de matplotlib, QColor(…), nombres solo como argumentos de color (color="red", bg= de Tkinter) |
| XAML / AXAML | propiedades de color, setters, recursos <Color>, pinceles de degradado, referencias a recursos, AppThemeBinding de MAUI |
| CSS / SCSS / LESS | solo valores de declaraciones, variables, light-dark(), color-mix(), degradados, var() |
| HTML / Vue / SVG / Razor | atributos style, atributos de color, bloques <style> y <script>, bloques C# de Razor, clases de Tailwind |
Selector de color
Haga clic en una muestra o en Editar en la tarjeta de color. El selector se abre junto al valor e indica en qué notación lo escribirá (Color.FromArgb() en el ejemplo).
- Área de saturación/valor y barras de matiz y opacidad.
- Entrada en HEX, RGB, HSL y OKLCH; la línea de abajo muestra exactamente lo que se escribirá en el código.
- El cuentagotas toma un color de cualquier parte de la pantalla. Una lupa muestra los píxeles bajo el cursor; las flechas lo mueven un píxel y Shift+flechas, diez.
- Copiar como HEX para XAML/.NET o CSS,
rgb(),hsl(),oklch(),Color.FromArgb,Colorde Unity o0xAARRGGBB. - Tonos claros y oscuros del color actual, colores en este archivo, favoritos (botón de estrella) y colores recientes.
- Contraste (WCAG) del color como texto sobre el fondo del editor, blanco o negro, con marcas AA / AAA / Grande.
- El color con nombre más cercano (≈ DodgerBlue); haga clic en él para usar el nombre exacto.
- Enter aplica y Esc cancela; hacer clic fuera del selector también aplica. Las secciones se pueden contraer y el selector lo recuerda. El botón ? abre esta página.
Los colores compuestos y de recursos son de solo lectura en el selector: edite los colores que contienen o el recurso donde está definido.
Tarjeta de color
Pase el mouse sobre un color para ver su tarjeta. En los modos subrayado y fondo la tarjeta también tiene botones: Editar abre el selector, Copiar copia el valor y Reemplazar color en la solución… inicia un reemplazo en toda la solución. Alt+clic en una muestra copia el valor sin abrir nada.
light-dark(): ambos valores y una muestra dividida.
Cómo funciona la detección
ColorSmith no busca en el texto con una gran expresión regular. Un analizador léxico del lenguaje divide cada archivo en cadenas, comentarios y código, y un valor se considera color solo si el lugar no deja dudas. Ante la duda, no hay muestra.
| Recibe muestra | Queda sin muestra |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (hex corto en comentarios) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (valor desconocido) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" en Python | status = "red", (255, 0, 0) |
a { color: navy } | selectores #main, .red, font-family: Red Hat |
Hex de 8 dígitos
#XXXXXXXX lleva el alfa al principio en .NET, XAML y Qt (#AARRGGBB) y al final en CSS y JavaScript (#RRGGBBAA). Para las cadenas de C#, VB y C++ el orden es configurable, porque Unity y el código orientado a la web ponen el alfa al final.
Reemplazar en la solución
Ábralo con la bombilla (Ctrl+.) sobre un color o con el botón de la tarjeta de color. Busca el color en todas sus notaciones en la carpeta de la solución (sin bin, obj ni node_modules), le permite elegir los lugares y reescribe cada uno en su propia notación. Los archivos cambiados se abren sin guardar, con un paso de deshacer por archivo, para que pueda revisarlo todo antes de guardar.
Configuración
Herramientas → Opciones → SmithWorks → ColorSmith. Cada opción tiene una descripción justo debajo.
| Opción | Predeterminado |
|---|---|
| Mostrar muestras de color | activado |
| Modo de visualización | Subrayado |
| Tamaño de la muestra | Mediano |
| Vista previa de color en IntelliSense | activado |
| Reemplazar en la solución | activado |
| Colores hex en comentarios | activado |
| Clases de Tailwind CSS | activado |
| Colores de recursos | activado |
| Hex de 8 dígitos en C#, VB y C++ | #AARRGGBB |
| Tamaño máximo de archivo (KB) | 4096 |
| Lenguajes | todos activados |
La configuración se guarda en %LocalAppData%\ColorSmith, junto con los colores favoritos y recientes del selector.
Preguntas frecuentes
¿Por qué mi color no tiene muestra?
Lo más probable es que el lugar sea ambiguo: un nombre fuera de un contexto de color, una llamada con un argumento variable, un hex corto en un comentario o un valor construido con var()/calc(). Compruebe también que el lenguaje esté activado en la configuración y que el archivo no supere el límite de tamaño.
¿Pueden aparecer los colores como iconos dentro de la lista de IntelliSense?
No. Visual Studio no permite que una extensión cambie los iconos de los elementos de finalización de otros proveedores. En su lugar, ColorSmith muestra una etiqueta de color encima del cursor.
¿La muestra desplaza mi código?
Solo en el modo «cuadrado antes del valor». Los modos margen, subrayado y fondo nunca mueven el texto.
¿Puedo editar el color de un recurso desde donde se usa?
Todavía no. La tarjeta muestra el valor de cada tema con su archivo y línea; cámbielo en la definición.
¿ColorSmith envía algún dato?
No. No hay telemetría ni acceso a la red.
¿Dónde informo de un problema o sugiero una función?
Abra una incidencia en el repositorio Feedback de GitHub: hay formularios para errores e ideas. También puede usar la pestaña Q&A en Marketplace.
Historial de cambios
1.0.2
- Comentarios: un botón en la barra de título del selector y un vínculo «Enviar comentarios» en la configuración abren el repositorio Feedback de GitHub.
- La configuración se ha movido a Herramientas → Opciones → SmithWorks → ColorSmith, junto a las demás extensiones SmithWorks.
1.0.1
- El botón Configuración (engranaje) de la barra de título del selector abre Herramientas → Opciones → ColorSmith.
- Una solicitud única y fácil de descartar para valorar la extensión tras un uso prolongado, y un vínculo «Valorar en Marketplace» en la configuración.
1.0.0
- Primera versión pública.
- Botón de ayuda en el selector y vínculo Documentación en la configuración.