색상 조화 생성기

기준 색 하나로 배색 7가지, 색상환에서 돌려 보고 화면에 입혀 보기

색상 조화 생성기는 정해 둔 색 하나를 기준으로 색상환 위에서 일정한 각도만큼 떨어진 색을 골라 배색을 만듭니다. 보색·유사색·삼각·분할 보색·정사각·직사각·단색 일곱 가지를 한 화면에 나란히 보여 주므로, 하나씩 눌러 보지 않아도 어느 배색이 원하는 느낌에 가까운지 비교할 수 있습니다.

색을 고른 다음에는 그 색들을 실제로 어떻게 나눠 쓸지가 남습니다. 그래서 넓은 바탕 60%, 카드 30%, 버튼 10%로 칠한 예시 화면을 함께 보여 주고, 각 색 위에 흰 글자와 검은 글자 중 어느 쪽을 써야 읽히는지 대비 비율로 알려 줍니다.

언제 쓰나

색 하나가 이미 정해져 있을 때: 로고나 동아리 색처럼 바꿀 수 없는 색이 있으면 나머지 색을 고르기가 오히려 어렵습니다. 배색 규칙은 색상환 위의 각도로 후보를 몇 개로 줄여 주므로, 수많은 색 가운데에서 헤매지 않고 출발점을 잡을 수 있습니다.
한 곳만 눈에 띄게 하고 싶을 때: 발표 자료의 결론 한 줄이나 포스터의 신청 버튼처럼 시선을 모을 곳이 하나라면, 기준 색의 맞은편인 보색이나 그 양옆인 분할 보색을 강조색으로 쓰기 좋습니다.
서로 구별되는 색이 여러 개 필요할 때: 그래프의 계열이나 일정표의 분류처럼 3~4가지를 나눠 보여 줘야 하면, 색상 각이 120°나 90°씩 떨어진 삼각·정사각 배색이 색끼리 헷갈릴 일을 줄입니다. 다만 색만으로 나누면 색각이 다른 사람은 구별하기 어려우므로 글자나 무늬를 함께 둡니다.
두 색이 왜 어울리는지 설명해야 할 때: 고객이나 팀에 "이 두 색은 색상환에서 맞은편이라 대비가 강합니다"처럼 근거를 말할 수 있습니다. 가지고 있는 색을 기준 색으로 넣고 다른 색이 어느 각도에 오는지 보면 됩니다.

쓰는 법

