색상 팔레트 생성기

색상환과 HSL: 팔레트가 만들어지는 원리

이 도구는 색을 색상(Hue), 채도(Saturation), 명도(Lightness)로 나누어 다루는 HSL 방식으로 바꾼 다음, 색상 각도만 규칙대로 이동시켜 새 색을 만듭니다. 색상환은 0~360도의 원이며 0°가 빨강, 약 60°가 노랑, 120°가 초록, 180°가 청록, 240°가 파랑, 300°가 자홍 부근입니다. 색상 각도만 바꾸고 채도와 명도를 그대로 두기 때문에 결과 색들은 "밝기와 선명함이 비슷한 한 가족"으로 보입니다. 과정은 (1) HEX → RGB → HSL 변환, (2) 각도 이동, (3) HSL → RGB → HEX 변환 순서이며, 각 단계의 반올림 때문에 기준색이 1 정도 차이 날 수 있어 기준 색상 칸은 입력값 그대로 보여 줍니다.

참고로 HSL의 "명도"는 사람 눈이 느끼는 밝기와 일치하지 않습니다. 같은 명도 50%라도 노랑은 매우 밝게, 파랑은 어둡게 느껴집니다. 그래서 배색 결과를 글자색·배경색으로 쓰려면 눈대중이 아니라 아래의 대비율로 확인하는 것이 안전합니다.

배색 방식별 각도 규칙과 쓰임

• 보색(+180°): 색상환 정반대. 가장 강한 대비로 버튼, 강조 문구처럼 한 곳에 시선을 모을 때 씁니다. 넓은 면적에 둘을 같은 비율로 쓰면 눈이 피로합니다. 한 색을 70% 이상 주로 쓰고 다른 색은 포인트로만 쓰세요.
• 유사색(±30°): 이웃한 색. 안정적이고 통일감이 있지만 구분이 약해 강조 요소가 묻힐 수 있습니다. 배경, 일러스트, 그라데이션에 알맞습니다.
• 삼색 조화(+120°, +240°): 색상환을 3등분. 생동감이 크고 균형이 좋아 어린이용 콘텐츠, 인포그래픽에 어울립니다. 세 색을 모두 같은 비중으로 쓰면 산만하니 주색 1, 보조색 1, 포인트 1로 나누세요.
• 분할 보색(+150°, +210°): 보색 하나 대신 그 양옆의 두 색을 씁니다. 보색의 대비는 유지하면서 부담이 덜해 초보자가 쓰기 안전한 방식입니다.
• 사색 조화(+90° 간격 4색): 색이 많아 정교한 조절이 필요합니다. 한 색을 주로 쓰고 나머지는 아주 작게 사용하는 편이 좋습니다. 데이터 시각화 범주 색에도 쓰입니다.
• 톤온톤: 같은 색상에서 명도만 20·35·50·65·80%로 단계화한 5색. 가장 실패 확률이 낮은 방식이며 사이트의 배경·카드·테두리·텍스트 단계에 어울립니다.

예시 1: 금빛 #c9a961 기준 색상으로 만든 팔레트

기준 색상 #c9a961은 HSL로 색상 약 41.5°, 채도 약 49%, 명도 약 58.4%입니다. 색상 각도만 움직이면 아래와 같은 색들이 나옵니다(이 표는 페이지 생성 시 같은 공식으로 계산한 값입니다).

보색은 약 221.5°의 푸른색 #6181c9가 됩니다. 금빛 계열 브랜드에 이 파랑을 링크·보조 버튼 색으로 곁들이면 따뜻한 색과 차가운 색의 균형이 생깁니다.

글자색 대비율(WCAG)로 읽기 쉬운 색을 가려내기

웹 접근성 지침(WCAG)은 색의 상대 휘도 L을 계산하고 대비율 = (밝은 쪽 L + 0.05) ÷ (어두운 쪽 L + 0.05)로 정의합니다. 값은 1:1(차이 없음)에서 21:1(검정 대 흰색)까지입니다. 일반 크기 본문은 4.5:1 이상(AA), 큰 글자(대략 24px 이상 또는 굵은 18.66px 이상)는 3:1 이상이 최소 기준이며, 더 엄격한 AAA 수준은 일반 7:1, 큰 글자 4.5:1입니다. 이 도구는 각 색 위에 흰색과 검정 중 대비가 더 높은 글자색을 자동으로 선택해 대비율을 표시합니다.

