Tailwind CSS 11단계 명도 팔레트 생성기
HOT기준 HEX 컬러 1개로 50부터 950까지 11단계 명도 팔레트 및 tailwind.config.js 테마 코드 생성
Responsive 728x90 / 320x100 Ad Slot
(CLS Prevention Active · Zero Shift)// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#f1f6fe',
100: '#d9e6fc',
200: '#b3cef9',
300: '#83aff6',
400: '#4a8bf2',
500: '#3b82f6',
600: '#054fc7',
700: '#033b96',
800: '#022c6e',
900: '#021e4b',
950: '#01122d',
},
},
},
},
};Native In-Feed / High Viewability Ad Slot
(CLS Prevention Active · Zero Shift)Tailwind CSS의 11단계 지각 균일(Perceptual) 색상 스케일 아키텍처
현대 웹 프론트엔드 개발의 사실상 표준 유틸리티 프레임워크로 자리 잡은 Tailwind CSS는 단일 색상을 무려 11단계(50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)의 세분화된 명도 스케일로 체계화하여 제공합니다. 50단계는 거의 백색에 가까운 은은한 컨테이너 배경 틴트로, 500단계는 시선을 사로잡는 대표 액션 버튼으로, 900~950단계는 깊이감 있는 본문 텍스트나 다크 모드 서페이스로 활용됩니다. 이러한 촘촘한 디자인 토큰 계층은 디자이너와 개발자가 매번 새로운 헥스 코드를 고민하지 않고도 일관성 있는 UI 테마를 구축할 수 있게 해줍니다.
그러나 기업의 브랜드 아이덴티티(BI) 로고 색상 하나만을 가지고 Tailwind 공식 표준 팔레트처럼 자연스러운 11단계를 도출하는 작업은 결코 만만치 않습니다. 많은 개발자가 단순하게 흰색과 검은색을 수학적으로 혼합(Linear Tint/Shade)하는 실수를 범하는데, 이 경우 어두운 영역(800, 900, 950)으로 갈수록 채도가 급격히 죽어 탁한 흙빛(Muddy Gray)으로 변질되는 현상이 발생합니다. 인간의 망막이 지각하는 색상의 밝기와 채도는 비선형적이므로, 색상환 각도(Hue)를 섬세하게 비틀고(Hue Shifting) 어두운 단계에서 채도를 인위적으로 보정하는 정교한 컬러 사이언스가 필수적입니다.
오르보킷 Tailwind 컬러 셰이드 생성기는 단 하나의 메인 브랜드 헥스(#HEX) 코드 입력만으로 지각 균일 보간 알고리즘을 적용하여 50부터 950까지의 완벽한 11단계 컬러 팔레트를 실시간 도출합니다. 각 단계별 흰색/검은색 텍스트 가독성 명암비(WCAG) 배지 프리뷰는 물론, `tailwind.config.js`의 `theme.extend.colors` 객체 형식으로 즉각 복사할 수 있는 프로덕션 코드를 원클릭으로 제공합니다.
비선형 명도 분배와 탁함 방지(Anti-Muddiness) 채도 보정 알고리즘
인간의 시각 인지 특성을 고려하여 sRGB 원통 좌표계의 한계를 극복하는 컬러 램프 생성 공식입니다.
단계별 가중치 f(step)는 50(L≈97%)부터 500(L=L_base)을 거쳐 950(L≈10%)까지 S자 곡선(Sigmoid) 형태로 비선형 감쇄하며, 900~950 영역에서는 채도를 10~25% 추가 부스팅하여 색상의 선명도를 유지합니다.
👉 단순 흑백 혼합 시 나타나는 칙칙한 군청색 대신, 애플과 스트라이프 수준의 맑고 깊은 럭셔리 블루 팔레트가 완성됩니다.
- 50단계(명도 약 97%)는 소프트 라이트 모드 카드 배경 및 배지 틴트로 설계됩니다.
- 500단계(명도 약 50%)는 Primary 액션 버튼 및 링크의 핵심 시각적 앵커 역할을 수행합니다.
- 900~950단계(명도 약 10~20%)는 다크 모드 캔버스 배경 및 깊이 있는 본문 텍스트에 필수적입니다.
- 생성된 코드는 Tailwind CSS v3의 `tailwind.config.js` 및 v4의 최신 CSS 변수 토큰 체계와 100% 호환됩니다.
Tailwind CSS 11단계 컬러 셰이드의 표준 명도 및 UI 역할 매핑표
엔터프라이즈 디자인 시스템 수립 시 각 셰이드 단계별 권장 인터페이스 배치 가이드라인입니다.
| 셰이드 단계 | 목표 명도(L) | 권장 텍스트 색상 | WCAG 권장 용도 | 주요 UI 컴포넌트 적용 사례 |
|---|---|---|---|---|
| 50 | 97% ~ 98% | #000000 (Black) | 은은한 틴트 배경 | 활성화된 리스트 행, 알림 배지 배경, 테이블 짝수 행 |
| 100 | 92% ~ 94% | #000000 (Black) | 연한 컨테이너 서페이스 | 비활성화 태그 칩, 아바타 테두리, 카드 배경 |
| 200 | 84% ~ 87% | #000000 (Black) | 구분선 및 디바이더 | 인풋 폼 테두리, 아코디언 테두리 선 |
| 300 | 74% ~ 78% | #000000 (Black) | 비활성 인터랙티브 요소 | 호버 시의 보더 라인, 비활성화된 버튼 |
| 400 | 62% ~ 66% | #000000 (Black) | 서브 브랜드 액센트 | 아이콘 색상, 보조 프로그레스 바 |
| 500 | 50% (기준) | #FFFFFF (White) | 메인 브랜드 프라이머리 | 기본 CTA 버튼, 활성 토글 스위치, 메인 링크 |
| 600 | 42% ~ 46% | #FFFFFF (White) | 호버(Hover) 상태 인터랙션 | 버튼 마우스 오버 상태, 클릭 액션 |
| 700 | 34% ~ 38% | #FFFFFF (White) | 액티브(Active) 및 진한 텍스트 | 버튼 클릭 누름 상태, 라이트모드 섹션 제목 |
| 800 | 24% ~ 28% | #FFFFFF (White) | 고대비 텍스트 | 카드 헤드라인 폰트, 강조 본문 문장 |
| 900 | 15% ~ 18% | #FFFFFF (White) | 다크모드 메인 텍스트 | 최상위 H1 헤드라인, 다크모드 서브 서페이스 |
| 950 | 8% ~ 12% | #FFFFFF (White) | 초심야 다크모드 배경 | 다크모드 최하단 캔버스 배경, 딥 사이드바 |
* 명도 500단계를 기준으로 50~400은 검은색 텍스트가, 600~950은 흰색 텍스트가 WCAG 4.5:1 명암비를 안전하게 만족합니다.
High-Engagement In-Article Native Ad Slot
(CLS Prevention Active · Zero Shift)사용 방법
11. 기준 브랜드 키 컬러(#HEX) 입력
대표 브랜드 색상 코드(예: #3B82F6)를 직접 입력하거나 컬러 피커를 통해 중심이 될 기준 색상을 지정합니다.
22. 11단계 지각 균일 명도 스케일 확인
입력된 색상이 표준 액션 단계인 500번에 정확히 안착하며, 50부터 950까지의 균형 잡힌 명도 사다리가 즉시 생성됩니다.
33. 텍스트 명암비 및 가독성 적합도 검토
각 셰이드 카드 상단에 표시되는 White/Black 텍스트 가독성 배지와 WCAG AA 명암비를 시각적으로 확인합니다.
44. tailwind.config.js 설정 객체 복사
복사 버튼을 클릭하여 Tailwind CSS 테마 확장 설정에 바로 붙여넣을 수 있는 JavaScript 객체 코드를 클립보드에 담습니다.
실무 프론트엔드 및 디자인 시스템 구축 시나리오
단일 로고 색상을 엔터프라이즈급 UI 디자인 토큰으로 확장한 성공 사례입니다.
로고의 단일 핑크 컬러(#EC4899)를 11단계 스케일로 전개하여 5분 만에 tailwind.config.js 테마 등록 완료.
라이트 모드에서 `bg-brand-50 text-brand-900` 쓰던 카드를 다크 모드에서 `dark:bg-brand-950 dark:text-brand-50`으로 우아하게 대응.
기본 bg-brand-500, 마우스 오버 hover:bg-brand-600, 클릭 active:bg-brand-700으로 완벽한 상태 피드백 구현.
피그마 변수(Figma Variables)와 프론트엔드 Tailwind 팔레트를 1:1 명칭으로 일치시켜 핸드오프 소통 비용 80% 절감.
💡 디자인 시스템 아키텍트가 전하는 팔레트 운용 팁
노란색을 어둡게 만들 때 단순 명도만 내리면 똥색(탁한 갈색)이 됩니다. 어두워질수록 주황-빨강 쪽으로 색상환 각도를 살짝 비틀어주면 훨씬 맑고 고급스러운 셰이드가 완성됩니다.
theme.colors에 바로 넣으면 기본 Tailwind 색상(slate, red, blue 등)이 전부 덮어씌워져 사라집니다. 반드시 `theme: { extend: { colors: { brand: { ... } } } }` 안에 넣으세요.
RGB 값(59 130 246)만을 변수로 등록하면 `bg-brand-500/20`과 같은 Tailwind 알파 투명도 유틸리티를 자유자재로 결합할 수 있습니다.
500단계에서 600단계로 넘어갈 때 흰색 텍스트의 대비는 증가하지만 배경과의 대비는 변하므로 실제 화면 버튼의 가독성을 반드시 더블 체크하세요.
⚠️ 흔히 하는 실수 & 예방법
자주 묻는 질문 (FAQ)
사용자 및 전문가들이 가장 자주 묻는 핵심 질문과 명확한 해답입니다.
복사한 객체를 프로젝트 루트의 `tailwind.config.js` 파일 내 `module.exports = { theme: { extend: { colors: { brand: { ... } } } } }` 블록에 붙여넣기만 하면 `bg-brand-500`, `text-brand-900` 등의 클래스가 즉시 활성화됩니다.
Wide Responsive Banner
(CLS Prevention Active · Zero Shift)관련 도구 추천
색상 코드 실시간 변환기 및 조화 배색기
HEX, RGB, HSL, CMYK 상호 실시간 변환 및 보색, 유사색, 삼각배색 조화 팔레트 추천
웹 접근성 명암비(Contrast Ratio) 계산기
배경색과 텍스트 색상의 상대 휘도 명암비 계산 및 WCAG 2.1 AA/AAA 적합성 실시간 검증
CSS & Tailwind 그라데이션 에디터
선형(Linear) 및 원형(Radial) 그라데이션 시각적 조절 및 CSS/Tailwind 코드 원클릭 복사
박스 섀도우 & 글래스모피즘 생성기
부드러운 다중 레이어 그림자 및 반투명 유리 질감(Backdrop Blur) 시각적 생성 및 코드 복사