기준 색을 넣습니다. 색 고르기 상자를 누르거나, 글자 칸에 HEX(#E07A5F), rgb(224 122 95), hsl(13 68% 63%) 가운데 하나를 입력합니다. 색상환의 점을 끌어도 기준 색의 색상 각이 바뀝니다.
배색 7가지 한눈에에서 줄무늬를 비교하고 마음에 드는 배색을 누릅니다. 위쪽 견본과 색상환의 점이 그 배색으로 바뀝니다.
채도·밝기 막대로 전체 분위기를 정합니다. 두 값은 배색의 모든 색에 함께 적용되므로, 색끼리의 각도 관계는 그대로 둔 채 파스텔처럼 옅게 하거나 어둡고 차분하게 바꿀 수 있습니다.
60·30·10으로 입혀 보기에서 '주색 바꾸기'를 눌러 어느 색이 넓은 바탕을 맡을지 고릅니다. 오른쪽 목록에서 각 색 위에 올릴 글자 색과 대비를 확인합니다.
가져갑니다. 견본을 누르면 그 색의 HEX가 복사되고, 아래 버튼으로 HEX 목록·CSS 변수·PNG 그림·링크를 가져갈 수 있습니다. 최근에 쓴 기준 색 12개는 이 브라우저에만 저장됩니다.

배색 7가지와 각도

이 도구는 기준 색의 HSL 값에서 색상 각(H)만 규칙대로 돌리고 채도(S)와 밝기(L)는 그대로 둡니다. 단색 배색만 반대로 색상 각을 두고 밝기를 20씩 바꿉니다. 아래 표는 기준 색 #E07A5F(hsl 13° 68% 63%)로 만든 실제 결과입니다.

배색	기준에서 돌리는 각	색 수	#E07A5F 기준 결과	어울리는 쓰임
보색	180°	2	#E07A5F#5FC5E0	강조 한 곳, 대비가 가장 강함
유사색	−30°, +30°	3	#E05F85#E07A5F#E0BB5F	차분하게 이어지는 화면, 배경 그라데이션
삼각	120°, 240°	3	#E07A5F#5FE07A#7A5FE0	서로 구별되는 3가지 분류
분할 보색	150°, 210°	3	#E07A5F#5FE0BB#5F85E0	보색보다 덜 부딪히는 강조
정사각	90°, 180°, 270°	4	#E07A5F#85E05F#5FC5E0#BB5FE0	4가지 분류, 활기찬 화면
직사각	60°, 180°, 240°	4	#E07A5F#C5E05F#5FC5E0#7A5FE0	따뜻한 쪽·차가운 쪽 두 묶음
단색	각은 그대로, 밝기 −20·+20	3	#B64223#E07A5F#F1C1B4	한 색으로 만드는 단계, 표의 줄 색

단색 배색은 기준 밝기가 75%를 넘으면 더 밝게 만들 자리가 없어서 어두운 쪽으로만 두 칸(−40·−20)을 만들고, 25% 아래이면 밝은 쪽으로만 두 칸(+20·+40)을 만듭니다. 옛 판처럼 흰색이나 검은색 근처에서 같은 색이 두 번 나오지 않게 하려는 약속입니다.

보색이 사이트마다 다른 이유: 색상환이 하나가 아닙니다

같은 빨강을 넣어도 어떤 도구는 하늘색 계열을, 어떤 책은 초록을 보색이라고 합니다. 둘 중 하나가 틀린 것이 아니라 기준으로 삼은 색상환이 다릅니다. 미국 국립미술관(NGA)의 미술 교육 자료는 물감의 3원색을 빨강·노랑·파랑으로, 텔레비전과 컴퓨터 화면에 쓰는 빛의 3원색을 빨강·초록·파랑으로 따로 소개하고, 물감 색상환에서는 빨강과 초록, 노랑과 보라, 파랑과 주황을 보색의 예로 듭니다.

색상환	주로 쓰는 곳	빨강의 맞은편
화면 색상환(RGB·HSL, 이 도구)	모니터·휴대폰 화면, CSS의 hsl()	#00FFFF 청록(시안)
화가 색상환(RYB)	물감 섞기, 미술 교육	초록
먼셀 색상환(10색상)	색을 기호로 적는 표색계(예: 7.5YR)	청록(BG)

이 도구가 화면 색상환을 쓰는 이유는 결과를 HEX와 CSS로 가져가 화면에서 쓰기 때문입니다. W3C CSS Color 4는 hsl()의 색상 각에서 0°를 빨강, 120°를 초록, 240°를 파랑으로 정의하고, 이 도구의 각도도 그 정의를 그대로 따릅니다. 먼셀 표색계는 빨강(R)·노랑(Y)·초록(G)·파랑(B)·보라(P) 다섯 주요 색상과 그 사이의 YR·GY·BG·PB·RP 다섯 중간 색상을 고리 모양으로 고르게 놓으므로, 이 순서대로 원을 그리면 R의 맞은편에 BG가 옵니다. 물감이나 인쇄물로 옮길 색을 고른다면 화가 색상환의 보색과 결과가 다를 수 있다는 점을 염두에 두세요.

같은 밝기 숫자라도 눈에 보이는 밝기는 다릅니다

HSL의 밝기(L)가 같다고 해서 사람 눈에 같은 밝기로 보이지는 않습니다. 밝기 50%인 노랑 #FFFF00과 파랑 #0000FF에 흰 글자를 올려 WCAG 대비를 재면 결과가 크게 갈립니다.

색	HSL	흰 글자 대비
#FFFF00	hsl(60 100% 50%)	1.0:1
#0000FF	hsl(240 100% 50%)	8.5:1

그래서 색상 각만 돌린 배색은 색마다 밝기가 다르게 느껴지고, 배색 색끼리는 대비가 낮은 경우가 많습니다. 기본 예시인 분할 보색(#E07A5F·#5FE0BB·#5F85E0)에서 색끼리의 대비는 1.8:1, 1.2:1, 2.1:1로 모두 3:1에 못 미칩니다. 반면 세 색 위에 검은 글자를 올리면 각각 7.1:1, 12.8:1, 5.9:1로 읽기에 충분합니다. 배색 색끼리 글자와 바탕으로 겹치기보다는, 바탕은 배색 색으로 칠하고 글자는 흰색이나 검은색으로 두는 편이 안전합니다.

60·30·10으로 입혀 보기

색을 다 골라도 같은 넓이로 나눠 칠하면 화면이 산만해 보이기 쉽습니다. 인테리어에서 널리 쓰는 60·30·10 규칙은 가장 넓은 면에 주색 60%, 그다음에 보조색 30%, 작은 포인트에 강조색 10%를 쓰라고 권합니다. 이 도구의 예시 화면은 바탕(주색)·카드(보조색)·아래 띠 버튼(강조색)의 넓이가 정확히 60·30·10이 되도록 그렸습니다.

2색 배색은 강조 띠 없이 바탕 70%·카드 30%로 나눕니다.
4색 배색은 카드 아래쪽 작은 띠를 네 번째 색으로 칠해 60·25·10·5로 나눕니다.
2색·4색의 비율은 이 도구가 정한 약속이며, 60·30·10 규칙 자체는 출발점일 뿐 꼭 지켜야 하는 수치는 아닙니다.

'주색 바꾸기'를 누르면 같은 색들이 맡는 역할만 한 칸씩 돌아갑니다. 같은 세 색이라도 어느 색이 바탕을 차지하느냐에 따라 화면의 인상이 크게 달라지므로, 몇 번 눌러 비교한 뒤 정하면 좋습니다.

배색 위에 글자를 올릴 때

오른쪽 목록은 각 색 위에 흰 글자와 검은 글자 중 대비가 더 큰 쪽을 골라 WCAG 2.2 기준으로 판정합니다. 대비 비율은 소수 둘째 자리에서 버린 값으로 보여 주므로, 4.48:1을 4.5:1로 올려 통과시키지 않습니다.

본문 글자 가능: 4.5:1 이상입니다(1.4.3 대비 최소).
큰 글자만: 3:1 이상 4.5:1 미만입니다. 큰 제목에는 쓸 수 있지만 본문에는 부족합니다.
글자 부족: 3:1 미만입니다.
버튼과 바탕: 버튼처럼 조작하는 요소는 바로 옆 색과 3:1 이상이어야 모양이 구별됩니다(1.4.11 비텍스트 대비). 모자라면 테두리나 밑줄을 더합니다.

대비가 충분해도 색만으로 의미를 나누면 안 됩니다. WCAG 1.4.1은 색을 정보 전달의 유일한 수단으로 쓰지 말라고 하므로, 빨강은 오류·초록은 정상처럼 나눌 때에도 글자나 아이콘을 함께 둡니다.

자주 틀리는 경우

흰색·검은색·회색을 기준으로 넣는 경우: 무채색은 색상 각이 없어서 어느 규칙을 골라도 같은 색만 나옵니다. 회색이면 채도 막대를 올리고, 흰색·검은색이면 밝기 막대도 0%와 100% 사이로 옮기세요. 밝기만 바꾸는 단색 배색도 쓸 수 있습니다.
4색을 같은 넓이로 나눠 칠하는 경우: 정사각·직사각 배색은 색이 많아서 한 색을 주색으로 정하고 나머지를 작게 쓰지 않으면 시선이 머물 곳이 없어집니다.
보색끼리 글자와 바탕으로 쓰는 경우: 색상 대비는 강해도 밝기가 비슷하면 글자가 번져 보이고 대비 비율도 낮습니다. 글자는 흰색이나 검은색으로 두세요.
다른 사이트의 보색과 다르다고 오류로 여기는 경우: 화면 색상환과 화가 색상환은 맞은편 색이 다릅니다. 어느 색상환인지 먼저 확인하세요.
화면용 HEX를 그대로 인쇄소에 넘기는 경우: 인쇄는 CMYK 잉크로 색을 내므로 화면의 선명한 색이 그대로 나오지 않을 수 있습니다. RGB CMYK 변환기로 인쇄 예상 색을 먼저 보세요.

한계와 주의

배색 규칙은 색상 각의 관계만 정합니다. 어울림을 보장하지 않으므로 마지막 판단은 실제로 쓸 화면에서 하세요.
채도와 밝기를 기준 색과 같게 두기 때문에 눈에 보이는 밝기는 색마다 다르고, 색끼리의 대비가 낮을 수 있습니다.
단색 배색은 HSL 밝기만 바꾸고 채도는 그대로 둡니다. 아주 밝거나 어두운 단계에서는 색이 원래보다 탁하거나 진해 보일 수 있습니다.
같은 HEX도 모니터 설정, 화면 밝기, 다크 모드, 주변 조명에 따라 다르게 보입니다.
대비 판정은 WCAG 2.2의 비율만 봅니다. 실제 글자 크기와 굵기, 색각 차이는 반영하지 않습니다. 색각에 따라 배색이 어떻게 보이는지 궁금하면 색맹 테스트의 시뮬레이션을 함께 보세요.

기준일 CSS 명세·WCAG·미술 교육 자료는 2026-10-20에 확인했습니다. 표의 HEX와 대비 비율은 이 도구의 계산 규칙으로 직접 구한 값입니다.

출처

01W3C: CSS Color Module Level 4 — HSLhsl() 색상 각 0deg 빨강·120deg 초록·240deg 파랑
02W3C: WCAG 2.21.4.1 색 사용, 1.4.3 대비 4.5:1(큰 글자 3:1), 1.4.11 비텍스트 대비 3:1
03National Gallery of Art: The Elements of Art – Color물감 3원색 빨강·노랑·파랑, 화면의 빛 3원색 빨강·초록·파랑, 보색 예 빨강–초록·노랑–보라·파랑–주황
04Adobe Express: The color wheel explainedRYB 색상환은 화가·물감, RGB 색상환은 화면(2026-05-28)
05ScanHue: Complementary vs Analogous vs Triadic: Color Harmony BasicsHSL 색상환 각도로 보는 배색: 보색 180°·유사색 ±30°·삼각 120°·분할 보색 150°·210°, 화가(RYB) 색상환과의 차이(2026-07-15)
06NIST: Hue (H) — Munsell color system주요 색상 R·Y·G·B·P와 중간 색상 YR·GY·BG·PB·RP(ASTM E1732)
07BEHR: The 60-30-10 Rule인테리어에서 널리 쓰는 배색 지침, 60% 주색·30% 보조색·10% 강조색(2025-05-20)
08ScanHue: The 60-30-10 Rule: Balance Any Color Palette60·30·10을 화면에 옮기는 법(바탕·카드·버튼), 10% 강조색도 WCAG 대비를 넘겨야 함(2026-07-29)

자주 묻는 질문

같은 색을 넣었는데 다른 사이트와 보색이 다르게 나와요.

기준으로 삼은 색상환이 다르기 때문입니다. 이 도구는 화면 색을 다루는 RGB·HSL 색상환을 써서 빨강 #FF0000의 맞은편이 청록 #00FFFF입니다. 물감을 섞는 화가 색상환(RYB)에서는 빨강의 보색이 초록이므로, 미술 교재나 일부 도구와 결과가 다를 수 있습니다.

배색 7가지 가운데 무엇을 고르면 되나요?

한 곳만 눈에 띄게 하려면 보색이나 분할 보색, 차분하게 이어지는 화면을 원하면 유사색이나 단색, 서로 구별되는 색이 3~4개 필요하면 삼각·정사각·직사각이 어울립니다. 배색 7가지 한눈에에서 줄무늬를 비교한 뒤 60·30·10 예시 화면에 입혀 보고 정하면 됩니다.

배색 색끼리 글자와 바탕으로 겹쳐 써도 되나요?

대부분은 권하지 않습니다. 이 도구는 채도와 밝기를 기준 색과 같게 두므로 배색 색끼리는 대비가 낮은 경우가 많습니다. 예시 분할 보색은 색끼리 대비가 1.2:1~2.1:1이라 본문 기준 4.5:1에 크게 못 미칩니다. 바탕은 배색 색으로 칠하고 글자는 목록에서 알려 주는 흰색이나 검은색으로 두세요.

채도와 밝기 막대를 움직이면 무엇이 바뀌나요?

배색에 들어간 모든 색의 채도나 밝기가 함께 바뀝니다. 색끼리의 각도 관계는 그대로 남으므로 같은 배색을 옅은 파스텔이나 어둡고 차분한 톤으로 옮길 때 씁니다. 단색 배색은 밝기 막대로 기준 밝기를 정하면 그 위아래로 20씩 단계를 만들고, 기준 밝기가 75%를 넘으면 어두운 쪽으로만, 25%보다 낮으면 밝은 쪽으로만 두 칸을 만듭니다.

60·30·10 비율은 꼭 지켜야 하나요?

아닙니다. 60·30·10은 인테리어에서 널리 쓰는 경험칙으로, 넓은 면 하나를 정해 화면이 산만해지지 않게 하는 출발점입니다. 이 도구의 예시 화면은 넓이를 정확히 그 비율로 그렸고, 2색은 70·30, 4색은 60·25·10·5로 나누는 것은 이 도구가 정한 약속입니다.

링크로 공유하면 무엇이 담기나요?

기준 색의 HEX와 배색 규칙만 주소에 담깁니다(예: ?c=E07A5F&r=split). 링크를 연 사람에게는 같은 배색과 같은 HEX가 보입니다. 예시 화면의 주색 순서와 최근 기준 색 목록은 링크에 담기지 않고, 최근 기준 색은 이 브라우저에만 저장됩니다.

여기서 만든 색을 인쇄물에 그대로 써도 되나요?

그대로 쓰면 색이 달라질 수 있습니다. HEX는 화면의 빛(RGB)으로 정한 색이고 인쇄는 CMYK 잉크로 색을 냅니다. 특히 채도가 높은 청록이나 연두는 인쇄 범위를 벗어나기 쉬우니 RGB CMYK 변환기에서 인쇄 예상 색을 먼저 확인하세요.

흰색이나 회색을 넣으면 왜 모든 배색이 같은 색인가요?

흰색·검은색·회색 같은 무채색은 채도가 0이라 색상 각이 없습니다. 색상 각을 아무리 돌려도 같은 회색이 나오므로, 채도 막대를 올려 색을 띠게 하거나 밝기만 바꾸는 단색 배색을 고르세요. 흰색(밝기 100%)과 검은색(밝기 0%)은 채도를 올려도 그대로이므로 밝기 막대도 그 사이로 옮겨야 합니다.