색상 팔레트 도구

기준 색 하나로 조화 배색과 50~900 밝기 단계를 만들고, 글자 대비와 색각 구별까지 확인합니다

색상 팔레트 도구는 브랜드 색이나 마음에 둔 색 하나에서 출발합니다. 색상환에서 그 색의 위치를 정한 뒤 단색·유사색·보색·분할 보색·삼각·사각 가운데 하나의 규칙으로 함께 쓸 핵심 색을 고르고, 핵심 색마다 가장 밝은 50부터 가장 어두운 900까지 열 칸의 밝기 단계를 만듭니다. 배경·테두리·버튼·글자처럼 화면에 실제로 필요한 색은 대개 이 단계에서 나옵니다.

고른 칸은 바로 흰 글자·검은 글자와의 대비를 WCAG 2.2 기준으로 판정하고, 같은 줄에서 그 칸 위에 글자로 올릴 수 있는 단계를 찾아 줍니다. 핵심 색들은 제1·2·3형 색각과 흑백 인쇄로 바꿔 보았을 때 서로 얼마나 가까워지는지도 숫자로 보여 줍니다. 계산은 모두 이 브라우저 안에서 하고, 색은 HEX와 CSS 변수로 복사합니다.

언제 쓰나

브랜드 색 하나만 정해졌을 때: 로고 색에 어울리는 보조 색과 강조 색을 규칙으로 정하고, 각 색의 밝은 배경용 단계와 어두운 글자용 단계를 한꺼번에 얻습니다.
버튼·배지·알림 상자의 단계가 필요할 때: 같은 색 계열의 50 배경, 200 테두리, 600 글자처럼 역할별 색을 골라 CSS 변수로 옮깁니다. 칸마다 흰 글자와 검은 글자 중 무엇이 잘 읽히는지 글자색으로 바로 보입니다.
차트·지도 범례 색을 고를 때: 삼각·사각 규칙으로 서로 멀리 떨어진 색을 고르고, 색각별로 보기에서 '가까워짐'이 뜨는 조합은 무늬나 이름표를 더할지 정합니다.
보색·유사색을 확인할 때: 미술·디자인 과제에서 어떤 색의 보색이나 이웃 색을 찾을 때 씁니다. 다만 물감 색상환(RYB)과는 기준이 달라 결과가 다를 수 있으니 아래 '색상환이 둘인 이유'를 함께 보세요.

사용 방법

기준 색 넣기: 색 칸에 #2E6BE6, rgb(46 107 230), hsl(220 79% 54%), oklch(56% 0.2 262), royalblue처럼 어떤 형식으로든 넣습니다. 왼쪽 네모를 누르면 색 고르기 창이 열리고, 예시 색이나 무작위 버튼으로 시작해도 됩니다.
색상환에서 다듬기: 큰 점을 끌면 색상 각(둘레 방향)과 채도(가운데에서 떨어진 거리)가 바뀌고, 아래 막대로 밝기를 바꿉니다. 색상환에 초점을 둔 뒤 좌우 화살표는 색상 각을 1°씩, 위아래 화살표는 채도를 1%씩 옮깁니다(Shift를 누르면 10배).
조화 규칙과 색상환 종류 고르기: 여섯 규칙 가운데 하나를 누르면 작은 점들이 색상환 위를 미끄러지며 새 자리로 옮겨 가고, 맨 위의 핵심 색이 바뀝니다. 색상환은 HSL과 OKLCH 가운데 고릅니다.
밝기 단계에서 필요한 칸 고르기: 표의 칸을 누르면 아래 '선택한 색'에 코드·대비·같은 줄 글자 후보가 나옵니다. 코드 줄을 누르면 그 값이 복사되고, '이 색을 기준으로'를 누르면 그 칸에서 다시 팔레트를 만듭니다.
색각별로 확인하고 내보내기: '가까워짐'이나 '구별 안 됨'이 뜬 줄이 있으면 밝기 차이를 더 벌리거나 다른 규칙을 고릅니다. 마지막으로 HEX 복사, CSS 변수 복사(단계 전체), 링크 복사로 옮깁니다.

