ColorSmith
Visual Studio 편집기를 위한 색 견본과 제대로 된 색 선택기. 견본은 코드가 실제로 색을 정의하는 곳에만 표시되며, 페이지 텍스트의 “red”라는 단어나 주석 속 #123에는 절대 표시되지 않습니다.
무료 · Visual Studio 2022 및 2026 · UI 14개 언어 · 원격 분석 없음
왜 또 하나의 색 확장인가
스마트한 감지
언어마다 전용 렉서가 있어 문자열, 주석, 코드를 구분합니다. 색 이름에는 색 컨텍스트(Foreground="Red", color: red)에서만 견본이 붙고, 일반 텍스트에는 붙지 않습니다.
열어 볼 가치가 있는 선택기
HEX, RGB, HSL, OKLCH, 돋보기가 있는 스포이트, 밝은 색과 어두운 색, 파일의 색, 즐겨찾기, WCAG 대비. 결과는 코드에서 이미 사용하는 표기법으로 다시 작성됩니다.
조건 없는 무료
구독, 체험판, 귀찮은 알림 화면, 원격 분석이 없습니다. 설정은 내 컴퓨터에만 저장됩니다.
사용자의 언어로
영어, 체코어, 독일어, 스페인어, 프랑스어, 이탈리아어, 일본어, 한국어, 폴란드어, 포르투갈어(브라질), 러시아어, 터키어, 중국어(간체 및 번체). Visual Studio 언어를 따릅니다.
기능
- 편집기 내 견본: 16진수 색, CSS 함수(
rgb(),hsl(),hwb(),oklch(),oklab()), 이름 있는 색, .NET 멤버(Colors.Red,Brushes.Teal,SKColors.Gold), 리터럴 인수를 사용한 호출(Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - 네 가지 표시 모드: 값 앞의 사각형, 여백의 사각형, 밑줄(기본값), 값의 배경. 텍스트를 움직이는 것은 첫 번째 모드뿐입니다.
- 견본을 클릭하면 선택기가 열리고, 값은 표기법을 유지한 채 그 자리에서 바뀝니다.
- 색 카드: 마우스를 올리면 여러 색 공간의 값, 가장 가까운 이름 있는 색, 흰색 및 검은색 배경에 대한 대비가 표시됩니다.
- 복합 값: CSS
light-dark()(분할된 견본),color-mix()(계산된 결과), CSS 그라데이션, XAML 그라데이션 브러시. - 리소스:
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …},var(--accent)를 솔루션의 XAML 및 CSS 파일에서 확인합니다. 밝은 테마와 어두운 테마 값은 분할된 견본으로 표시됩니다. - Tailwind CSS 색 클래스:
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - 솔루션에서 바꾸기: 한 색을 모든 곳에서 각 위치의 표기법대로 바꿉니다. “비슷한 음영”도 선택적으로 검색할 수 있습니다.
- IntelliSense에서 색 미리 보기: 완성 목록에서 색이 선택되어 있는 동안 커서 위에 해당 색의 칩이 표시됩니다.
언어
| 언어 | 견본이 표시되는 대상 |
|---|---|
| C#, Visual Basic, F# | 16진수 문자열, Colors.X / Brushes.X / Color.X, 리터럴 인수를 사용한 Color.FromArgb / FromRgb, Unity Color / Color32, SkiaSharp, MAUI |
| C / C++ | 16진수 문자열, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | 16진수 및 CSS 문자열, 색 대상에 할당된 이름(fillStyle = 'red'), new THREE.Color(), JSX의 Tailwind 클래스 |
| Python | 16진수 문자열, matplotlib "tab:blue", QColor(…), 색 인수로 쓰인 이름만(color="red", Tkinter bg=) |
| XAML / AXAML | 색 속성, setter, <Color> 리소스, 그라데이션 브러시, 리소스 참조, MAUI AppThemeBinding |
| CSS / SCSS / LESS | 선언 값만, 변수, light-dark(), color-mix(), 그라데이션, var() |
| HTML / Vue / SVG / Razor | style 특성, 색 특성, <style> 및 <script> 블록, Razor C# 블록, Tailwind 클래스 |
색 선택기
견본을 클릭하거나 색 카드에서 편집을 클릭하세요. 선택기는 값 옆에 열리며, 다시 작성할 표기법(예에서는 Color.FromArgb())을 보여 줍니다.
- 채도/명도 영역, 색조 및 불투명도 막대.
- HEX, RGB, HSL, OKLCH로 입력할 수 있으며, 아래 줄에 코드에 작성될 내용이 그대로 표시됩니다.
- 스포이트로 화면 어디에서나 색을 선택할 수 있습니다. 돋보기에 커서 아래의 픽셀이 표시되며, 화살표 키로 1픽셀, Shift+화살표 키로 10픽셀씩 이동합니다.
- 다른 형식으로 복사: XAML/.NET 또는 CSS용 HEX,
rgb(),hsl(),oklch(),Color.FromArgb, UnityColor,0xAARRGGBB. - 현재 색의 밝은 색과 어두운 색, 이 파일에서 사용된 색, 즐겨찾기(별 단추), 최근 색.
- 대비 (WCAG): 편집기 배경, 흰색, 검은색 위에 텍스트로 쓴 색의 대비를 AA / AAA / 큰 텍스트 표시와 함께 보여 줍니다.
- 가장 가까운 이름 있는 색(≈ DodgerBlue). 클릭하면 정확한 이름을 사용합니다.
- Enter는 적용, Esc는 취소입니다. 선택기 바깥을 클릭해도 적용됩니다. 섹션은 접을 수 있으며 선택기가 그 상태를 기억합니다. ? 단추를 누르면 이 페이지가 열립니다.
복합 색과 리소스 색은 선택기에서 읽기 전용입니다. 그 안의 색을 편집하거나, 리소스가 정의된 곳에서 편집하세요.
색 카드
색 위에 마우스를 올리면 카드가 표시됩니다. 밑줄 및 배경 모드에서는 카드에 단추도 있습니다. 편집은 선택기를 열고, 복사는 값을 복사하며, 솔루션에서 색 바꾸기…는 솔루션 전체 바꾸기를 시작합니다. 견본을 Alt+클릭하면 아무것도 열지 않고 값을 복사합니다.
light-dark(): 두 값과 분할된 견본.
감지 방식
ColorSmith는 하나의 큰 정규식으로 텍스트를 검색하지 않습니다. 각 파일을 해당 언어의 렉서로 문자열, 주석, 코드로 나누고, 위치상 의심의 여지가 없을 때만 값을 색으로 인식합니다. 확실하지 않으면 견본을 표시하지 않습니다.
| 견본 표시 | 견본 없음 |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123(주석의 짧은 16진수) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b)(값을 알 수 없음) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
Python의 color="red" | status = "red", (255, 0, 0) |
a { color: navy } | #main, .red 선택자, font-family: Red Hat |
8자리 16진수
#XXXXXXXX는 .NET, XAML, Qt에서는 알파가 앞(#AARRGGBB), CSS와 JavaScript에서는 알파가 뒤(#RRGGBBAA)입니다. Unity와 웹 지향 코드는 알파를 뒤에 두므로, C#, VB, C++ 문자열의 순서는 설정으로 지정합니다.
솔루션에서 바꾸기
색에서 전구(Ctrl+.)를 사용하거나 색 카드의 단추로 엽니다. 솔루션 폴더 전체(bin, obj, node_modules 제외)에서 모든 표기법으로 된 해당 색을 찾고, 바꿀 위치를 선택하게 한 뒤 각 위치를 원래 표기법대로 다시 작성합니다. 변경된 파일은 저장되지 않은 상태로 열리고 파일마다 실행 취소 한 번으로 되돌릴 수 있으므로, 저장하기 전에 모든 내용을 검토할 수 있습니다.
설정
도구 → 옵션 → SmithWorks → ColorSmith. 모든 옵션 바로 아래에 설명이 있습니다.
| 옵션 | 기본값 |
|---|---|
| 색 견본 표시 | 켜짐 |
| 표시 모드 | 밑줄 |
| 견본 크기 | 보통 |
| IntelliSense에서 색 미리 보기 | 켜짐 |
| 솔루션에서 바꾸기 | 켜짐 |
| 주석의 16진수 색 | 켜짐 |
| Tailwind CSS 클래스 | 켜짐 |
| 리소스 색 | 켜짐 |
| C#, VB, C++의 8자리 16진수 | #AARRGGBB |
| 최대 파일 크기(KB) | 4096 |
| 언어 | 모두 켜짐 |
설정은 선택기의 즐겨찾기 및 최근 색과 함께 %LocalAppData%\ColorSmith에 저장됩니다.
자주 묻는 질문
내 색에 견본이 표시되지 않는 이유는 무엇인가요?
대개 위치가 모호하기 때문입니다. 색 컨텍스트 밖의 이름, 변수 인수를 사용한 호출, 주석의 짧은 16진수, var()/calc()로 만든 값 등이 해당합니다. 또한 설정에서 해당 언어가 켜져 있는지, 파일이 크기 제한보다 작은지 확인하세요.
IntelliSense 목록 안에 색을 아이콘으로 표시할 수 있나요?
아니요. Visual Studio에서는 확장이 다른 공급자의 완성 항목 아이콘을 변경할 수 없습니다. 대신 ColorSmith는 커서 위에 색 칩을 표시합니다.
견본 때문에 코드가 밀리나요?
“값 앞의 사각형” 모드에서만 그렇습니다. 여백, 밑줄, 배경 모드는 텍스트를 움직이지 않습니다.
리소스 색을 사용하는 위치에서 편집할 수 있나요?
아직은 아닙니다. 카드에 각 테마의 값이 파일 및 줄과 함께 표시되므로, 정의된 곳에서 변경하세요.
ColorSmith가 데이터를 전송하나요?
아니요. 원격 분석도 네트워크 접근도 없습니다.
문제를 보고하거나 기능을 제안하려면 어디로 가야 하나요?
GitHub의 Feedback 리포지토리에 이슈를 등록하세요. 버그와 아이디어를 위한 양식이 있습니다. Marketplace의 Q&A 탭을 이용할 수도 있습니다.
변경 내역
1.0.2
- 피드백: 선택기 제목 표시줄의 단추와 설정의 “피드백 보내기” 링크로 GitHub의 Feedback 리포지토리를 엽니다.
- 설정이 도구 → 옵션 → SmithWorks → ColorSmith(으)로 이동해 다른 SmithWorks 확장과 함께 있습니다.
1.0.1
- 선택기 제목 표시줄의 설정 단추(톱니바퀴)로 도구 → 옵션 → ColorSmith를 엽니다.
- 오래 사용한 후 한 번만 표시되고 쉽게 닫을 수 있는 평가 요청, 그리고 설정의 “Marketplace에서 평가” 링크.
1.0.0
- 첫 공개 릴리스.
- 선택기의 도움말 단추와 설정의 설명서 링크.