색상 팔레트 만들기: 한 가지 색에서 배색 조합
색상 팔레트 만들기 도구에 기준색을 HEX, RGB, HSL로 넣거나 색 선택기로 고르고, 배색 방식을 정하세요. HSL 색상환에서 색상을 돌려 팔레트를 만들고, 색마다 견본과 HEX, RGB, HSL 코드를 보여 줍니다. 코드는 한 번 눌러 복사합니다.
출처: CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. 업데이트: .
계산 방법
색상 팔레트를 만드는 원리
이 도구는 기준색을 HSL 모델(CSS Color Module Level 4에 정의된 색상 H〔도〕, 채도 S, 밝기 L〔%〕)로 바꿉니다. 배색 방식마다 색상만 돌리고 채도와 밝기는 그대로 둡니다. 마지막으로 각 색을 sRGB로 되돌려 0~255 정수로 반올림합니다.
색상 팔레트 만들기 순서
- 기준색을 HEX, RGB, HSL로 입력하거나 색 선택기로 고릅니다. 브랜드 색이나 발표 자료의 주색을 넣으면 됩니다.
- 보색, 유사색, 삼각 배색, 단색 배색 등 배색 방식을 고릅니다.
- 색마다 HEX, RGB, HSL 코드를 복사하거나, 「CSS 변수로 복사」로 한 번에 가져갑니다.
예: 파란색 hsl(217, 91%, 60%)을 색상환에서 180° 돌리면 보색은 hsl(37, 91%, 60%), 곧 약 #F6AF3C의 따뜻한 주황색입니다.
| 배색 방식 | 색상 회전 | 색 수 |
|---|---|---|
| 보색 | 0°, 180° | 2 |
| 유사색 | −30°, 0°, +30° | 3 |
| 삼각 배색 (트라이어드) | 0°, 120°, 240° | 3 |
| 분할 보색 | 0°, 150°, 210° | 3 |
| 직사각 배색 (테트라드) | 0°, 60°, 180°, 240° | 4 |
| 정사각 배색 (스퀘어) | 0°, 90°, 180°, 270° | 4 |
| 단색 배색 (모노크로매틱) | 회전 없음, 밝기 5단계 | 5 |
예: 순수한 빨강 #FF0000은 H = 0°, S = 100%, L = 50%입니다. 180° 돌리면 H = 180°, 곧 청록(시안) #00FFFF가 보색입니다. 삼각 배색에서는 120°(초록 #00FF00)와 240°(파랑 #0000FF)가 더해집니다.
보색과 유사색
보색은 색상환에서 정반대(180°)에 있는 색의 조합입니다. 서로를 가장 돋보이게 해서 강한 포인트가 됩니다. 유사색은 이웃한 색상끼리라 차분하고 통일감 있는 색상 조합이 됩니다. 이 도구는 화면 색을 다루는 HSL 색상환을 쓰므로, 미술 시간에 배우는 먼셀 색상환과는 보색의 각도가 조금 다를 수 있습니다.
단색 배색
「단색 배색」은 색상을 바꾸지 않고 밝기만 검은색 쪽으로 2단계, 흰색 쪽으로 2단계 같은 간격으로 옮깁니다. 기본값 #3B82F6(L ≈ 60%)에서는 밝기가 대략 20%, 40%, 60%, 73%, 87%가 됩니다. 웹사이트 버튼의 기본·눌림·비활성 상태처럼 한 색의 단계가 필요할 때 좋습니다.
색 견본 글자의 가독성
색 견본의 글자는 WCAG 상대 휘도 공식으로 대비가 더 큰 쪽인 검은색이나 흰색으로 표시하므로 항상 4.58:1 이상입니다. 팔레트의 두 색을 글자색과 배경색으로 함께 써도 되는지는 명도 대비 체크에서 확인하세요.
주의할 점
HSL은 단순한 기하학 모델이라 사람 눈에 고르게 느껴지지 않습니다. 같은 L이라도 노란색은 파란색보다 훨씬 밝아 보입니다. 계산된 팔레트는 출발점으로 삼고 마지막에는 눈으로 다듬으세요. 회색은 색상이 없어서 돌려도 같은 색입니다. 다른 형식의 색 코드가 필요하면 색상 코드 변환기를 쓰세요.
자주 묻는 질문
보색이란 무엇인가요?
색상환에서 180° 반대편에 있는 색입니다. 파랑 #0000FF(H = 240°)의 보색은 노랑 #FFFF00(H = 60°), #3B82F6(H ≈ 217°)의 보색은 #F6AF3C 안팎의 주황색입니다.
어떤 색 형식을 넣을 수 있나요?
3·4·6·8자리 HEX(# 있어도 없어도 됨), rgb()·rgba(), hsl()·hsla(), hsv()/hsb(), hwb(), 「59, 130, 246」 같은 숫자 세 개(RGB로 읽음)입니다. CSS Color 4의 쉼표 구분과 띄어쓰기 구분 모두 됩니다.
만든 색을 CSS나 디자인 프로그램에서 쓰려면?
색 견본마다 HEX 복사 버튼이 있습니다. 「CSS 변수로 복사」를 누르면 --farbe-1, --farbe-2 … 가 들어 있는 :root 블록이 클립보드에 들어갑니다. RGB와 HSL 코드는 아래 표에 모두 나옵니다.
팔레트 균형이 어색해 보이는 이유는?
HSL의 밝기는 순수하게 수학적인 값이기 때문입니다. 같은 L이라도 노랑과 청록은 파랑이나 보라보다 훨씬 밝아 보입니다. 필요하면 색마다 밝기를 조정하거나 채도가 낮은 기준색에서 시작하세요.
잘 어울리는 색상 조합은?
색상환에서 일정한 간격에 있는 색들이 조화롭게 보입니다. 강한 대비는 보색(180°), 차분한 분위기는 유사색(이웃한 색상), 균형 잡힌 다채로운 조합은 삼각 배색(120° 간격)을 추천합니다.
출처 및 근거
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
업데이트: · 편집 원칙
관련 도구
- 색상 코드 변환: HEX, RGB, HSL, HSV, CMYK무료 색상 코드 변환기. HEX를 RGB로, RGB를 HEX로 바꾸고 HSL, HSV, HWB, CMYK 값도 한 번에 보여 줍니다. 형식은 자동으로 알아보고 결과는 복사됩니다.
- 명도 대비 체크: 글자색과 배경색 대비 검사글자색과 배경색의 명도 대비를 WCAG 2.2 기준으로 계산하는 무료 웹 접근성 검사기. 일반 글자, 큰 글자, UI 요소의 AA·AAA 통과 여부와 대안 색을 보여 줍니다.
- BMI 계산기: 한국 기준 비만도와 정상 체중BMI 계산기(무료). 키와 몸무게만 넣으면 체질량지수를 계산하고 대한비만학회 기준(정상 18.5~22.9, 비만 25 이상)으로 비만도와 정상 체중 범위를 알려 줍니다.
- 기초대사량 계산기: 공식과 하루 총 소비 칼로리무료 기초대사량 계산기. 성별, 나이, 키, 몸무게로 Mifflin-St Jeor 공식의 기초대사량을 구하고, 활동량(PAL)을 곱한 하루 총 소비 칼로리를 kcal로 보여 줍니다.
- 타율 계산기타율 계산기(안타 ÷ 타수). 출루율·장타율·OPS와 투수의 방어율·WHIP까지 공식 야구 규칙 9.21의 공식으로 한 번에 계산합니다. 6 2/3이닝 입력 가능.
- 임신 주수 계산기: 지금 임신 몇 주일까무료 임신 주수 계산기. 마지막 생리 시작일이나 출산 예정일, 시험관 이식일로 오늘 임신 몇 주 며칠인지, 몇 주차인지, 임신 시기와 개월 수, 남은 날수를 계산합니다.
- 출산 예정일 계산기 (네겔레 법칙)무료 출산 예정일 계산기. 마지막 생리 시작일에 280일을 더하는 네겔레 법칙으로 예정일을 계산하고, 생리 주기 보정, 오늘의 임신 주수, 남은 날수까지 보여 줍니다.
- 배란일 계산기: 가임기와 다음 생리일 추정무료 배란일 계산기. 마지막 생리 시작일과 생리 주기로 배란일, 가임기, 다음 생리 예정일을 3주기까지 추정합니다. 달력 계산법이라 피임 방법으로는 쓸 수 없습니다.
- 수면 계산기: 몇 시에 자고 몇 시에 일어날까무료 수면 계산기. 7시에 일어나려면 몇 시에 자야 하는지, 지금 자면 알람을 몇 시에 맞출지 약 90분 수면 주기 4~6회로 계산합니다. 잠드는 시간도 넣을 수 있습니다.