조화 규칙 여섯 가지

규칙은 기준 색에서 색상 각을 몇 도 돌릴지를 정합니다. 기준 색은 늘 그대로 두고, 나머지 핵심 색만 계산합니다. 단색은 각을 돌리지 않고 채도만 줄입니다.

규칙	기준에서 돌리는 각도	색 수	어울리는 쓰임
단색	0°, 채도 1·0.55·0.2배	3	차분한 화면, 한 계열로 묶는 문서·카드
유사색	0°, −30°, +30°	3	부드러운 브랜드 톤, 사진과 어울리는 배경
보색	0°, 180°	2	주 버튼과 강조처럼 대비가 필요한 한 쌍
분할 보색	0°, +150°, −150°	3	보색의 힘은 남기고 덜 부딪치게 할 때
삼각	0°, +120°, −120°	3	일러스트, 세 갈래 구분이 필요한 차트
사각	0°, +90°, 180°, −90°	4	네 범주 범례, 구역이 많은 안내도

예전 판은 규칙마다 밝기를 조금씩 바꾼 변형을 섞어 늘 여섯 칸을 채웠습니다. 새 판은 규칙이 정한 핵심 색만 맨 위에 두고, 밝기 변형은 아래 단계 표로 따로 나눴습니다. 어떤 색이 규칙에서 나온 색이고 어떤 색이 같은 색의 밝기 변형인지 헷갈리지 않게 하기 위해서입니다.

색상환이 둘인 이유: HSL과 OKLCH

HSL 색상환은 기준 색의 HSL 채도와 밝기를 그대로 두고 색상 각만 돌립니다. 예전 판과 대부분의 그래픽 도구가 이 방식이라, 다른 도구에서 찾은 보색과 각도가 같습니다. 단점은 HSL의 숫자가 사람이 느끼는 밝기와 맞지 않는다는 점입니다. CSS Color 4는 HSL에서 밝기가 같아도 노랑이 파랑보다 훨씬 밝아 보이고, 색상 각 30° 차이도 220°와 250° 사이는 비슷해 보이지만 50°와 80° 사이는 크게 달라 보인다고 설명합니다.

OKLCH 색상환은 사람이 느끼는 밝기(L)와 채도(C)를 기준 색과 같게 두고 색상 각만 돌립니다. 그래서 핵심 색들의 밝기가 고르게 맞고, 글자 대비도 비슷한 수준에서 움직입니다. 대신 같은 밝기에서 화면(sRGB)이 낼 수 없는 색이 생기는데, 이때는 밝기와 색상 각은 두고 채도만 줄입니다. CSS Color 4 §14의 색역 맞춤이 채도를 줄여 범위 안으로 들이는 것과 같은 방향입니다. 색상환의 빗금 부분이 바로 그 밝기에서 낼 수 없는 영역입니다.

기준 색	HSL 보색	OKLCH 보색	읽는 법
#2E6BE6 (L 0.560)	#E6A92E (L 0.773)	#966D00 (L 0.561)	HSL 보색은 훨씬 밝은 주황, OKLCH 보색은 같은 밝기의 황토색
#E53935 (L 0.608)	#35E1E5 (L 0.830)	#0094A2 (L 0.609)	HSL 보색은 밝은 하늘색, OKLCH는 같은 밝기의 청록
#F9A825 (L 0.792)	#2576F9 (L 0.595)	#88BFFF (L 0.791)	밝은 노랑의 보색은 HSL에서 어두워지고, OKLCH에서는 밝은 하늘색
#00897B (L 0.566)	#89000E (L 0.397)	#A65B71 (L 0.565)	HSL 보색은 짙은 적갈색, OKLCH는 같은 밝기의 장밋빛

