🔶 사각 배색 팔레트 생성기 | 4색 역할까지 바로 배분

기준 색상 (HEX)

사각 배색 방식

직사각 분할 각도 (10~80도, 직사각 방식에서만 사용)

도

역할	색상환 각도	HEX	HSL (HEX 기준)	상대휘도

네 색을 뽑고 역할까지 배분하기

사각 배색은 보색 쌍 두 개를 함께 쓰는 배색입니다. 색이 네 개라 삼각 배색보다 넓지만, 그대로 네 개를 늘어놓으면 어느 색을 글자에 쓰고 어느 색을 배경에 둘지가 막막해집니다. 그래서 이 도구는 네 색을 만든 다음 주 색·보조·강조·배경 역할까지 함께 배분합니다. 정사각 방식은 90도씩 네 등분이고, 직사각 방식은 분할 각도를 직접 넣어 두 보색 쌍을 좁게 모읍니다.

계산 방식과 역할 배분 기준

색상(H)에만 각도를 더하고 채도와 명도는 기준 색 값을 그대로 둡니다. 역할은 추천이 아니라 계산 결과로 정합니다. W3C WCAG가 정의한 상대휘도(임계값 0.04045, 가중치 0.2126·0.7152·0.0722)를 네 색마다 구해서 낮은 순서로 주 색·보조·강조·배경을 붙입니다. 같은 HSL 명도라도 노란 쪽이 파란 쪽보다 눈에 훨씬 밝게 보이기 때문에 이 순서가 실제 화면과 맞습니다. 2026년 10월 기준 명세를 따랐습니다.

한계

역할 배분은 휘도 순서라는 한 가지 기준만 씁니다. 브랜드 색 규칙이나 문화적 의미는 반영하지 않습니다. 참고 명암비는 가장 어두운 색과 가장 밝은 색 한 쌍만 알려 주며, 모든 색 쌍의 등급 판정은 명암비 일괄 판정 도구가 맡습니다.

자주 묻는 질문

정사각과 직사각 방식은 어떻게 다른가요?

정사각은 색상환을 90도씩 네 등분해 네 색이 똑같은 간격으로 놓입니다. 직사각은 분할 각도를 좁혀 두 보색 쌍이 서로 가깝게 모이므로, 한 계열을 중심으로 쓰면서 보색 하나만 강조로 쓰기 쉽습니다.

역할 배분은 무엇을 기준으로 정한 건가요?

WCAG 상대휘도를 네 색마다 계산해 낮은 순서로 주 색·보조·강조·배경을 붙입니다. 표의 상대휘도 열에 그 값을 그대로 적어 두었으니 직접 확인할 수 있습니다.

네 색 모두의 명암비를 확인하고 싶습니다.

이 페이지는 가장 어두운 색과 가장 밝은 색 한 쌍만 참고용으로 알려 줍니다. 모든 쌍의 명암비와 AA·AAA 통과 여부는 명암비 일괄 판정 도구에서 확인하세요.

🔶사각 배색(Tetradic) 팔레트 생성기

관련된 도구

삼각 배색(Triadic) 팔레트 생성기

분할 보색 배색 팔레트 생성기

네 색을 뽑고 역할까지 배분하기

계산 방식과 역할 배분 기준

한계

자주 묻는 질문

관련된 도구

삼각 배색(Triadic) 팔레트 생성기

분할 보색 배색 팔레트 생성기

네 색을 뽑고 역할까지 배분하기

계산 방식과 역할 배분 기준

한계

자주 묻는 질문

같은 카테고리 도구