ColorSmith

Visual Studio düzenleyicisi için renk örnekleri ve gerçek bir renk seçici. Örnek yalnızca kodun gerçekten bir renk tanımladığı yerde görünür; sayfa metnindeki “red” sözcüğünde ya da yorumdaki #123 üzerinde asla görünmez.

Marketplace'ten edinin Ne yapar

Ücretsiz · Visual Studio 2022 ve 2026 · 14 arayüz dili · telemetri yok

Neden bir renk uzantısı daha

Akıllı algılama

Her dilin kendi sözcük çözümleyicisi vardır; dizeler, yorumlar ve kod birbirinden ayrılır. Bir renk adı yalnızca renk bağlamında (Foreground="Red", color: red) örnek alır, düz metinde almaz.

Açmaya değer bir seçici

HEX, RGB, HSL ve OKLCH, büyüteçli damlalık, açık ve koyu tonlar, dosyadaki renkler, sık kullanılanlar, WCAG kontrastı. Sonuç, kodun zaten kullandığı gösterimle geri yazılır.

Ücretsiz, koşulsuz

Abonelik yok, deneme süresi yok, rahatsız edici uyarılar yok, telemetri yok. Ayarlar bilgisayarınızda kalır.

Sizin dilinizi konuşur

İngilizce, Çekçe, Almanca, İspanyolca, Fransızca, İtalyanca, Japonca, Korece, Lehçe, Portekizce (Brezilya), Rusça, Türkçe, Çince (Basitleştirilmiş ve Geleneksel). Visual Studio'nun dilini izler.

Özellikler

