색상 팔레트 생성기

빨강 #ff0000의 보색은 색상환에서 맞은편에 있는 #00ffff입니다. 빨강으로 삼각 배색을 만들면 #00ff00, #0000ff 두 색이 더해집니다. 흰 바탕에 검은 글자의 대비는 21:1입니다.

문제가 해결됐나요?

사용 방법

색 상자에서 기준색을 고르거나 #0b7a6a 같은 HEX 코드를 입력합니다. rgb(11, 122, 106)처럼 RGB나 HSL로 써도 됩니다.
보색, 유사색, 삼각, 단색 가운데 배색을 고릅니다. 기준색에는 테두리가 표시됩니다.
HEX, RGB, HSL 줄을 누르면 그 값이 복사됩니다. HEX 전체 복사를 누르면 팔레트 전부를 한꺼번에 복사합니다.
색마다 붙은 두 줄의 대비를 확인하세요. 그 색 위에 흰 글자와 검은 글자를 올렸을 때 얼마나 잘 읽히는지 알려 줍니다.

색은 HSL로 다룹니다. 색상은 색상환의 위치(0~360도), 채도는 선명한 정도, 명도는 밝기입니다. 배색은 색상만 돌리고 채도와 명도는 그대로 두므로 팔레트 전체의 느낌이 비슷하게 맞춰집니다.

보색은 색상환에서 180도 반대편 색을 더합니다. 유사색은 양옆 30도 떨어진 색, 삼각 배색은 120도씩 떨어진 세 색입니다. 단색 배색은 색상과 채도를 두고 명도만 15포인트씩 바꾸며, 양 끝이 순백이나 순흑이 되지 않도록 8~92% 안에서 움직입니다.

대비비는 WCAG 2 공식을 따릅니다. 각 채널을 선형 빛의 양으로 바꿔 상대 휘도 L = 0.2126 R + 0.7152 G + 0.0722 B를 구하고, (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05)로 1:1부터 21:1까지의 비를 냅니다.

WCAG는 일반 글자에 4.5:1 이상(AA), AAA는 7:1 이상을 요구합니다. 큰 글자(약 24px, 굵게는 약 19px 이상)는 AA 기준이 3:1입니다. 비율 아래 표시는 일반 글자 기준이며, 큰 글자 기준만 넘으면 AA 큰 글자로 표시합니다.

보색이 뭔가요?

색상환에서 기준색의 정반대, 180도 떨어진 색입니다. 둘을 함께 쓰면 대비가 강해서 배경 위에서 눈에 띄어야 하는 버튼에 잘 맞습니다.

웹사이트에는 어떤 배색이 좋나요?

차분한 화면에는 단색 배색이 가장 무난합니다. 유사색은 조화로우면서 약간의 변화를 줍니다. 보색과 삼각 배색은 강한 편이니 한 색을 주색으로 쓰고 나머지는 작은 포인트로만 쓰세요.

대비비가 꼭 높아야 하나요?

글자라면 그렇습니다. 본문은 배경과 4.5:1 이상이 나와야 합니다. 장식용 도형이나 큰 제목은 조금 낮아도 되지만 버튼과 링크 안 글자는 기준을 맞추는 것이 좋습니다.

만들어진 색이 직접 고른 색과 조금 다른 이유는?

기준색은 입력한 그대로 둡니다. 나머지 색은 HSL로 계산한 뒤 RGB 정수로 반올림하므로 직접 고른 색과 한 단계 차이가 날 수 있습니다.

색을 저장해 주나요?

아니요. 계산은 모두 브라우저에서 합니다. 기준색과 배색을 남기려면 링크 공유로 URL에 담아 두세요.