보색 찾기

예시

표시되는 HEX, RGB, HSL 값은 같은 sRGB 색상을 나타냅니다. CSS나 다른 디자인 도구에 사용할 결과를 복사할 수 있습니다.

HSL 보색 vs RYB 보색

• HSL (화면): 빨강 ↔ 시안, 초록 ↔ 마젠타, 파랑 ↔ 노랑. CSS에서 쓰는 sRGB 유래 HSL 색조각의 기하 관계이며 빛 혼합을 모사하지 않습니다.
• RYB (화가): 빨강 ↔ 초록, 파랑 ↔ 주황, 노랑 ↔ 보라. 전통적인 교육 관례이며 특정 안료의 혼합 결과를 예측하지 않습니다.

이 도구는 디지털 HSL 모델만 사용합니다. 안료의 보색은 재료와 혼합 방식에 따라 달라지므로 물감용 RYB 색상환으로 변환하지 않습니다.

보색이 잘 작동하는 곳

• 브랜드 배경 위의 CTA 버튼. 주 색상과 그 보색을 짝지어 버튼을 돋보이게 하세요.
• 데이터 시각화 이중 시리즈 차트(이익 vs 손실, 전 vs 후).
• 일러스트 그림자: 주황색 호박의 그림자는 더 어두운 주황보다 파랑일 때 더 설득력 있게 보입니다.
• 스포츠 브랜딩: 많은 팀이 보색 또는 분할 보색 팔레트(파랑/주황, 빨강/초록, 노랑/보라)를 씁니다.

보색이 실패하는 곳

• 배경 위 본문 텍스트: 직접 보색(초록 위 빨강, 주황 위 파랑)은 읽기 불편합니다. 높은 색수차가 시각 피로를 유발합니다.
• 전면 사용: 50% 빨강, 50% 초록인 화면은 지칩니다. 보색은 메인이 아니라 강조(표면의 5-10%)에 쓰세요.
• 브랜드 일관성: 보색은 산만하게 느껴집니다. 대부분의 현대 브랜드는 이중 보색이 아니라 단색 또는 유사색 + 강조 하나를 씁니다.

분할 보색

분할 보색(기준 + 150° + 210°)이 종종 더 실용적인 선택입니다:

• 보색 영역과의 높은 대비를 유지합니다.
• 직접 보색의 진동감을 피합니다.
• 레이어드 디자인을 위한 두 가지 강조를 제공합니다.

예: 기준 = 파랑 → 보색 = 주황(강함) → 분할 보색 = 빨강-주황 + 노랑-주황(더 풍부함).

보색의 채도 낮추기

순수 보색은 최대 채도에서 보기 좋은 경우가 드뭅니다. 더 차분한 팔레트를 위해 한쪽 또는 양쪽의 채도를 20-40% 줄이세요:

• 빨강 (S=100%) + 시안 (S=100%) = 진동함.
• 빨강 (S=60%) + 시안 (S=60%) = 클래식 포스터 팔레트.
• 브랜드-벽돌색 (S=45%) + 더스티 틸 (S=30%) = 현대적이고 실용적.

사용 전 검증

• 쌍의 대비율: 찾기 도구가 알려줍니다. 4.5:1 미만이면 텍스트 AA에 실패합니다.
• 중립 배경에서 테스트: 보색은 흰색, 회색, 검은색에서 다르게 보입니다.
• 목적지가 인쇄라면 인쇄 테스트, CMYK는 RGB 대비 채도와 보색 관계를 바꿀 수 있습니다.