Hex renkler, CSS işlevleri (rgb(), hsl(), hwb(), oklch(), oklab()), adlandırılmış renkler, .NET üyeleri (Colors.Red, Brushes.Teal, SKColors.Gold) ve sabit bağımsız değişkenli çağrılar (Color.FromArgb(255, 61, 139, 255), new Color32(…), QColor(…), RGB(…)) için düzenleyicide renk örnekleri.
Dört görüntüleme modu: değerden önce kare, kenar boşluğunda kare, alt çizgi (varsayılan) veya değerin kendi arka planı. Yalnızca ilki metni kaydırır.
Seçiciyi açmak için bir örneğe tıklayın; düzenleme, gösterimini koruyarak değeri yerinde değiştirir.
Üzerine gelince renk kartı: birkaç renk uzayındaki değerler, en yakın adlandırılmış renk ve beyaz ile siyah üzerindeki kontrast.
Bileşik değerler: CSS light-dark() (bölünmüş örnek), color-mix() (hesaplanan sonuç), CSS gradyanları ve XAML gradyan fırçaları.
Kaynaklar: {StaticResource AccentBrush}, {DynamicResource …}, {ThemeResource …} ve var(--accent), çözümün XAML ve CSS dosyalarından çözümlenir; açık ve koyu tema değerleri bölünmüş bir örnek verir.
Tailwind CSS renk sınıfları: bg-sky-500, hover:text-white/80, bg-[#1da1f2].
Çözümde değiştir: bir rengi her yerde, her yeri kendi gösteriminde değiştirin; isteğe bağlı olarak “benzer tonlar” da aranabilir.
IntelliSense önizlemesi: tamamlama listesinde bir renk seçiliyken imlecin üstünde o rengi gösteren bir etiket belirir.

Diller

Dil	Neler örnek alır
C#, Visual Basic, F#	hex dizeler, `Colors.X` / `Brushes.X` / `Color.X`, sabit değerlerle `Color.FromArgb` / `FromRgb`, Unity `Color` / `Color32`, SkiaSharp, MAUI
C / C++	hex dizeler, `RGB()`, `D2D1::ColorF`, `QColor`, `IM_COL32`
JavaScript / TypeScript	hex ve CSS dizeleri, renk hedeflerine atanan adlar (`fillStyle = 'red'`), `new THREE.Color()`, JSX'teki Tailwind sınıfları
Python	hex dizeler, matplotlib `"tab:blue"`, `QColor(…)`, adlar yalnızca renk bağımsız değişkeni olarak (`color="red"`, Tkinter `bg=`)
XAML / AXAML	renk özellikleri, setter'lar, `<Color>` kaynakları, gradyan fırçaları, kaynak başvuruları, MAUI `AppThemeBinding`
CSS / SCSS / LESS	yalnızca bildirim değerleri, değişkenler, `light-dark()`, `color-mix()`, gradyanlar, `var()`
HTML / Vue / SVG / Razor	`style` öznitelikleri, renk öznitelikleri, `<style>` ve `<script>` blokları, Razor C# blokları, Tailwind sınıfları

Renk seçici

Bir örneğe ya da renk kartındaki Düzenle düğmesine tıklayın. Seçici değerin yanında açılır ve hangi gösterimle geri yazacağını belirtir (örnekte Color.FromArgb()).

Doygunluk/değer alanı, ton ve opaklık şeritleri.
HEX, RGB, HSL ve OKLCH girişi; alttaki satır koda tam olarak ne yazılacağını gösterir.
Damlalık ekranın herhangi bir yerinden renk alır. Büyüteç imlecin altındaki pikselleri gösterir; ok tuşları imleci bir piksel, Shift+ok tuşları on piksel kaydırır.
Farklı kopyala: XAML/.NET veya CSS için HEX, rgb(), hsl(), oklch(), Color.FromArgb, Unity Color veya 0xAARRGGBB.
Geçerli rengin açık ve koyu tonları, bu dosyadaki renkler, sık kullanılanlar (yıldız düğmesi) ve son kullanılan renkler.
Rengin düzenleyici arka planı, beyaz veya siyah üzerinde metin olarak Kontrast (WCAG) değeri; AA / AAA / Büyük işaretleriyle.
En yakın adlandırılmış renk (≈ DodgerBlue); tam adı kullanmak için üzerine tıklayın.
Enter uygular, Esc iptal eder; seçicinin dışına tıklamak da uygular. Bölümler daraltılabilir ve seçici bunları hatırlar. ? düğmesi bu sayfayı açar.

Bileşik ve kaynak renkleri seçicide salt okunurdur: içlerindeki renkleri ya da kaynağı tanımlandığı yerde düzenleyin.

Koyu temada ColorSmith renk seçici — Seçici Visual Studio temasını izler.

Renk kartı

Kartını görmek için bir rengin üzerine gelin. Alt çizgi ve arka plan modlarında kartta düğmeler de bulunur: Düzenle seçiciyi açar, Kopyala değeri kopyalar, Çözümde rengi değiştir… çözüm genelinde değiştirmeyi başlatır. Bir örneğe Alt+tıklama, hiçbir şey açmadan değeri kopyalar.

light-dark() değerinin renk kartı — `light-dark()`: iki değer ve bölünmüş bir örnek.

CSS gradyanının renk kartı — Durak noktalarıyla bir gradyan.

Algılama nasıl çalışır

ColorSmith metni tek bir büyük normal ifadeyle taramaz. Her dosya, dilinin sözcük çözümleyicisi tarafından dizelere, yorumlara ve koda ayrılır; bir değer ancak bulunduğu yer hiçbir şüphe bırakmıyorsa renk sayılır. Şüphe varsa örnek gösterilmez.

Örnek alır	Düz kalır
`Foreground="Red"`, `color: red;`	`<p>Red is my favorite color</p>`
`"#3D8BFF"`, `// #3D8BFF`	`// fixed in #123` (yorumlardaki kısa hex)
`Color.FromArgb(255, 61, 139, 255)`	`Color.FromArgb(alpha, r, g, b)` (değer bilinmiyor)
`bg-sky-500`, `text-white/80`	`text-lg`, `border-2`, `bg-cover`
Python'da `color="red"`	`status = "red"`, `(255, 0, 0)`
`a { color: navy }`	`#main`, `.red` seçicileri, `font-family: Red Hat`

8 basamaklı hex

#XXXXXXXX, .NET, XAML ve Qt'de alfa başta (#AARRGGBB), CSS ve JavaScript'te alfa sonda (#RRGGBBAA) anlamına gelir. C#, VB ve C++ dizelerinde sıra bir ayardır, çünkü Unity ve web odaklı kod alfayı sonda kullanır.

Çözümde değiştir

Bir rengin üzerinde ampulle (Ctrl+.) ya da renk kartındaki düğmeyle açın. Rengi çözüm klasörünün tamamında (bin, obj ve node_modules hariç) her gösterimde bulur, yerleri seçmenize izin verir ve her birini kendi gösteriminde yeniden yazar. Değişen dosyalar, dosya başına tek geri alma adımıyla kaydedilmeden açılır; böylece kaydetmeden önce her şeyi gözden geçirebilirsiniz.

Ayarlar

Araçlar → Seçenekler → SmithWorks → ColorSmith. Her seçeneğin hemen altında bir açıklaması vardır.

Seçenek	Varsayılan
Renk örneklerini göster	açık
Görüntüleme modu	Alt çizgi
Örnek boyutu	Orta
IntelliSense'te renk önizlemesi	açık
Çözümde değiştir	açık
Yorumlardaki hex renkler	açık
Tailwind CSS sınıfları	açık
Kaynak renkleri	açık
C#, VB ve C++'ta 8 basamaklı hex	`#AARRGGBB`
En büyük dosya boyutu (KB)	4096
Diller	tümü açık

Ayarlar, seçicinin sık kullanılan ve son kullanılan renkleriyle birlikte %LocalAppData%\ColorSmith klasöründe saklanır.

ColorSmith seçenekler sayfası — Seçenekler sayfası. Alttaki **Belgeler** bağlantısı bu sayfayı açar.

SSS

Rengimde neden örnek yok?

Büyük olasılıkla yer belirsizdir: renk bağlamı dışında bir ad, değişken bağımsız değişkenli bir çağrı, yorumdaki kısa bir hex ya da var()/calc() ile oluşturulan bir değer. Ayrıca dilin ayarlarda açık olduğunu ve dosyanın boyut sınırından küçük olduğunu denetleyin.

Renkler IntelliSense listesinde simge olarak görünebilir mi?

Hayır. Visual Studio, bir uzantının diğer sağlayıcıların tamamlama öğelerinin simgelerini değiştirmesine izin vermez. Bunun yerine ColorSmith imlecin üstünde bir renk etiketi gösterir.

Örnek kodumu kaydırır mı?

Yalnızca “değerden önce kare” modunda. Kenar boşluğu, alt çizgi ve arka plan modları metni asla kaydırmaz.

Bir kaynak rengini kullanıldığı yerden düzenleyebilir miyim?

Henüz değil. Kart her temanın değerini dosyası ve satırıyla gösterir; değeri tanımında değiştirin.

ColorSmith herhangi bir veri gönderiyor mu?

Hayır. Telemetri ve ağ erişimi yoktur.

Bir sorunu nereye bildirebilir veya özellik önerebilirim?

GitHub'daki Feedback deposunda bir issue açın; hatalar ve fikirler için formlar vardır. Marketplace'teki Q&A sekmesini de kullanabilirsiniz.

Değişiklik günlüğü

1.0.2

Geri bildirim: Seçicinin başlık çubuğundaki bir düğme ve ayarlardaki “Geri bildirim gönder” bağlantısı GitHub'daki Feedback deposunu açar.
Ayarlar, diğer SmithWorks uzantılarının yanına, Araçlar → Seçenekler → SmithWorks → ColorSmith altına taşındı.

1.0.1

Seçicinin başlık çubuğundaki Ayarlar düğmesi (dişli) Araçlar → Seçenekler → ColorSmith'i açar.
Uzun kullanımdan sonra bir kez gösterilen ve kolayca kapatılabilen bir değerlendirme isteği; ayarlarda da “Marketplace'te değerlendir” bağlantısı.

1.0.0

İlk genel sürüm.
Seçicide yardım düğmesi ve ayarlarda Belgeler bağlantısı.