예시 2: #c9a961의 흰색/검정 글자 대비

#c9a961 배경에 흰 글자의 대비율은 2.25:1로 AA 기준(4.5:1)에 못 미치고, 검정 글자는 9.33:1로 AAA(7:1)까지 통과합니다. 금빛 버튼에는 흰 글자보다 어두운 글자를 쓰는 편이 읽기 쉽다는 뜻입니다. 같은 색상의 명도 단계(톤온톤)로 보면 아래와 같습니다.

표에서 보듯 명도 35%의 짙은 금색(#856a2d)은 흰 글자로 5.13:1이라 AA를 통과하지만, 명도 50% 부근(#be9841)은 흰색·검정 어느 쪽도 애매합니다(흰 2.71, 검정 7.76이므로 사실상 검정 글자 전용). 중간 명도의 색은 글자 배경으로 쓰기 가장 까다로운 구간이라는 점을 기억하세요. 두 색의 대비를 정밀하게 확인하려면 명암비 검사기를 쓰세요.

실무 비율: 60-30-10 규칙

팔레트를 뽑은 뒤 막막하다면 면적 비율을 먼저 정하세요. 널리 쓰이는 경험칙은 주색(배경·큰 면) 60%, 보조색 30%, 강조색 10%입니다. 톤온톤 5색이라면 가장 밝은 단계를 배경, 한두 단계 어두운 단계를 카드·구분선, 가장 어두운 단계를 글자, 기준색을 강조에 쓰는 식으로 나누면 대부분 어색하지 않습니다. "CSS 변수로 복사" 버튼은 --color-1: #...; 형태로 복사하므로 그대로 :root 안에 붙여 쓸 수 있습니다.

흔한 실수와 한계

• 생성된 색을 그대로 전부 쓰기: 팔레트는 후보입니다. 실제로는 2~3색을 고르고 나머지는 중립색(흰색, 회색, 검정)을 섞어 쓰는 편이 안정적입니다.
• 명도 무시: 이 도구는 기준색의 채도·명도를 유지합니다. 그래서 파랑·보라 계열은 같은 명도의 노랑보다 훨씬 어두워 보일 수 있습니다. 글자 위 배경에 쓰기 전에 대비율을 확인하세요.
• 색각 이상 고려 부족: 빨강-초록처럼 색상 차이만으로 정보를 구분하면 일부 사용자는 구분하지 못합니다. 아이콘, 라벨, 명도 차이를 함께 쓰세요. 색각 이상 친화 디자인 가이드에서 방법을 볼 수 있습니다.
• 화면과 인쇄 차이: HEX는 화면(RGB)용입니다. 인쇄(CMYK)에서는 선명한 파랑·초록이 칙칙해질 수 있고 모니터마다 색 표현도 다릅니다. 인쇄물은 시안 출력으로 확인하세요.
• 문화적 의미: 같은 색도 나라와 맥락에 따라 의미가 달라집니다. 문화권별 색의 의미를 참고하세요.
• 이 생성기는 단순한 각도 규칙 기반이라 브랜드 아이덴티티를 대신 정해 주지 않습니다. 이미지에서 색을 추출하거나 사용자 테스트가 필요한 프로젝트에는 별도 작업이 필요합니다.

결과를 어디에 쓰나요?

웹사이트라면 CSS 변수로 복사해 :root에 정의하고, 버튼·링크·배경에 변수로만 사용해 색을 한 곳에서 관리하세요. HEX 외에 RGB, HSL 값이 필요하면 칸 안에 함께 표시된 값을 쓰거나 색상 변환기로 변환할 수 있습니다. 그라데이션이 필요하면 유사색 두 개를 CSS 그라데이션 생성기에 넣어 보세요. 색 조합의 이론적 배경을 더 알고 싶다면 색채 이론 기초 가이드가 도움이 됩니다.

자주 묻는 질문