읽기 쉬운 디자인 토큰
각 단계에는 안정적인 역할과 CSS 변수 이름이 있습니다. 하이라이트, 기준색, 그림자를 손으로 옮기지 않고 탐색 단계에서 컴포넌트와 디자인 시스템으로 연결할 수 있습니다.
무료 브라우저 색상 도구
밝은색과 툰 그림자를 만드는 컬러 셰이드 생성기
기준색 하나에서 5·7·9단계 팔레트를 만드세요. 규칙적인 틴트와 셰이드 또는 표현력 있는 툰 명암을 선택하고 업로드 없이 구현용 값을 복사할 수 있습니다.
2026년 7월 23일 업데이트
컬러 셰이드 생성기
이 컬러 셰이드 생성기는 무엇을 만드나요?
유효한 3자리 또는 6자리 HEX를 원래 색이 정확히 중앙에 남는 단계형 팔레트로 바꿉니다. 클래식 모드는 흰색 쪽으로 섞어 틴트를, 검은색 쪽으로 섞어 셰이드를 만듭니다. 툰 모드는 색상·채도·밝기를 함께 바꿔 따뜻한 하이라이트와 차가운 그림자를 만듭니다. 모든 결과에는 HEX, RGB, HSB, 흰색·검은색과의 대비, 복사 버튼, CSS 사용자 지정 속성, 브라우저에서 만든 PNG가 포함됩니다.
기준색 하나로 얻는 세 가지 결과
이름 없는 장식 색상 줄이 아니라 역할이 분명한 시스템으로 활용하세요.
눈에 보이는 대비 확인
모든 색상에 흰색 및 검은색 대비 비율을 표시합니다. 일반 텍스트 AA, 큰 텍스트 AA, 기준 미달 라벨로 완성 화면을 시험하기 전 후보를 빠르게 줄일 수 있습니다.
카툰에 어울리는 명암
툰 모드는 밝아지거나 어두워질 때 색상을 조금 이동합니다. 캐릭터, 게임 UI, 배지, 플랫 일러스트를 위한 생동감 있는 색상군의 출발점이 됩니다.
HEX · RGB · HSB · WCAG
밝은색부터 그림자까지 생성
기준색, 방식, 단계 수를 고르면 브라우저에서 팔레트가 즉시 바뀝니다.
틴트 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- 흰색 텍스트
- 1.21:1AA 미달
- 검은색 텍스트
- 17.39:1일반 AA
--toon-shade-01틴트 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- 흰색 텍스트
- 1.48:1AA 미달
- 검은색 텍스트
- 14.15:1일반 AA
--toon-shade-02틴트 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- 흰색 텍스트
- 1.85:1AA 미달
- 검은색 텍스트
- 11.36:1일반 AA
--toon-shade-03기준색#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- 흰색 텍스트
- 2.34:1AA 미달
- 검은색 텍스트
- 8.97:1일반 AA
--toon-shade-04셰이드 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- 흰색 텍스트
- 4.22:1큰 글자 AA
- 검은색 텍스트
- 4.97:1일반 AA
--toon-shade-05셰이드 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- 흰색 텍스트
- 7.76:1일반 AA
- 검은색 텍스트
- 2.71:1AA 미달
--toon-shade-06셰이드 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- 흰색 텍스트
- 14.04:1일반 AA
- 검은색 텍스트
- 1.50:1AA 미달
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}실제로 쓸 수 있는 색 단계를 만드는 법
기준값, 간격, 의도가 명확해야 팔레트를 재사용할 수 있습니다. 만들거나 수정할 때 같은 짧은 흐름을 따르세요.
1. 근거 있는 HEX로 시작
압축된 화면을 보고 추측하지 말고 디자인 파일, 브랜드 토큰, 확인한 샘플 값을 사용합니다. 생성기는 그 HEX를 중앙에 그대로 보존하므로 주변 단계가 어떤 기준에서 나왔는지 추적할 수 있습니다.
2. 작업에 맞는 방식 선택
배경, 테두리, 차트, 상태에는 예측하기 쉬운 클래식이 적합합니다. 툰은 빛과 그림자를 위한 창작 휴리스틱입니다. 둘을 비교하고 색상 이동이 계층을 개선하지 않으면 단순한 방식을 유지하세요.
3. 실제 맥락에서 대비 확인
표시 비율은 빠른 필터로 사용합니다. 출시 전 실제 글자 크기와 굵기, 인접색, 포커스, 상호작용 상태를 시험하세요. 한 색상이 통과해도 전체 컴포넌트가 자동으로 접근 가능해지는 것은 아닙니다.
클래식 셰이드와 툰 셰이드 비교
두 방식 모두 기준색을 중앙에 보존하지만 변환 방법과 적합한 작업이 다릅니다.
| 방식 | 색 변화 | 적합한 용도 | 주의점 |
|---|---|---|---|
| 클래식 | RGB를 흰색 또는 검은색 쪽으로 선형 혼합 | UI 표면, 테두리, 차트, 중립 토큰 | 중간색이 회색 또는 기계적으로 보일 수 있음 |
| 툰 | HSB 밝기 곡선과 작은 색상·채도 이동 | 캐릭터, 게임 UI, 스티커, 플랫 일러스트 | 창작 출발점이며 공식 브랜드 규격이 아님 |
| 대비 라벨 | 순백·순흑과의 WCAG 상대 휘도 비율 | 각 색상의 전경 텍스트 1차 선별 | 실제 글꼴, 크기, 상태, 컴포넌트로 재검증 |
색 단계 계산 방식
홀수 단계는 정확한 중앙을 만듭니다. 5단계는 밝은색 둘, 원래 기준색 하나, 어두운색 둘이며 7단계와 9단계는 양쪽 간격을 더 촘촘하게 만듭니다. 클래식 틴트는 기준색의 RGB 채널을 255 쪽으로, 셰이드는 0 쪽으로 혼합합니다. 끝은 순백과 순흑 전에 멈춰 색의 정체성을 남깁니다. 기준색을 다시 계산하지 않으므로 HEX, RGB, HSB는 입력과 정확히 같습니다.
툰 모드는 다른 곡선을 씁니다. 하이라이트는 밝기를 높이고 채도를 조금 낮추며 따뜻한 방향으로 몇 도 이동합니다. 그림자는 밝기를 낮추고 채도를 조금 높이며 반대 방향으로 이동합니다. 중앙에서 멀수록 변화가 커집니다. 이는 물리적 조명 시뮬레이션이 아니라 공개된 디자인 휴리스틱입니다. 재질, 주변광, 반사색, 장면 구성에 따라 맞는 방향은 달라지므로 편집 가능한 초안으로 사용해야 합니다.
틴트, 톤, 셰이드는 서로 다릅니다
전통 색채 용어에서 흰색을 더한 색은 틴트, 검은색을 더한 색은 셰이드입니다. 회색을 더해 강도를 낮추는 색은 보통 톤이라고 합니다. 디지털 도구는 밝고 어두운 변형을 모두 shade라고 부르기도 해 뜻이 흐려집니다. 이 도구는 밝은 쪽을 틴트, 어두운 쪽을 셰이드로 표시하고 기준색을 사이에 둡니다. 클래식 방식은 별도의 회색 톤 행을 만들지 않습니다.
팔레트를 전달할 때 구분이 중요합니다. 방식, 기준색, 단계 수와 함께 저장된 ‘셰이드 2’는 재현할 수 있지만 ‘조금 더 어둡게’는 재현할 수 없습니다. 일관된 이름이 필요하면 CSS 블록 전체를 복사하세요. 호버나 비활성 상태에 채도를 낮춘 색이 필요하면 흰색-검은색 램프의 중간을 당연히 사용하지 말고 HSB 색상 선택기로 목적에 맞게 만드세요.
탁해지지 않는 카툰 그림자
모든 RGB 채널을 똑같이 줄여 그림자가 검게 죽는 것은 흔한 실수입니다. 기술적으로 같은 색상군을 유지해도 원본 그림의 에너지가 사라질 수 있습니다. 작은 색상과 채도 이동은 어두운 영역에도 색을 남깁니다. 툰 모드는 절제된 곡선으로 이 선택지를 보여 주고, 하이라이트와 깊은 그림자에 다른 성격을 주면서 가까운 단계는 쉽게 비교하게 합니다.
플랫 아트에는 적은 단계를 사용하세요. 5색이면 하이라이트, 밝은 면, 기준색, 그림자, 깊은 그림자를 다룰 수 있고 9색은 UI 토큰이나 점진적 렌더링에 적합합니다. 만들어졌다는 이유로 모두 쓰지 마세요. 최종 구성에 보이는 최소 역할만 선택하고 목적에 따라 이름을 붙인 뒤 실제 크기로 확인합니다. 큰 견본의 차이가 작은 아이콘과 얇은 외곽선에서는 사라질 수 있습니다.
WCAG 대비 비율을 올바르게 읽기
수치는 생성색과 순백 또는 순흑의 상대 휘도를 비교합니다. WCAG 2.2 AA에서 일반 텍스트는 최소 4.5:1, 큰 텍스트는 3:1이 필요하며 향상 기준은 일반 텍스트에 7:1을 사용합니다. 라벨은 약한 조합을 빠르게 제외하지만 실제 제품의 글자 크기, 굵기, 투명도, 그라데이션, 배경 이미지, 호버, 포커스 상태를 알 수는 없습니다.
더 높은 대비의 전경색은 첫 제안일 뿐입니다. 보통 확대 수준에서 실제 컴포넌트를 시험하고 필요하면 텍스트가 아닌 컨트롤도 포함하세요. HSB 밝기는 WCAG 휘도가 아닙니다. 같은 B 퍼센트라도 빨강, 초록, 파랑이 지각 휘도에 기여하는 비중이 달라 대비 비율은 크게 달라질 수 있습니다.
유지 관리 가능한 토큰으로 바꾸기
복사된 CSS는 밝은색에서 어두운색 순서의 번호 변수와 기준색 별칭을 포함합니다. surface-accent, badge-hover, character-shadow처럼 제품 역할에 맞게 이름을 바꾸세요. 의미 기반 이름은 색상 외형만 나타내는 이름보다 팔레트 개정에 강합니다. 원본 HEX, 방식, 단계 수, 날짜도 함께 남기면 다른 디자이너가 화면에서 다시 추출하지 않고 결정을 재현할 수 있습니다.
출시 전 밝은 테마와 어두운 테마, 대표 디스플레이, 인접색 조합에서 시험하세요. PNG는 검토와 전달에 편하지만 압축이나 색상 관리가 달라질 수 있으므로 텍스트 값을 구현 기준으로 유지합니다. 실제 용도에서 이웃한 두 단계가 구분되지 않으면 하나를 제거하거나 간격을 넓히세요. 역할이 명확한 작은 팔레트가 할 일 없는 큰 램프보다 관리하기 쉽습니다.
표준, 측정값, 방식에 대한 근거
재현 가능한 계산과 창작 판단을 구분합니다. 아래 1차 자료는 값 형식, 용어, 대비 기준을 설명합니다.
- CSS Color Module Level 4는 6자리 HEX를 3개의 8비트 sRGB 채널로 정의합니다. 채널마다 256개 값이 있어 알파 전 16,777,216개 RGB 조합을 표현합니다. W3C CSS Color Module Level 4
- WCAG 2.2 AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구하며 향상 기준은 일반 텍스트에 7:1을 사용합니다. W3C Web Content Accessibility Guidelines 2.2
- 클래식은 재현 가능한 RGB 보간입니다. 툰은 Toon Tone의 디자인 휴리스틱이며 조명 모델, 공식 브랜드 팔레트, 접근성 증명이 아닙니다. W3C colour theory reference
WCAG 2.2 원문:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
이 팔레트로 계속 작업하기
컬러 셰이드 생성기 FAQ
틴트와 셰이드의 차이는 무엇인가요?
흰색 쪽으로 섞은 색이 틴트, 검은색 쪽으로 섞은 색이 셰이드입니다. 톤은 보통 회색을 더합니다. 이 도구는 정확한 기준색 앞뒤에 각각 배치합니다.
원래 HEX가 보존되나요?
네. 3자리 HEX는 6자리로 확장되고 정규화된 값이 5·7·9단계 팔레트 중앙에 정확히 남습니다.
UI 디자인에는 어떤 모드가 좋나요?
예측 가능한 표면, 테두리, 상태는 클래식부터 시작하세요. 게임이나 일러스트가 따뜻한 빛과 차갑고 진한 그림자로 좋아진다면 툰도 비교합니다.
WCAG 라벨이 접근성을 보장하나요?
아닙니다. 순백 또는 순흑과의 비율만 계산합니다. 실제 전경, 배경, 글자 크기, 굵기, 상태, 컴포넌트 전체를 시험해야 합니다.
색상이 업로드되거나 저장되나요?
계정과 업로드가 필요 없습니다. 생성, 복사, 대비 계산, PNG 렌더링이 브라우저에서 실행되고 기기에서 로컬 다운로드를 만듭니다.