색상 명암 팔레트
기준 색 하나로 밝은 톤부터 어두운 톤까지, 버튼 상태값까지 한 번에.
색을 고르면 9단계가 바로 다시 계산됨
색상 스케일
9단계 · 500이 기준색타일 클릭 시 HEX 복사 · 100(가장 밝음) → 900(가장 어두움)
최근 기준색
이 브라우저에만 저장됨 · 누르면 바로 불러옴
설명
색상 피커로 기준 색을 고르면 흰색·검정과 단계별로 섞어 밝은 톤부터 어두운 톤까지 9단계(100~900) 팔레트를 만듭니다. 가운데 500 단계가 고른 색 그대로이며, 색을 클릭하면 HEX 코드가 복사됩니다. CSS 변수·Tailwind 코드 복사, 링크 복사, 팔레트 이미지 저장도 지원합니다.
관련 도구
웹이나 앱 디자인에서 버튼의 기본 색, 호버 색, 비활성 색처럼 하나의 색에서 다양한 밝기 단계가 필요한 경우가 많습니다. 색상 명암 팔레트 도구는 기준 색 하나를 입력하면 더 밝은 톤(Tint)과 더 어두운 톤(Shade)을 단계별로 자동 생성해 줍니다. 일관된 색 시스템을 빠르게 구성해야 하는 UI 디자이너와 프론트엔드 개발자 모두에게 실질적으로 쓰이는 도구입니다.
사용 방법
상단 카드의 색상 피커를 눌러 기준 색을 선택합니다. 도구가 밝기 10~90% 구간을 나눠 Tint(흰색 방향) 4단계와 Shade(검정 방향) 4단계를 자동으로 계산해 나열하고, 가운데 500 단계는 선택한 색 그대로입니다. 각 단계의 색상 칩을 클릭하면 HEX 값이 복사됩니다. Tailwind CSS나 Material Design의 색상 팔레트처럼 100~900 단계 형태로 쓰려면 'CSS 변수 복사'나 'Tailwind 코드 복사' 버튼으로 9단계 전체를 한 번에 가져가면 됩니다.
이럴 때 유용해요
버튼 컴포넌트를 만들 때 기본(default), 호버(hover), 눌림(active), 비활성(disabled) 상태에 같은 색 계열 다른 명도 값을 사용하면 일관성 있는 UI가 됩니다. 다크 모드를 지원하는 서비스라면 라이트 모드의 기준 색과 다크 모드에서의 톤을 이 팔레트로 한눈에 정리할 수 있습니다. 또한 카드 배경, 구분선, 아이콘 색 등 동일 색 계열에서 미묘하게 다른 명도가 필요한 경우 눈대중이 아닌 수치 기반으로 정확히 뽑을 수 있습니다.
자주 하는 실수
Tint와 Shade를 단순히 '밝다/어둡다'로만 이해해 극단적인 단계(거의 흰색이나 거의 검정)를 실제 UI에 그대로 쓰면 텍스트 가독성이 나빠집니다. 밝은 배경 위 밝은 텍스트 조합이 대표적인 실수입니다. 이 도구로 팔레트를 뽑은 후, 텍스트와 배경의 명도 대비가 WCAG 2.1 기준 최소 4.5:1 이상인지 별도로 확인하는 과정이 필요합니다. 또한 HSL 색 공간에서 명도(L)만 조정하는 방식은 채도가 자동으로 유지되기 때문에, 극단에 가까운 단계에서는 원래 색상의 느낌이 달라질 수 있습니다.
자주 묻는 질문
Tint와 Shade는 정확히 어떻게 계산되나요?
Tailwind CSS의 색상 팔레트처럼 100~900 단계로 쓸 수 있나요?
몇 단계까지 생성되나요?
생성된 색이 원래 색과 색조가 달라 보이는 경우가 있나요?
다크 모드용 팔레트를 만들려면 어떻게 하나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
색상 명암 팔레트란
기준 색상 하나를 입력하면 그보다 밝은 톤(틴트)과 어두운 톤(셰이드)을 여러 단계로 자동 생성하는 도구입니다. 예를 들어 브랜드 메인 컬러 #3B82F6 하나만 정해두면, 버튼 기본·호버·눌림 상태, 배경, 테두리, 비활성 상태에 쓸 파생 색을 한 번에 뽑아낼 수 있습니다. 색 하나하나를 눈대중으로 찍어보지 않아도 균일한 간격의 명암 계열이 나오는 것이 핵심입니다.
사용 방법
상단 카드의 색상 선택기로 기준 색을 지정합니다. 그러면 밝은 단계 4개, 기준색, 어두운 단계 4개까지 총 9단계가 한 줄로 표시되고, 각 색 블록을 클릭하면 해당 HEX 값이 복사됩니다. 단계 수와 밝기 간격은 100~900 스케일로 고정돼 있어 따로 설정할 필요가 없습니다. 9단계를 한꺼번에 쓰려면 'CSS 변수 복사'·'Tailwind 코드 복사' 버튼을 누르면 되고, '링크 복사'로 같은 팔레트를 여는 주소를, '이미지 저장'으로 팔레트 PNG를 내려받을 수 있습니다.
작동 원리
밝은 톤은 기준색을 흰색 쪽으로, 어두운 톤은 검정 쪽으로 일정 비율씩 섞어 계산합니다. 가장 단순한 방식은 각 R·G·B 채널을 흰색(255) 또는 검정(0)과 선형 보간하는 것입니다. 예컨대 밝게 20% = 새값 = 원값 + (255 − 원값) × 0.2, 어둡게 20% = 새값 = 원값 × 0.8 로 채널마다 계산합니다. HSL의 명도(L) 값을 단계별로 올리고 내려 만드는 방식도 있는데, 이 경우 색상(H)과 채도(S)는 유지되므로 색감이 더 일관되게 유지되는 경향이 있습니다. 어느 방식이든 각 채널을 0~255 범위로 반올림해 최종 HEX로 되돌립니다. 이 도구는 앞쪽의 RGB 선형 보간 방식을 사용합니다.
활용 상황
| 상황 | 이 도구의 쓰임 |
|---|---|
| 버튼 상태 색 | 기본색에서 한 단계 어둡게=호버, 두 단계 어둡게=클릭(active) |
| 디자인 토큰 | 100·200·…·900 식 명도 스케일을 한 색에서 생성 |
| 차트·그래프 | 같은 계열 명암으로 단일 색 그라데이션 막대·영역 구성 |
| 다크/라이트 대응 | 밝은 배경엔 어두운 셰이드, 어두운 배경엔 밝은 틴트 매칭 |
실전 팁
기준색은 계열의 양 끝이 아니라 중간쯤(중간 명도)에 두면 위아래로 고르게 단계가 나옵니다. 이미 아주 밝거나 아주 어두운 색을 기준으로 넣으면 한쪽 방향으로는 거의 변화가 안 생기기 때문입니다. 또한 명암 단계는 색상 대비를 자동으로 보장하지 않으므로, 글자색과 배경색으로 쓸 두 단계를 골랐다면 별도의 명도대비(WCAG 대비비) 확인이 필요합니다. 노란색·청록색처럼 원래 밝은 색은 어둡게 내릴 때 색감이 탁해지기 쉬우니, 여러 단계를 비교해 실제로 어울리는 것만 채택하세요.
자주 묻는 질문
틴트(밝은 톤)와 셰이드(어두운 톤)는 무엇이 다른가요?
틴트는 기준색에 흰색을 섞어 밝게 만든 색, 셰이드는 검정을 섞어 어둡게 만든 색입니다. 이 도구는 한 기준색에서 양방향을 동시에 만들어 하나의 명암 계열로 보여줍니다.
단계 수는 몇 개가 적당한가요?
이 도구는 100~900의 9단계 고정입니다. 버튼 상태만 필요하면 그중 500(기본)·600(호버)·700(눌림)처럼 몇 개만 골라 쓰고, 디자인 시스템의 명도 스케일을 만들 때는 9단계를 그대로 쓰면 됩니다.
같은 기준색인데 다른 도구와 결과 HEX가 조금 달라요.
흰검을 섞는 선형 보간 방식과 HSL 명도를 조절하는 방식은 계산 경로가 달라 중간 단계 값이 다를 수 있습니다. 둘 다 유효한 방식이며, 필요한 색감에 맞는 결과를 고르면 됩니다.
뽑은 색이 서로 구분이 잘 안 돼요.
인접한 두 단계는 밝기 차이가 10%뿐이라 나란히 두면 비슷해 보입니다. 100·300·500·700·900처럼 한 칸씩 건너뛰어 고르면 단계 차이가 뚜렷해집니다.