L은 OKLCH 밝기(0~1)입니다. 눈에 띄는 대비를 원하면 HSL 쪽이, 밝기가 고른 차분한 조합을 원하면 OKLCH 쪽이 출발점으로 낫습니다. 미술 시간에 쓰는 물감 색상환(RYB)은 빨강·노랑·파랑을 기본으로 나눈 바퀴이고, 이 도구의 두 색상환은 화면 색(RGB)에서 나온 바퀴입니다. 바퀴를 나누는 기본색이 달라 같은 색도 놓이는 자리가 다르므로, 정반대 자리의 보색도 다르게 나옵니다. 어느 쪽이 틀린 것이 아니라 기준이 다릅니다.

밝기 단계를 만드는 방법

단계는 OKLCH 밝기 L을 0.97(50)에서 0.25(900)까지 0.08씩 낮춘 열 자리입니다. 기준 색보다 밝은 칸은 OKLab에서 흰색 쪽으로, 어두운 칸은 검은색 쪽으로 곧게 섞어 밝기를 목표값에 맞춥니다. 색상 각은 그대로이고 채도는 흰색·검은색에 가까워질수록 같은 비율로 줄어들어, 아주 밝은 칸이 형광색이 되지 않습니다. CSS Color 5의 color-mix() 기본 공간이 Oklab이므로 color-mix(in oklab, 기준색, white n%)와 같은 계산입니다.

