ColorSmith
Amostras de cor e um seletor de cores de verdade para o editor do Visual Studio. A amostra aparece só onde o código realmente define uma cor — nunca na palavra “red” no texto de uma página nem em #123 dentro de um comentário.
Gratuito · Visual Studio 2022 e 2026 · 14 idiomas de interface · sem telemetria
Por que mais uma extensão de cores
Detecção inteligente
Cada linguagem tem seu próprio analisador léxico, que distingue cadeias, comentários e código. Um nome de cor recebe amostra só em um contexto de cor (Foreground="Red", color: red), não em texto comum.
Um seletor que vale a pena abrir
HEX, RGB, HSL e OKLCH, conta-gotas com lupa, tons claros e escuros, cores do arquivo, favoritos, contraste WCAG. O resultado é gravado na notação que o código já usa.
Gratuito, sem pegadinhas
Sem assinatura, sem período de avaliação, sem avisos insistentes, sem telemetria. As configurações ficam no seu computador.
Fala o seu idioma
Inglês, tcheco, alemão, espanhol, francês, italiano, japonês, coreano, polonês, português (Brasil), russo, turco e chinês (simplificado e tradicional). Segue o idioma do Visual Studio.
Recursos
- Amostras no editor para cores hex, funções CSS (
rgb(),hsl(),hwb(),oklch(),oklab()), cores nomeadas, membros do .NET (Colors.Red,Brushes.Teal,SKColors.Gold) e chamadas com argumentos literais (Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - Quatro modos de exibição: um quadrado antes do valor, um quadrado na margem, um sublinhado (padrão) ou o fundo do próprio valor. Só o primeiro desloca o texto.
- Clique em uma amostra para abrir o seletor; a edição substitui o valor no lugar, mantendo a notação.
- Cartão de cor ao passar o mouse: valores em vários espaços de cor, a cor nomeada mais próxima e o contraste no branco e no preto.
- Valores compostos:
light-dark()do CSS (amostra dividida),color-mix()(resultado calculado), gradientes CSS e pincéis de gradiente do XAML. - Recursos:
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …}evar(--accent)são resolvidos a partir dos arquivos XAML e CSS da solução; valores de tema claro e escuro geram uma amostra dividida. - Classes de cor do Tailwind CSS:
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - Substituir na solução: troque uma cor em todos os lugares, cada um na sua própria notação, com busca opcional por “tons semelhantes”.
- Visualização no IntelliSense: enquanto a lista de preenchimento tem uma cor selecionada, um marcador com essa cor aparece acima do cursor.
Linguagens
| Linguagem | O que recebe amostra |
|---|---|
| C#, Visual Basic, F# | cadeias hex, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb com literais, Color / Color32 do Unity, SkiaSharp, MAUI |
| C / C++ | cadeias hex, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | cadeias hex e CSS, nomes atribuídos a destinos de cor (fillStyle = 'red'), new THREE.Color(), classes do Tailwind em JSX |
| Python | cadeias hex, "tab:blue" do matplotlib, QColor(…), nomes só como argumentos de cor (color="red", bg= do Tkinter) |
| XAML / AXAML | propriedades de cor, setters, recursos <Color>, pincéis de gradiente, referências a recursos, AppThemeBinding do MAUI |
| CSS / SCSS / LESS | só valores de declarações, variáveis, light-dark(), color-mix(), gradientes, var() |
| HTML / Vue / SVG / Razor | atributos style, atributos de cor, blocos <style> e <script>, blocos C# do Razor, classes do Tailwind |
Seletor de cores
Clique em uma amostra ou em Editar no cartão de cor. O seletor abre ao lado do valor e mostra em qual notação vai gravá-lo (Color.FromArgb() no exemplo).
- Área de saturação/valor e faixas de matiz e opacidade.
- Entrada em HEX, RGB, HSL e OKLCH; a linha abaixo mostra exatamente o que será escrito no código.
- O conta-gotas captura uma cor em qualquer ponto da tela. Uma lupa mostra os pixels sob o cursor; as setas o movem 1 pixel, e Shift+setas, 10.
- Copiar como HEX para XAML/.NET ou CSS,
rgb(),hsl(),oklch(),Color.FromArgb,Colordo Unity ou0xAARRGGBB. - Tons claros e escuros da cor atual, cores neste arquivo, favoritos (botão de estrela) e cores recentes.
- Contraste (WCAG) da cor como texto no fundo do editor, no branco ou no preto, com marcas AA / AAA / Grande.
- A cor nomeada mais próxima (≈ DodgerBlue); clique nela para usar o nome exato.
- Enter aplica, Esc cancela; clicar fora do seletor também aplica. As seções podem ser recolhidas, e o seletor se lembra disso. O botão ? abre esta página.
Cores compostas e de recursos são somente leitura no seletor: edite as cores dentro delas ou o recurso na sua definição.
Cartão de cor
Passe o mouse sobre uma cor para ver o cartão. Nos modos sublinhado e fundo, o cartão também tem botões: Editar abre o seletor, Copiar copia o valor e Substituir cor na solução… inicia uma substituição em toda a solução. Alt+clique em uma amostra copia o valor sem abrir nada.
light-dark(): os dois valores e uma amostra dividida.
Como a detecção funciona
O ColorSmith não vasculha o texto com uma única expressão regular gigante. Cada arquivo é dividido em cadeias, comentários e código pelo analisador léxico da sua linguagem, e um valor só vira cor se o contexto não deixar dúvidas. Na dúvida, não há amostra.
| Recebe amostra | Fica sem amostra |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (hex curto em comentários) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (valor desconhecido) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" em Python | status = "red", (255, 0, 0) |
a { color: navy } | seletores #main, .red, font-family: Red Hat |
Hex de 8 dígitos
#XXXXXXXX tem o alfa primeiro no .NET, XAML e Qt (#AARRGGBB) e por último em CSS e JavaScript (#RRGGBBAA). Para cadeias em C#, VB e C++ a ordem é uma configuração, porque o Unity e o código voltado para a web usam o alfa por último.
Substituir na solução
Abra pela lâmpada (Ctrl+.) sobre uma cor ou pelo botão no cartão de cor. A cor é procurada em todas as notações na pasta da solução (sem bin, obj e node_modules); você escolhe os locais, e cada um é reescrito na sua própria notação. Os arquivos alterados abrem sem salvar, com uma etapa de desfazer por arquivo, para você revisar tudo antes de salvar.
Configurações
Ferramentas → Opções → SmithWorks → ColorSmith. Cada opção tem uma descrição logo abaixo.
| Opção | Padrão |
|---|---|
| Mostrar amostras de cor | ativado |
| Modo de exibição | Sublinhado |
| Tamanho da amostra | Médio |
| Visualização de cor no IntelliSense | ativado |
| Substituir na solução | ativado |
| Cores hex em comentários | ativado |
| Classes do Tailwind CSS | ativado |
| Cores de recursos | ativado |
| Hex de 8 dígitos em C#, VB e C++ | #AARRGGBB |
| Tamanho máximo do arquivo (KB) | 4096 |
| Linguagens | todas ativadas |
As configurações ficam em %LocalAppData%\ColorSmith, junto com as cores favoritas e recentes do seletor.
Perguntas frequentes
Por que minha cor não tem amostra?
Provavelmente o contexto é ambíguo: um nome fora de um contexto de cor, uma chamada com argumento variável, um hex curto em um comentário ou um valor montado com var()/calc(). Verifique também se a linguagem está ativada nas configurações e se o arquivo está abaixo do limite de tamanho.
As cores podem aparecer como ícones na lista do IntelliSense?
Não. O Visual Studio não permite que uma extensão altere os ícones dos itens de preenchimento de outros provedores. Em vez disso, o ColorSmith mostra um marcador de cor acima do cursor.
A amostra desloca o meu código?
Só no modo “quadrado antes do valor”. Os modos margem, sublinhado e fundo nunca movem o texto.
Posso editar a cor de um recurso onde ele é usado?
Ainda não. O cartão mostra o valor de cada tema com o arquivo e a linha; altere-o na definição.
O ColorSmith envia algum dado?
Não. Não há telemetria nem acesso à rede.
Onde relato um problema ou sugiro um recurso?
Abra um issue no repositório Feedback no GitHub — há formulários para bugs e ideias. Você também pode usar a guia Q&A no Marketplace.
Histórico de alterações
1.0.2
- Comentários: um botão na barra de título do seletor e um link “Enviar comentários” nas configurações abrem o repositório Feedback no GitHub.
- As configurações foram movidas para Ferramentas → Opções → SmithWorks → ColorSmith, junto das outras extensões SmithWorks.
1.0.1
- O botão Configurações (engrenagem) na barra de título do seletor abre Ferramentas → Opções → ColorSmith.
- Um pedido único, fácil de dispensar, para avaliar a extensão após uso prolongado, e um link “Avaliar no Marketplace” nas configurações.
1.0.0
- Primeira versão pública.
- Botão de ajuda no seletor e link Documentação nas configurações.