컬러 팔레트 생성기

헥스 색상 하나를 넣으면 화가와 인터페이스 디자이너가 실제로 쓰는 일곱 가지 배색이 나옵니다. 보색(180° 맞은편), 분할 보색(150°와 210°, 정면 보색보다 부드럽습니다), 삼각 배색(120° 간격), 사각·정사각 배색(60/180/240°와 90/180/270°의 4색 구성), 유사색(양옆 30°, 차분한 이웃들), 그리고 색상은 고정한 채 명도만 단계별로 움직이는 단색 배색입니다. 기준 색의 HSL 값도 함께 보여 주므로 무엇을 바탕으로 계산했는지 확인할 수 있습니다.

HSL에서 색상환을 돌리는 방식 덕분에 이 배색들은 계산이 아주 간단하지만, 바로 그 점이 유일한 약점이기도 합니다. HSL의 명도는 기하학적 좌표일 뿐 지각적인 밝기가 아니기 때문입니다. 같은 L 값을 가진 두 색이 실제로 보이는 밝기는 엄청나게 다를 수 있습니다. 순수한 노랑과 순수한 파랑은 둘 다 L = 50%에 있지만 상대 휘도는 각각 0.928과 0.072로 약 열세 배 차이가 납니다. 흰 배경에서 노랑의 명암비는 1.07:1, 파랑은 8.59:1입니다. 보이지 않는 것과 편하게 읽히는 것의 차이입니다.

이 격차는 극단적인 경우에만이 아니라 평범한 배색에서도 나타납니다. 기본값인 #3b82f6(HSL 217°, 91%, 60%)과 그 보색 #f6af3b는 채도와 명도가 정확히 같지만, 흰 배경에서의 명암비는 각각 3.68:1과 1.89:1입니다. 그래서 색 견본 띠에서는 균형 잡혀 보이던 배색이 글자가 되는 순간 접근성 기준에서 조용히 탈락할 수 있습니다. 이 도구로는 서로 어울리는 색상을 고르고, 글자를 올릴 조합은 반드시 명암비 검사기에 넣어 통과할 때까지 명도를 조정하세요.

색채 조화는 법칙이 아니라 관습이기도 합니다. 이 규칙들이 나누는 원은 RGB 색상환인데, 규칙의 이름이 붙던 시절의 안료 색상환과는 다릅니다. 여기서 빨강의 반대는 청록이지만 물감 상자에서는 초록입니다. 또 남성 열두 명 중 한 명꼴로 적록 색각 이상이 있고, 그들에게 빨강과 초록의 보색 쌍은 아무런 대비도 주지 못합니다. 구분이 중요한 정보를 담고 있다면 색상만이 아니라 명도, 형태, 라벨로도 함께 전달하세요.