핵심 색은 L이 가장 가까운 칸에 그 색 그대로 들어가고, 표에서 점(•)으로 표시됩니다. 단계 번호는 밝기 자리라서 원래 밝은 노랑(#F9A825, L 0.792)은 200 칸에, 짙은 남색은 700~800 칸에 들어갑니다. 다른 디자인 시스템에서 '노랑 500'이 밝은 노랑인 것과 달리, 이 표에서 노랑 줄의 500은 갈색 쪽입니다. 같은 번호끼리 밝기가 같아 서로 다른 색을 섞어 쓰기 쉽게 하려는 선택입니다.

단계	목표 L	회색(#808080) 줄	흰 글자	검은 글자
50	0.97	#F5F5F5	1.0:1	19.2:1
100	0.89	#DBDBDB	1.3:1	15.1:1
200	0.81	#C1C1C1	1.8:1	11.6:1
300	0.73	#A8A8A8	2.3:1	8.8:1
400	0.65	#8F8F8F	3.2:1	6.4:1
500	0.57	#808080 (기준)	3.9:1	5.3:1
600	0.49	#606060	6.2:1	3.3:1
700	0.41	#4A4A4A	8.8:1	2.3:1
800	0.33	#353535	12.2:1	1.7:1
900	0.25	#222222	15.9:1	1.3:1

회색 줄에서는 600부터 흰 글자가 4.5:1을 넘고, 500까지는 검은 글자가 4.5:1을 넘습니다. 유채색 줄도 대체로 이 근처에서 바뀌지만, 같은 L이라도 색마다 WCAG 휘도가 달라 경계가 한 칸쯤 움직입니다. 표의 칸 글자가 흰색에서 검은색으로 바뀌는 자리가 그 경계입니다.

글자 대비 읽는 법

기준: WCAG 2.2는 일반 글자에 4.5:1(1.4.3, AA), 큰 글자(18pt 이상 또는 굵은 14pt 이상)에 3:1, 더 엄격한 1.4.6(AAA)에 7:1을 요구합니다. 견본의 'AA·AAA·큰 글자만·미달'이 이 구간입니다.
반올림하지 않음: Understanding SC 1.4.3은 계산한 비율을 반올림하지 않는다고 밝힙니다(4.499:1은 4.5:1 미달). 그래서 이 도구는 소수 첫째 자리에서 내려 보여 주고, 보이는 값으로 판정합니다.
흰색이나 검은색 중 하나는 늘 통과: 어떤 색이든 흰 글자와 검은 글자 중 대비가 큰 쪽은 4.58:1 아래로 내려가지 않습니다. 두 대비가 같아지는 휘도(약 0.179)에서 둘 다 4.58:1이기 때문입니다. 그래서 표의 칸 글자색은 언제나 4.5:1을 넘는 쪽입니다.
같은 줄 글자 후보: 고른 칸에서 위아래로 가장 가까운, 대비 4.5:1 이상인 단계를 찾습니다. 첫 화면 기준 줄에서 50(#F0F5FF) 배경에는 600(#2558C0) 글자가 5.9:1, 100에는 600이 4.6:1입니다. 기준 색 자체(500)는 같은 줄 어느 칸과도 4.5:1에 닿지 않아 흰 글자(4.8:1)를 쓰는 편이 맞습니다.

색각별로 보기와 '가까워짐' 표시

핵심 색을 제1형(적색맹), 제2형(녹색맹), 제3형(청색맹)으로 볼 때와 흑백으로 인쇄할 때의 색으로 바꾸어 나란히 보여 줍니다. 제1·2형은 Machado 외(2009)의 모델, 제3형은 Brettel 외(1997)의 방식으로 그리며, 강도는 해당 원뿔세포가 없는 이색형(100%)입니다. 흑백은 WCAG 휘도를 회색으로 옮긴 값입니다.

각 줄 오른쪽의 숫자는 그 보기에서 가장 가까운 두 핵심 색의 OKLab 거리(ΔEOK)입니다. CSS Color 4는 OkLCh 차이 0.02를 겨우 알아챌 수 있는 차이(JND) 하나로 둡니다. 이 도구는 0.02 미만이면 '구별 안 됨', 원래 색에서 잰 거리의 절반 아래로 줄면 '가까워짐'으로 표시합니다. 절반 기준은 표준이 아니라 이 도구가 정한 경고선입니다.

조합	보기	가장 가까운 두 색	표시
첫 화면 분할 보색(#2E6BE6·#E64D2E·#C7E62E)	원래 색	0.36	기준 차이
같은 조합	제2형	0.24 (66%)	구별됨
같은 조합	흑백 인쇄	0.05 (15%)	가까워짐: 파랑과 주홍의 밝기가 비슷함
빨강·초록 버튼(#D9534F·#5CB85C)	제2형	0.07 (25%)	가까워짐

WCAG 2.2 1.4.1은 색만으로 정보를 전달하지 말라고 요구합니다. '가까워짐'이 뜨지 않아도 상태·범주를 색으로만 나누지 말고 글자, 아이콘, 무늬를 함께 쓰세요. 흑백 줄에서 가까워진다면 두 색의 밝기를 벌리는 것이 가장 빠른 해결입니다.

첫 화면 예시 풀이

첫 화면은 기준 색 #2E6BE6, 분할 보색, HSL 색상환입니다. HSL 색상 각 220°에서 +150°(10°)와 −150°(70°)를 돌려 채도 79%·밝기 54%를 그대로 둔 두 색이 나옵니다.

핵심 색	HEX	OKLCH L	단계 자리	흰 글자	검은 글자
기준	#2E6BE6	0.560	500	4.8:1	4.3:1
+150°	#E64D2E	0.629	400	3.8:1	5.4:1
−150°	#C7E62E	0.873	100	1.4:1	14.7:1

HSL 밝기는 셋 다 54%인데 OKLCH 밝기는 0.560·0.629·0.873으로 벌어지고, 그래서 연두는 100 칸, 주홍은 400 칸에 들어갑니다. 연두 위에는 검은 글자만, 파랑 위에는 흰 글자만 일반 글자 기준을 넘습니다. 같은 기준 색으로 OKLCH 색상환을 고르면 세 색의 밝기가 0.56 근처로 모이는 대신 색이 차분해집니다.

자주 틀리는 경우

도구마다 보색이 다르다고 의심함: 물감 색상환(RYB), 화면 색상환(HSL), 지각 색상환(OKLCH)은 같은 색의 보색이 서로 다릅니다. 어느 바퀴를 기준으로 했는지부터 확인하세요.
HSL 밝기가 같으면 밝기가 같다고 봄: 첫 화면 예시처럼 HSL 54% 세 색의 실제 밝기는 크게 다릅니다. 글자를 올릴 색은 대비 숫자나 OKLCH L로 판단하세요.
핵심 색을 그대로 글자색으로 씀: 채도 높은 핵심 색은 흰 배경에서도 4.5:1에 못 미치는 경우가 많습니다. 글자에는 같은 줄의 600~900 칸을 쓰는 편이 안전합니다.
단계 번호를 다른 디자인 시스템과 맞추려 함: 이 표의 번호는 밝기 자리입니다. 노랑 500이 갈색 쪽으로 나오는 것은 오류가 아니며, 밝은 노랑은 200 칸에 있습니다.
무채색으로 조화 규칙을 돌림: 회색·흰색·검은색은 색상 각이 없어 어떤 규칙을 골라도 같은 회색이 나옵니다. 색상환의 점을 바깥으로 끌어 채도를 조금이라도 주세요. 흰색·검은색은 밝기가 끝(100%·0%)이라 끌어도 그대로이므로, 밝기 막대를 먼저 가운데 쪽으로 옮기세요.
웹 안전색에 맞추려 함: 웹 안전색은 빨강·초록·파랑을 각각 00·33·66·99·CC·FF 여섯 단계로만 조합한 216색으로, 표시할 수 있는 색이 적던 예전 화면 환경을 위한 기준입니다. 지금의 웹 화면에서는 맞출 필요가 없고, 제한된 팔레트를 쓰는 오래된 시스템에 맞출 때만 참고하세요.

한계와 주의

조화 규칙은 색상 각의 관계를 정리할 뿐, 결과가 아름답다는 보장은 아닙니다. 규칙은 출발점이고, 브랜드 의미와 쓰임에 맞게 고르는 일은 사람의 몫입니다.
색은 sRGB로 계산하고 HEX로 내보냅니다. 모니터마다 같은 HEX도 다르게 보일 수 있고, 인쇄용 CMYK 값은 이 도구가 만들지 않습니다.
색각 시뮬레이션은 평균적인 이색형을 모델로 그린 근사입니다. 실제로 보이는 정도는 사람마다 다르고, 약한 색약은 이보다 차이가 덜 줄어듭니다.
대비 판정은 글자색과 배경색 두 가지만 봅니다. 글꼴 굵기, 크기, 배경 무늬, 반투명 효과는 직접 확인해야 합니다.
입력의 투명도(알파)는 빼고 불투명한 색으로 계산합니다. 링크에는 색·규칙·색상환 종류만 담기고, 고른 칸은 담기지 않습니다.

기준: 2026-10-20에 CSS Color 4(2025-08-18 판), CSS Color 5(2026-09-13 판), WCAG 2.2 문구를 확인했습니다. 본문 표의 숫자는 이 도구의 계산 코어로 다시 계산한 값입니다.

출처

01W3C: CSS Color Module Level 4 (CRD 2025-08-18)§7 HSL과 색상 각의 비균일(220°/250°, 50°/80° 예), §9.2 Oklab·OkLCh(파랑 L 0.452·노랑 0.968), §14 색역 맞춤과 JND 0.02
02W3C: CSS Color Module Level 5 (WD 2026-09-13)§3 color-mix(), 섞는 공간을 정하지 않으면 Oklab
03Björn Ottosson: A perceptual color space for image processing (2020)sRGB ↔ Oklab 변환 행렬
04W3C: WCAG 2.21.4.1 색만으로 전달하지 않기, 1.4.3 대비 4.5:1(큰 글자 3:1), 1.4.6 7:1, 대비 비율 식
05W3C: Understanding SC 1.4.3 Contrast (Minimum)비율은 반올림하지 않음(4.499:1은 4.5:1 미달), 큰 글자 18pt·굵게 14pt
06Machado GM, Oliveira MM, Fernandes LAF. A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG 2009;15(6):1291–1298제1·2형 시뮬레이션 행렬
07DaltonLens: Understanding LMS-based Color Blindness Simulations (2021)Brettel 외 1997 방식의 제3형 시뮬레이션(기준 파장 485·660 nm)
08Adobe Express: Color wheel explained색상환은 두 종류: RYB는 화가가 물감을 섞을 때, RGB는 컴퓨터·TV 화면에서 쓰인다는 설명, 보색 = 색상환에서 정반대 자리의 두 색

자주 묻는 질문

보색은 어떻게 계산하나요?

기준 색의 색상 각을 180° 돌린 색입니다. HSL 색상환에서는 HSL 채도와 밝기를 그대로 두고, OKLCH 색상환에서는 사람이 느끼는 밝기와 채도를 그대로 둔 채 각만 돌립니다. 기준 색 #2E6BE6의 보색은 HSL에서 #E6A92E, OKLCH에서 #966D00입니다.

다른 사이트나 미술 교과서와 보색이 다르게 나오는 이유는 무엇인가요?

색상환마다 바퀴를 나누는 기준이 다르기 때문입니다. 물감 색상환(RYB)은 빨강·노랑·파랑을 기본으로 나누고, 이 도구의 HSL·OKLCH 색상환은 화면 색(RGB)에서 나온 바퀴라 같은 색이 놓이는 자리가 다릅니다. 어느 바퀴를 기준으로 했는지 맞춘 뒤 비교하세요.

HSL과 OKLCH 색상환 중 무엇을 골라야 하나요?

다른 그래픽 도구와 같은 각도의 결과나 눈에 띄는 대비가 필요하면 HSL을 고르세요. 핵심 색들의 밝기를 고르게 맞추고 싶으면 OKLCH가 낫습니다. HSL은 밝기 숫자가 같아도 노랑은 밝고 파랑은 어둡게 보이지만, OKLCH는 느끼는 밝기(L)를 같게 둡니다.

50~900 단계 번호는 무엇을 뜻하나요?

OKLCH 밝기 L의 자리입니다. 50은 L 0.97, 900은 L 0.25이고 0.08씩 낮아집니다. 핵심 색은 L이 가장 가까운 칸에 그대로 들어가므로, 원래 밝은 노랑(#F9A825)은 200 칸에 들어가고 노랑 줄의 500은 갈색 쪽으로 나옵니다.

표의 칸 글자가 흰색이었다가 검은색으로 바뀌는 이유는 무엇인가요?

칸마다 흰 글자와 검은 글자 중 WCAG 대비가 큰 쪽을 쓰기 때문입니다. 어떤 색이든 둘 중 큰 쪽은 4.58:1 아래로 내려가지 않아 일반 글자 기준 4.5:1을 넘습니다. 글자색이 바뀌는 자리가 흰 글자와 검은 글자의 경계입니다.

대비가 4.5:1을 넘으면 접근성은 충분한가요?

글자 대비는 WCAG 2.2 1.4.3의 최소 기준을 넘는다는 뜻입니다. 작은 글자를 더 또렷하게 하려면 7:1(AAA)을 목표로 하고, 상태나 범주를 색으로만 나누지 말고 글자·아이콘·무늬를 함께 쓰세요(1.4.1). 비율은 반올림하지 않으므로 4.49:1은 미달입니다.

색각별로 보기의 '가까워짐'은 무엇인가요?

그 색각으로 볼 때 가장 가까운 두 핵심 색의 OKLab 거리가 원래 색에서 잰 거리의 절반 아래로 줄었다는 이 도구의 경고입니다. 0.02(JND) 미만이면 '구별 안 됨'으로 표시합니다. 첫 화면 분할 보색은 흑백 인쇄에서 파랑과 주홍이 원래 차이의 15%로 줄어 '가까워짐'이 뜹니다.

만든 팔레트는 어떻게 옮기나요?

HEX 복사는 핵심 색 목록을, CSS 변수 복사는 단계 전체를 --c1-50부터 --c4-900 같은 이름으로 복사합니다. 코드 줄을 누르면 그 값 하나만 복사됩니다. 링크 복사를 누르면 기준 색·규칙·색상환 종류가 담긴 주소가 복사되어, 열면 같은 팔레트가 다시 만들어집니다.