셰이드 생성기
셰이드는 색상에 검정을 섞은 결과로, 단계마다 점점 더 어두워집니다. 이 생성기는 HEX 기본 색상을 받아 점차 어두워지는 3~20단계(기본 10단계)의 셰이드를 만들고, 같은 기본 색상의 밝은 틴트도 함께 보여 줍니다. 디자인 시스템의 팔레트 단계(500 → 900), 버튼의 누름/활성 상태, 가독성을 유지하는 텍스트 색상, 그림자 오버레이 등에 유용합니다. 각 단계는 스와치로 표시되며 hex 값은 바로 복사할 수 있습니다.
셰이드 생성 원리
-
1
기본 색상을 선택하세요
색상 선택기를 사용하거나, 단계 모드에서는 페이지 URL로 hex 값을 전달하세요. 기본 색상은 틴트 범위와 셰이드 범위 사이에 있습니다.
-
2
단계 수를 선택하세요
3~20단계로, 기본값은 10단계입니다. 단계가 많을수록 부드러운 계단이 되고, 적을수록 변화 폭이 커집니다.
-
3
검정과 균등하게 섞으세요
각 단계는 빨강, 초록, 파랑 채널에 같은 계수를 곱합니다. 이는 검정(틴트에서는 흰색)을 균등한 간격으로 섞는 것과 같습니다. 10단계라면 각 단계는 약 9%씩 어두워지거나 밝아지며, 색상(색조)은 기본 색상과 완전히 같게 유지됩니다.
-
4
스케일을 확인하세요
각 스와치에 hex 값이 표시됩니다. 텍스트를 선택해 CSS, Tailwind 테마 또는 design tokens 파일에 복사하세요.
셰이드 · 틴트 · 톤의 차이
- 셰이드(shade): 색상 + 검정 → 더 어둡게.
- 틴트(tint): 색상 + 흰색 → 더 밝게.
- 톤(tone): 색상 + 회색 → 채도를 낮춤.
이 생성기는 같은 기본 색상에서 셰이드와 틴트를 함께 만듭니다. 틴트와 셰이드의 조합이 보통 디자인 시스템 팔레트를 이룹니다(예: 500이 기본인 brand-100부터 brand-900까지).
예시 스케일: #3B82F6 (Tailwind blue-500)
| 단계 | HEX | 혼합 | 디자인 시스템에서의 역할 |
|---|---|---|---|
| 0 | #3B82F6 | 기본 | 주요 브랜드 색상 (예: blue-500) |
| 1 | #316CCD | 검정 17% | 호버 상태 |
| 2 | #2756A4 | 검정 33% | 누름/활성 상태 (blue-600) |
| 3 | #1D417B | 검정 50% | blue-700 |
| 4 | #132B52 | 검정 67% | blue-800 |
| 5 | #091528 | 검정 83% | blue-900 |
이 표는 5단계 스케일을 보여 줍니다. 각 단계는 검정에 이르는 경로의 6분의 1씩 진행됩니다.
단계 계산 방식
이 도구는 각 단계에서 기본 색상의 빨강, 초록, 파랑 채널에 같은 계수를 곱합니다. 이는 셰이드 범위에서는 검정과, 틴트 범위에서는 흰색과 균등한 간격으로 섞는 것과 같습니다. 10단계라면 각 단계는 이전 단계보다 약 9%씩 어두워지거나 밝아집니다.
모든 채널이 같은 비율로 변하기 때문에 기본 색상의 색조가 정확히 유지됩니다. 파란 기본 색상은 파란색 그대로, 초록 기본 색상은 초록색 그대로입니다. 또한 검정과 섞으면 명도와 함께 채도도 낮아져서 어두운 단계가 빛나는 느낌이 아니라 자연스럽게 보입니다. 채도는 건드리지 않고 명도만 낮추면 어두운 색이 과포화 상태로 남습니다.
UI에서 셰이드 활용하기
- 버튼: 기본 상태에는 베이스 색, 호버에는 1~2단계 더 어둡게, 활성/누름 상태에는 2~3단계 더 어둡게.
- 본문 텍스트: 흰 바탕에서 가독성을 확보하려면 베이스보다 2~3단계 더 어둡게, 보조 텍스트에는 더 밝은 색을 사용합니다.
- 테두리/구분선: 배경보다 1~2단계 어둡게 하여 과하지 않으면서도 구분이 되도록 합니다.
- 그림자: 새로운 회색 대신, 가장 어두운 단계(또는 더 어두운 색)의 알파 값을 낮춰 사용합니다.
- 데이터 시각화: 연속형 스케일(값의 크기)에는 단일 색조의 셰이드를 사용하고, 발산형 스케일(양수 대 음수)에는 두 색조의 셰이드를 짝지어 사용합니다.
흔히 저지르는 실수
- 단계가 너무 많으면 구분되지 않는 띠로 뭉친다. 10단계 스케일이 잘 작동하는 이유는 각 단계가 약 9%씩 어두워지기 때문이며, 20단계에서는 차이가 미미해집니다. 강한 대비가 필요하다면 3~5단계가 좋습니다.
- 여기서는 색조가 어긋나지 않습니다: 각 단계가 모든 채널을 같은 비율로 바꾸므로 빨강은 빨강, 초록은 초록 그대로입니다. 색조 어긋남은 서로 다른 두 색상 사이를 보간할 때 생기는 것이며, 이 도구는 그런 작업을 하지 않습니다.
- 접근성 무시: 조화로워 보이는 셰이드도 배경과의 WCAG 대비 기준을 충족하지 못할 수 있습니다. 각 단계에서 반드시 대비를 확인하세요.
- 셰이드만으로 구성된 스케일은 어두운 배경에서 답답하게 느껴진다. 쓰기 편한 다크 모드를 만들려면 틴트 스케일과 함께 사용하세요.
자주 묻는 질문
디자인 시스템에서는 셰이드 5단계 + 틴트 5단계(기본 색상을 중심으로 총 10단계)가 일반적인 관례입니다. 호버, 활성 같은 UI 상태 색상만 빠르게 만들려면 3단계로 충분합니다.
이 도구가 쓰는 균등 혼합은 각 단계를 기본 색상과 검정 사이의 직선 위에 유지하므로 중간 단계도 깨끗합니다. 중간이 탁한 경우는 보통 서로 다른 두 색상 사이를 보간하는 도구를 쓰거나, 채도는 줄이지 않고 명도만 낮췄기 때문입니다.
어두운 색은 검정이 되기 전까지 더 어두워질 여지가 적어, 짙은 보라를 기본으로 하면 스케일이 무너지기 전까지 2~3단계만 구분됩니다. 더 풍부한 스케일을 원한다면 중간 밝기의 기본 색상을 고르세요.
의도는 비슷하지만, 검정과 섞으면 명도와 함께 채도도 낮아져서 더 자연스럽게 보이는 경우가 많습니다. 명도만 낮추면 채도가 높게 유지되어 어두운 색이 과포화될 수 있습니다.
관련 도구
ASCII 표 참조
NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.
키보드 단축키 참고표
macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.
HTML 문자 참조
HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.