사용 방법
- 기준색에 색상 코드를 넣거나 색 고르기로 고릅니다.
#3366cc,rgb(51, 102, 204),hsl(220, 60%, 50%)모두 됩니다. - 조화 방식을 고르면 그 규칙에 맞는 색들이 카드로 나옵니다. “기준” 표시가 있는 카드가 처음 고른 색입니다.
- 카드마다 있는 복사 버튼으로 HEX 코드를 가져갑니다.
- 맨 아래에서 CSS 변수, JSON, HEX 목록 중 형식을 골라 팔레트 전체를 한 번에 복사할 수 있습니다.
조화 방식
색상환(HSL)에서 기준색의 색상각을 돌려 만듭니다. 채도와 밝기는 기준색과 같게 유지합니다.
| 방식 | 색상각 | 느낌 |
|---|---|---|
| 보색 | 0°, 180° | 대비가 가장 강함. 버튼·강조색에 |
| 유사색 | −30°, 0°, +30° | 차분하고 자연스러움 |
| 삼각 | 0°, 120°, 240° | 균형 있고 생동감 있음 |
| 분할 보색 | 0°, 150°, 210° | 보색보다 부드러운 대비 |
| 사각 | 0°, 90°, 180°, 270° | 색이 많아 한 색을 주인공으로 두는 게 좋음 |
| 단색 | 흰색·검정을 30%·60% 섞음 | 한 가지 색의 밝기 단계 |
실제 예시
기준색 #3366cc(파랑, 색상각 220°)로 만들면:
- 보색:
#3366cc+#cc9933(황토색, 40°) - 삼각:
#3366cc,#cc3366(340°),#66cc33(100°) - 단색:
#adc2eb→#7094db→#3366cc→#24478f→#142952
CSS 변수로 내보내면 --color-1: #3366cc;처럼 나오고, 변수 이름 앞부분은 원하는 대로(예: brand) 바꿀 수 있습니다.
주의할 점
- 이 도구의 색상환은 화면 색(RGB)을 기준으로 한 HSL 색상환입니다. 미술 시간에 배우는 빨강·노랑·파랑(RYB) 색상환과는 보색이 다르게 나옵니다. 예를 들어 빨강의 보색은 초록이 아니라 청록(
#00ffff)입니다. - 회색처럼 채도가 거의 없는 색은 색상각을 돌려도 같은 색이 나옵니다. 이때는 단색 방식을 쓰세요.
- 조화 규칙은 출발점일 뿐입니다. 글자와 배경으로 쓸 조합은 색상 코드 변환기에서 명도 대비를 확인하세요. 영감이 필요하면 랜덤 색상 생성기로 시작해도 좋습니다.
자주 묻는 질문
보색은 어떻게 계산하나요?
기준색의 HSL 색상각에 180°를 더합니다. 채도와 밝기는 그대로 둡니다. 220°인 파랑의 보색은 40°인 주황 계열입니다.
만든 팔레트를 피그마나 코드에 바로 쓸 수 있나요?
네. HEX 목록은 디자인 툴에 붙여넣기 좋고, CSS 변수는 스타일시트의 :root에, JSON은 디자인 토큰 파일에 그대로 쓸 수 있습니다.