전체 도구 ↗

색상 명암 팔레트

기준 색 하나로 밝은 톤부터 어두운 톤까지, 버튼 상태값까지 한 번에.

색을 고르면 9단계가 바로 다시 계산됨

#2563EB

색상 스케일

9단계 · 500이 기준색

타일 클릭 시 HEX 복사 · 100(가장 밝음) → 900(가장 어두움)

명도 대비 검사기로 이동 →

설명

색상 피커로 기준 색을 고르면 흰색·검정과 단계별로 섞어 밝은 톤부터 어두운 톤까지 9단계(100~900) 팔레트를 만듭니다. 가운데 500 단계가 고른 색 그대로이며, 색을 클릭하면 HEX 코드가 복사됩니다. CSS 변수·Tailwind 코드 복사, 링크 복사, 팔레트 이미지 저장도 지원합니다.

오늘의 타로 한 장, 30초타로타로 · 78장 카드 · 가입 없이 무료카드 뽑기

관련 도구

그라데이션 생성기그림자 생성기색상 팔레트명도대비 검사HEX·RGB·HSL 변환랜덤 색상 생성색상 혼합기명도 대비 검사기(WCAG)

웹이나 앱 디자인에서 버튼의 기본 색, 호버 색, 비활성 색처럼 하나의 색에서 다양한 밝기 단계가 필요한 경우가 많습니다. 색상 명암 팔레트 도구는 기준 색 하나를 입력하면 더 밝은 톤(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는 정확히 어떻게 계산되나요?
Tint는 기준 색에 흰색(#FFFFFF)을 일정 비율씩 섞어 밝기를 높이고, Shade는 검정(#000000)을 섞어 어둡게 만듭니다. 이 도구는 RGB 각 채널을 흰색·검정과 선형 보간하는 방식으로, 밝기 10~90% 구간을 10%씩 나눠 9단계를 계산합니다.
Tailwind CSS의 색상 팔레트처럼 100~900 단계로 쓸 수 있나요?
네. 생성된 9단계가 이미 100(가장 밝음)~900(가장 어두움)으로 표시되며, 'CSS 변수 복사' 버튼은 --color-100~--color-900 형태로, 'Tailwind 코드 복사' 버튼은 colors 설정에 붙여 넣을 형태로 9단계를 한 번에 복사해 줍니다.
몇 단계까지 생성되나요?
이 도구는 항상 9단계(100~900)를 생성합니다. 가운데 500 단계가 선택한 기준 색과 정확히 같고, 위로 밝은 Tint 4단계, 아래로 어두운 Shade 4단계가 붙습니다. 단계 수는 고정이라 따로 설정하지 않아도 됩니다.
생성된 색이 원래 색과 색조가 달라 보이는 경우가 있나요?
있습니다. 특히 파랑·보라 계열에서 밝게 할수록 라벤더나 하늘색처럼 색상 자체가 달라 보이는 경우가 있습니다. 이는 RGB 혼합의 특성으로, HSL 색 공간에서 L(밝기)만 변경하면 색조 왜곡을 줄일 수 있습니다.
다크 모드용 팔레트를 만들려면 어떻게 하나요?
라이트 모드 기준 색의 Shade 방향 중간~어두운 단계가 다크 모드 배경색으로 적합합니다. 텍스트는 반대로 Tint 방향의 밝은 단계를 사용하고, 명도 대비를 확인하며 조합을 정하는 것을 권장합니다.
틴트(밝은 톤)와 셰이드(어두운 톤)는 무엇이 다른가요?
틴트는 기준색에 흰색을 섞어 밝게 만든 색, 셰이드는 검정을 섞어 어둡게 만든 색입니다. 이 도구는 한 기준색에서 양방향을 동시에 만들어 하나의 명암 계열로 보여줍니다.
단계 수는 몇 개가 적당한가요?
이 도구는 100~900의 9단계 고정입니다. 버튼 상태만 필요하면 그중 500(기본)·600(호버)·700(눌림)처럼 몇 개만 골라 쓰고, 디자인 시스템의 명도 스케일을 만들 때는 9단계를 그대로 쓰면 됩니다.
같은 기준색인데 다른 도구와 결과 HEX가 조금 달라요.
흰검을 섞는 선형 보간 방식과 HSL 명도를 조절하는 방식은 계산 경로가 달라 중간 단계 값이 다를 수 있습니다. 둘 다 유효한 방식이며, 필요한 색감에 맞는 결과를 고르면 됩니다.
뽑은 색이 서로 구분이 잘 안 돼요.
인접한 두 단계는 밝기 차이가 10%뿐이라 나란히 두면 비슷해 보입니다. 100·300·500·700·900처럼 한 칸씩 건너뛰어 고르면 단계 차이가 뚜렷해집니다.

개인정보처리방침

모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의는 문의 페이지를 이용해 주세요.

색상 명암 팔레트란

기준 색상 하나를 입력하면 그보다 밝은 톤(틴트)과 어두운 톤(셰이드)을 여러 단계로 자동 생성하는 도구입니다. 예를 들어 브랜드 메인 컬러 #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 대비비) 확인이 필요합니다. 노란색·청록색처럼 원래 밝은 색은 어둡게 내릴 때 색감이 탁해지기 쉬우니, 여러 단계를 비교해 실제로 어울리는 것만 채택하세요.