Tailwind 색상 찾기
HEX 또는 RGB 값의 가장 가까운 Tailwind CSS 색상 클래스 찾기
예시 시도
색상 (HEX)
가장 가까운 Tailwind 색상
결과를 클릭하여 클래스명 복사
Tailwind Color Finder란?
Tailwind CSS는 기본 색상 팔레트로 22개의 색상 패밀리를 제공하며, 각 패밀리에는 50(가장 밝음)부터 950(가장 어둠)까지 11개의 음영이 포함됩니다. 이를 통해 bg-indigo-500이나 text-red-400 같은 클래스명을 가진 242가지 사전 정의 색상을 사용할 수 있습니다. 디자인 파일에서 HEX 또는 RGB 값을 받아 가장 가까운 Tailwind 클래스를 찾아야 할 때, Tailwind Color Finder는 입력값과 팔레트의 모든 색상 간 거리를 계산하여 최적의 결과를 반환합니다.
매칭 알고리즘은 입력 색상과 각 Tailwind 색상을 RGB 삼중값으로 변환한 후 3차원 색상 공간에서 유클리드 거리를 계산합니다: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). 거리가 가장 작은 Tailwind 색상이 가장 가까운 결과입니다. 거리가 0이면 입력값이 Tailwind 기본 음영과 정확히 일치합니다.
이 도구는 일반 색상 변환기나 CSS 색상 이름 찾기 도구와 다릅니다. 변환기는 형식을 변경합니다(HEX를 HSL로, RGB를 CMYK로). 이름 찾기 도구는 148개의 CSS 이름 색상과 매칭합니다. Tailwind Color Finder는 Tailwind CSS 기본 팔레트와만 매칭하여, 마크업에 바로 붙여넣을 수 있는 클래스명을 반환합니다.
왜 이 Tailwind Color Finder를 사용해야 할까요?
HEX 값을 242개의 Tailwind 음영과 수동으로 비교하려면 문서나 설정 파일을 일일이 확인해야 합니다. 이 도구는 모든 음영에 대한 거리 계산을 실행하고, 근접도 순으로 정렬된 상위 결과와 함께 정확한 HEX 값 및 복사 가능한 Tailwind 클래스명을 보여줍니다.
🎯
모든 색상을 Tailwind 클래스로 매핑
Figma, Sketch 또는 브랜드 가이드라인의 HEX 코드를 붙여넣으면 가장 가까운 Tailwind 색상 클래스를 즉시 확인할 수 있습니다. 도구는 여러 개의 순위별 결과를 반환하므로 디자인 의도에 맞는 음영을 선택할 수 있습니다.
🔒
개인 정보 우선 처리
모든 색상 계산은 브라우저에서 실행됩니다. 색상 값은 서버로 전송되지 않습니다. 페이지가 로드된 후에는 오프라인에서도 작동합니다.
⚡
키 입력마다 즉각적인 매칭
HEX 입력에서 문자 하나를 변경하면 결과가 즉시 재계산됩니다. 제출 버튼도 없고, 로딩 표시도 없으며, 서버와의 왕복 요청도 없습니다.
📋
클래스명 바로 복사
결과를 클릭하면 Tailwind 클래스명(예: indigo-500)이 클립보드에 복사됩니다. JSX, HTML 또는 Tailwind 설정 파일에 형식 변환 없이 바로 붙여넣을 수 있습니다.
Tailwind Color Finder 활용 사례
디자인에서 코드로 변환
Figma 디자인에서 HEX 값을 받은 프론트엔드 개발자는 커스텀 색상을 추가하는 대신 가장 가까운 Tailwind 클래스를 찾을 수 있습니다. 이렇게 하면 코드베이스가 기본 팔레트와 일치하고 tailwind.config.js 설정이 불필요하게 커지는 것을 방지할 수 있습니다.
기존 CSS를 Tailwind로 마이그레이션
기존 프로젝트를 Tailwind CSS로 전환하는 백엔드 개발자는 각 HEX 색상을 조회하여 가장 가까운 유틸리티 클래스로 교체할 수 있습니다. 색상을 처음부터 다시 선택하지 않아도 되므로 마이그레이션 속도가 빨라집니다.
디자인 시스템 감사
Tailwind 기반 디자인 시스템을 감사하는 DevOps 및 플랫폼 팀은 어떤 커스텀 색상이 기본 음영으로 대체될 수 있을 만큼 가까운지 확인하여 팔레트 유지 관리 부담을 줄일 수 있습니다.
컴포넌트 라이브러리 개발
컴포넌트 라이브러리를 테스트하는 QA 엔지니어는 샘플링한 HEX 값을 도구에 붙여넣어 렌더링된 색상이 예상 Tailwind 음영과 일치하는지 거리 점수를 통해 검증할 수 있습니다.
데이터 대시보드 테마 적용
Tailwind 스타일 차트 라이브러리로 대시보드를 구축하는 데이터 엔지니어는 브랜드 색상이나 클라이언트 제공 HEX 값을 가장 가까운 Tailwind 음영으로 매핑하여 컴포넌트 전반에 일관된 테마를 적용할 수 있습니다.
Tailwind 팔레트 학습
Tailwind CSS를 처음 접하는 학생과 개발자는 임의의 HEX 값을 입력하여 어느 팔레트 패밀리와 음영 번호에 해당하는지 탐색하고, color-500과 color-700의 차이를 익힐 수 있습니다.
Tailwind CSS 기본 색상 팔레트
Tailwind CSS v3에는 22개의 색상 패밀리가 있습니다. 각 패밀리에는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950의 11개 음영이 있습니다. 500 음영은 각 패밀리의 '기준' 색상으로 간주됩니다. 아래 표는 각 패밀리의 가장 밝은(50)과 가장 어두운(950) HEX 값을 보여줍니다.
| 색상 패밀리 | 음영 | 50 (가장 밝음) | 950 (가장 어두움) |
|---|---|---|---|
| slate | 11 | #f8fafc | #020617 |
| gray | 11 | #f9fafb | #030712 |
| zinc | 11 | #fafafa | #09090b |
| neutral | 11 | #fafafa | #0a0a0a |
| stone | 11 | #fafaf9 | #0c0a09 |
| red | 11 | #fef2f2 | #450a0a |
| orange | 11 | #fff7ed | #431407 |
| amber | 11 | #fffbeb | #451a03 |
| yellow | 11 | #fefce8 | #422006 |
| lime | 11 | #f7fee7 | #1a2e05 |
| green | 11 | #f0fdf4 | #052e16 |
| emerald | 11 | #ecfdf5 | #022c22 |
| teal | 11 | #f0fdfa | #042f2e |
| cyan | 11 | #ecfeff | #083344 |
| sky | 11 | #f0f9ff | #082f49 |
| blue | 11 | #eff6ff | #172554 |
| indigo | 11 | #eef2ff | #1e1b4b |
| violet | 11 | #f5f3ff | #2e1065 |
| purple | 11 | #faf5ff | #3b0764 |
| fuchsia | 11 | #fdf4ff | #350820 |
| pink | 11 | #fdf2f8 | #500724 |
| rose | 11 | #fff1f2 | #4c0519 |
Tailwind v3 vs v4 색상 팔레트
Tailwind CSS v4는 색상 정의 방식을 변경하지만 동일한 기본 팔레트 이름과 음영 번호를 유지합니다.
Tailwind CSS v3
색상은 tailwind.config.js에 HEX 값으로 정의됩니다. 기본 팔레트에는 22개 색상 패밀리(slate부터 rose까지)가 포함되며 각 11개 음영(50-950)이 있습니다. 커스텀 색상은 theme.extend.colors를 통해 추가합니다. 클래스명은 bg-{color}-{shade}, text-{color}-{shade} 패턴을 따릅니다.
Tailwind CSS v4
@theme에 정의된 CSS 커스텀 속성으로 색상이 이동합니다. 기본 팔레트는 동일한 22개 패밀리와 11개 음영이지만 값은 HEX 대신 OKLCH로 저장됩니다. 커스텀 색상은 @theme { --color-brand: oklch(0.5 0.2 240); }를 사용합니다. 클래스명은 변경되지 않습니다: bg-brand, text-indigo-500 등.
코드 예제
RGB 공간에서 유클리드 거리를 사용하여 프로그래밍 방식으로 가장 가까운 Tailwind 색상을 찾습니다. 각 예제는 HEX 문자열을 입력받아 기본 팔레트에서 가장 가까운 Tailwind 클래스명을 반환합니다.
JavaScript
// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
'red-500': [239, 68, 68],
'blue-500': [59, 130, 246],
'indigo-500': [99, 102, 241],
'green-500': [34, 197, 94],
// ... full palette (242 entries)
}
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
function nearestTailwind(hex) {
const [r, g, b] = hexToRgb(hex)
let best = '', bestDist = Infinity
for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
if (d < bestDist) { bestDist = d; best = name }
}
return best
}
nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)Python
import math
TAILWIND = {
"red-500": (239, 68, 68),
"blue-500": (59, 130, 246),
"indigo-500": (99, 102, 241),
"green-500": (34, 197, 94),
# ... full palette
}
def hex_to_rgb(h: str) -> tuple[int, int, int]:
h = h.lstrip("#")
return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)
def nearest_tailwind(hex_str: str) -> tuple[str, float]:
r, g, b = hex_to_rgb(hex_str)
name, dist = min(
TAILWIND.items(),
key=lambda item: math.dist((r, g, b), item[1])
)
return name, round(dist, 1)
print(nearest_tailwind("#6366f1")) # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b")) # → ('slate-800', 0.0)
print(nearest_tailwind("#333333")) # → ('zinc-700', 17.5)CLI (Tailwind config)
# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
theme: {
extend: {
colors: {
brand: {
// Your brand color: #5a5de0
// Nearest Tailwind: indigo-500 (#6366f1)
// Use the exact brand color, reference Tailwind for context
DEFAULT: '#5a5de0',
light: '#8183f0', // near indigo-300
dark: '#3b3dab', // near indigo-700
}
}
}
}
}
# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html자주 묻는 질문
Tailwind CSS 기본 팔레트에는 색상이 몇 개 있나요?
Tailwind CSS v3 및 v4의 기본 팔레트에는 242가지 색상이 있습니다: 22개 색상 패밀리(slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose)에 각 11개 음영(50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)이 있습니다. black과 white도 독립 유틸리티로 사용할 수 있습니다.
Tailwind Color Finder와 CSS 색상 이름 찾기 도구의 차이는 무엇인가요?
CSS 색상 이름 찾기 도구는 입력값을 148개의 CSS 이름 색상(Tomato, SlateBlue, Crimson 등)과 매칭합니다. Tailwind Color Finder는 Tailwind 기본 팔레트의 242가지 색상과 매칭하여 red-500이나 indigo-400 같은 클래스명을 반환합니다. Tailwind 찾기 도구의 결과물은 HTML 또는 JSX에 바로 사용할 수 있는 유틸리티 클래스입니다.
Tailwind CSS v4 프로젝트에도 이 도구를 사용할 수 있나요?
네. Tailwind v4의 기본 색상 팔레트는 v3와 동일한 색상 이름과 음영 번호를 사용합니다. HEX 값도 거의 동일합니다. 주요 차이점은 v4가 색상을 내부적으로 OKLCH로 저장한다는 점이지만, 표준 팔레트에서는 v3와 시각적 결과가 일치합니다. v4 테마를 기본이 아닌 OKLCH 값으로 커스터마이즈한 경우, 찾기 도구는 표준 팔레트와만 매칭합니다.
결과의 거리 점수는 무엇을 의미하나요?
거리 점수는 입력 색상과 매칭된 Tailwind 색상 간의 RGB 공간에서의 유클리드 거리입니다. 거리 0은 정확한 일치를 의미합니다. 10 미만의 거리는 매우 가깝고 사람 눈으로는 거의 구분할 수 없습니다. 30 이상의 거리는 눈에 띄는 차이를 나타냅니다. 이 점수는 제안된 Tailwind 클래스를 사용할지 커스텀 색상을 추가할지 결정하는 데 도움이 됩니다.
커스텀 HEX 대신 항상 가장 가까운 Tailwind 색상을 사용해야 하나요?
항상 그럴 필요는 없습니다. 가장 가까운 Tailwind 음영까지의 거리가 작다면(10-15 미만), 기본 클래스로 전환하면 설정 파일 크기가 줄고 팔레트가 일관되게 유지됩니다. 거리가 크거나 정확히 일치해야 하는 특정 브랜드 색상이라면 Tailwind 설정에 커스텀 색상으로 추가하세요. 찾기 도구는 정확한 거리를 보여줌으로써 이 결정을 돕습니다.
회색 패밀리가 slate, gray, zinc, neutral, stone으로 다섯 가지인 이유는 무엇인가요?
각 회색 패밀리는 다른 색조를 가집니다. Slate는 파란 기운이 있어 파란 계열 강조색이 있는 UI 디자인에 적합합니다. Gray는 따뜻함과 차가움이 균형 잡힌 중성색입니다. Zinc는 파랗지 않으면서 약간 차갑습니다. Neutral은 색상 편향이 없는 순수한 무채색 회색입니다. Stone은 따뜻한 갈색 기운이 있습니다. Tailwind는 커스텀 설정 없이 디자인의 색 온도에 맞는 회색을 선택할 수 있도록 다섯 가지를 모두 제공합니다.
매칭된 색상을 Tailwind 프로젝트에 어떻게 추가하나요?
정확하거나 거의 정확한 기본 음영과 일치한다면 클래스명을 바로 사용하세요: bg-indigo-500, text-red-400, border-emerald-600. 설정 변경이 필요 없습니다. Tailwind 음영에 가깝지만 동일하지 않은 커스텀 색상을 사용하려면, v3의 경우 tailwind.config.js의 theme.extend.colors에, v4의 경우 @theme의 CSS 커스텀 속성으로 추가하세요. 찾기 도구는 두 경우 모두에 사용할 클래스명 형식을 제공합니다.