색상 음영 생성기 — Tailwind 스타일
기본 색상을 선택하면 Tailwind CSS와 Material Design에서 사용하는 11단계 색상 팔레트(50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)를 즉시 생성합니다. 각 음영은 흰색 또는 검은색 텍스트에 대한 WCAG 접근성 등급을 표시합니다. 스워치를 클릭하면 hex 코드를 복사하고, CSS 복사를 클릭하면 CSS custom properties로 내보낼 수 있습니다.
작동 방식
색상 음영 스케일의 작동 원리
색상 음영 스케일은 기본 색상의 밝고 어두운 변형을 체계적으로 나열한 것으로, UI 디자인에서 시각적 계층 구조와 접근 가능한 명암 대비를 만들기 위해 사용됩니다. Tailwind CSS 규약은 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950의 11단계를 사용합니다. 숫자가 작을수록 밝고(HSL에서 명도가 높음), 숫자가 클수록 어둡습니다. 500단계는 보통 입력한 기본 색상에 가장 가깝습니다.
이 도구는 입력된 hex를 HSL(색상, 채도, 명도)로 변환하고, 색상과 채도는 유지하면서 각 단계를 미리 정의된 명도 값에 매핑하여 음영을 생성합니다. 50단계는 약 97% 명도(거의 흰색), 500단계는 약 52%(중간), 950단계는 약 12%(거의 검은색)에 해당합니다. 이 방식은 모든 밝기 수준에서 색상의 특성을 유지하는 시각적으로 일관된 팔레트를 만들어냅니다.
팔레트의 WCAG 명암 대비 등급
팔레트의 각 음영은 검은색 또는 흰색 텍스트 중 가독성이 더 높은 쪽에 대한 WCAG(웹 콘텐츠 접근성 지침) 명암 대비 등급을 표시합니다. 등급은 AAA(명암비 7:1 이상, 최고 접근성), AA(4.5:1 이상, 일반 텍스트 필수), AA Large(3:1 이상, 큰 텍스트와 UI 구성요소에만 허용), Fail(3:1 미만, 텍스트에 불충분)의 4가지입니다. 많은 국가에서 WCAG 2.1 AA 준수가 접근성의 최소 법적 요건입니다.
색상 팔레트로 UI를 구성할 때, 해당 배경 위의 텍스트에는 AA 또는 AAA 등급의 음영을 사용하세요. 일반적으로 50~300단계는 어두운 텍스트와 높은 대비를 가지며, 700~950단계는 흰색 텍스트와 높은 대비를 가집니다. 중간 음영(400~600)은 작은 텍스트의 경우 AA Large 또는 Fail 범주에 해당하는 경우가 많아 장식 요소, 테두리, 큰 흰색 텍스트 뒤의 배경에는 적합하지만 작은 본문 텍스트에는 부적합합니다.
CSS 및 디자인 시스템에서 팔레트 활용
CSS 복사 버튼을 클릭하면 팔레트가 :root 블록의 CSS custom properties(CSS 변수)로 내보내져 스타일시트에 바로 붙여넣을 수 있습니다. 예를 들어 blue-500 변수는 --color-500: #3b82f6이 됩니다(선택한 색상에 따라 값이 달라집니다). 변수 접두사는 프로젝트에 맞게 변경할 수 있습니다(--brand-500, --primary-500, --blue-500 등). CSS custom properties는 계단식으로 적용되며 컴포넌트나 테마별로 재정의할 수 있습니다.
Tailwind CSS, Material Design, Ant Design, Chakra UI 같은 디자인 시스템은 모두 색상 시스템에 번호가 매겨진 음영 스케일을 사용합니다. 일관된 스케일을 가지면 자신 있게 선택할 수 있습니다. 50은 호버 배경, 100은 밝은 테마의 활성 상태, 500은 기본 버튼, 700은 버튼의 호버 상태, 900은 어두운 배경에 사용하세요. 모든 브랜드 색상을 동일한 번호 스케일로 유지하면 예측 가능성이 높아지고 컴포넌트 수준의 디자인 결정이 줄어듭니다.
자주 묻는 질문
›음영 번호(50~950)는 무슨 의미인가요?
숫자는 Tailwind CSS 색상 스케일 규약을 따릅니다. 작은 숫자는 더 밝습니다. 50은 거의 흰색, 100은 매우 밝고, 200과 300은 밝은 색조입니다. 중간값(500)은 원래 색상에 가까운 중간 값입니다. 큰 숫자는 더 어둡습니다. 700은 어둡고, 900은 매우 어두우며, 950은 거의 검은색입니다. 이 스케일은 선형이 아닙니다 — 전체 범위에서 단계 크기가 지각적으로 균등하게 느껴지도록 조정되어 있습니다.
›틴트와 셰이드의 차이는 무엇인가요?
틴트는 색상에 흰색을 섞어 밝게 만든 것이고, 셰이드는 검은색을 섞어 어둡게 만든 것입니다. HSL 용어로 틴트는 명도 값이 높고, 셰이드는 명도 값이 낮지만 색상(hue)은 동일합니다. 이 스케일에서 50~400은 틴트(기본보다 밝음), 600~950은 셰이드(기본보다 어둠)입니다. 500단계는 대략 기본 색상 자체입니다.
›이 도구는 어떻게 음영을 생성하나요?
도구는 hex 색상을 HSL(색상, 채도, 명도)로 변환합니다. 색상과 채도는 일정하게 유지하면서 각 단계 번호를 목표 명도 값에 매핑합니다(50단계 → 명도 97%, 500단계 → 52%, 950단계 → 12%). 그런 다음 결과를 다시 hex로 변환합니다. 이 방법은 모든 음영에서 색상의 특성(따뜻함, 시원함, 생동감)을 유지합니다.
›WCAG란 무엇이고, 음영에 등급이 표시되는 이유는?
WCAG(웹 콘텐츠 접근성 지침)는 읽기 쉬운 텍스트를 위한 최소 명암 대비율을 정의합니다. AA는 일반 텍스트에 4.5:1, AAA는 7:1을 요구합니다. 각 음영의 명암 대비 등급은 해당 배경에 검은색 또는 흰색 텍스트가 AA 또는 AAA 기준을 충족하는지를 나타냅니다. 이를 통해 텍스트에 안전한 음영과 장식 요소에만 사용해야 하는 음영을 쉽게 선택할 수 있습니다.
›이 팔레트를 Tailwind CSS에서 어떻게 사용하나요?
Tailwind에서는 tailwind.config.js에서 사용자 정의 색상을 정의할 수 있습니다. theme.extend.colors 아래에 음영을 추가합니다(colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }). 그러면 bg-brand-100, text-brand-700, border-brand-300 같은 클래스를 사용할 수 있습니다. CSS 우선 설정을 사용하는 Tailwind v4의 경우 CSS 변수 출력을 테마 정의에 붙여넣으세요.
›선택한 색상의 음영이 입력값과 정확히 일치하지 않는 이유는?
도구는 각 단계에 특정 명도 값을 설정합니다. 500단계의 목표 명도는 HSL 기준 약 52%입니다. 입력 색상의 명도가 다를 경우(예: 밝은 색상이라면 70%), 500단계 음영은 52%로 조정됩니다. 이를 통해 일관된 스케일이 생성되지만, 500단계가 원래 입력과 동일하지 않을 수 있습니다. 500단계에서 정확한 색상을 원하면 hex를 수동으로 조정하세요. 스케일은 입력값을 기준으로 상대적으로 생성됩니다.
›CSS custom properties와 함께 사용할 수 있나요?
예. CSS 복사를 클릭하면 11개 음영 모두를 custom properties로 포함하는 :root 블록을 바로 사용할 수 있는 형태로 가져올 수 있습니다. CSS에서는 var(--color-500), var(--color-50) 등으로 참조합니다. --color- 접두사는 프로젝트에 맞는 이름(--brand-, --primary-, --blue-)으로 변경할 수 있습니다. Custom properties는 계단식으로 적용되며, 컴포넌트에 범위를 지정하거나 다크 모드를 위한 미디어 쿼리에서 재정의할 수 있습니다.
›이 음영과 CSS color-mix() 함수의 차이는 무엇인가요?
CSS color-mix() 함수(최신 브라우저 지원)는 물감을 섞듯 두 색상을 퍼센트로 혼합합니다. 이 도구는 미리 정의된 명도 스케일(HSL 기반)을 사용하여 더 제어되고 예측 가능한 디자인 시스템 스케일을 생성합니다. color-mix()는 브랜드 색상에 흰색 20%를 섞는 등의 일회성 혼합에 더 적합하고, 이 도구는 체계적인 디자인 시스템 전체 팔레트 생성에 적합합니다. 두 방법 모두 사용 사례에 따라 각자의 역할이 있습니다.
관련 도구
최종 업데이트: