PAL색상 팔레트 생성기
기준 색상으로 보색·유사색·3분할·4분할·단색조 팔레트 생성 (HEX/RGB/HSL 동시 출력)
#3B83F6
#3B83F6
rgb(59,131,246)
hsl(217,91%,60%)
#F6AE3B
#F6AE3B
rgb(246,174,59)
hsl(37,91%,60%)
#3B83F6, #F6AE3B
색상 이론 완벽 가이드
기준 색상 하나로 보색·유사색·3분할·4분할·단색조 등 디자인에 바로 사용할 수 있는 조화로운 색상 팔레트를 즉시 생성합니다. 색상환(Color Wheel) 이론에 기반하며, HEX·RGB·HSL 모든 형식을 원클릭으로 복사해 CSS와 디자인 툴에 바로 적용할 수 있습니다.
색상 이론 기초 — RGB / HSL / 색상환
- RGB: Red, Green, Blue의 빛의 삼원색. 디지털 화면에서 색을 혼합하는 가산혼합 방식. 각 채널 0~255 범위.
- HSL: Hue(색상, 0~360°), Saturation(채도, 0~100%), Lightness(명도, 0~100%). 색을 직관적으로 조정할 때 RGB보다 훨씬 편리합니다.
- 색상환(Color Wheel): HSL의 Hue 값을 원형으로 배치한 것. 보색은 180° 반대, 유사색은 30~60° 인접, 3분할은 120° 간격입니다.
팔레트 종류 — Complementary / Analogous / Triadic 완전 비교
| 팔레트 | 색상 간격 | 느낌 | 적합한 용도 |
|---|---|---|---|
| 보색 (Complementary) | 180° | 강한 대비 | CTA 버튼, 포인트 강조 |
| 유사색 (Analogous) | 30~60° | 부드럽고 통일감 | 배경, 전체 레이아웃 |
| 3분할 (Triadic) | 120° | 활기차고 균형감 | 어린이 앱, 게임 UI |
| 4분할 (Tetradic) | 90° | 풍부하고 복잡함 | 아트, 광고, 일러스트 |
| 분할 보색 (Split-Comp) | 150°+30° | 대비+조화 균형 | 보색보다 세련된 강조 |
| 단색조 (Monochromatic) | 동일 Hue | 정제되고 미니멀 | 고급 브랜드, 기업 UI |
디자인 도구별 적용법 — Figma / CSS Variables
- Figma: 각 HEX 값을 복사 → 색상 스타일(Color Style)에 등록. Color Variables 기능으로 디자인 토큰화 가능.
- CSS Variables:
:root { --color-primary: #3b82f6; }선언 후 전역 사용. 다크모드는[data-theme='dark']에서 값만 교체. - Tailwind CSS:
tailwind.config.js의extend.colors에 HEX 등록.
접근성 — WCAG 대비 기준
WCAG(Web Content Accessibility Guidelines) 2.1 기준:
- AA 기준: 일반 텍스트 4.5:1 이상, 큰 텍스트(18pt+) 3:1 이상
- AAA 기준: 일반 텍스트 7:1 이상 (최상위 접근성)
- 밝은 배경(Lightness 50% 이상)에는 어두운 텍스트, 어두운 배경에는 밝은 텍스트를 기본으로 합니다.
- 단색조 팔레트를 사용할 때 대비가 낮아지기 쉬우므로 반드시 대비 비율을 확인하세요.
자주 묻는 질문 (FAQ)
Q. 보색과 유사색, 언제 각각 써야 하나요?
강조·CTA(클릭 유도)에는 보색, 전체 배경이나 카드 등 조화가 중요한 곳에는 유사색을 사용하세요. 보색은 시각적 피로가 빠르므로 소량만 사용합니다.
Q. 팔레트를 Figma에 바로 적용할 수 있나요?
네. 각 색상 카드의 HEX 값을 복사해 Figma 색상 스타일에 붙여넣으면 됩니다. Figma Variables에서 시맨틱 토큰(--color-primary 등)으로 관리하면 더 효율적입니다.
Q. HSL이 RGB보다 나은 이유는?
HSL은 색조(H)·채도(S)·명도(L)를 독립적으로 조절할 수 있어 색을 직관적으로 수정할 수 있습니다. 예를 들어 L 값만 바꾸면 같은 색조의 밝기를 손쉽게 조정할 수 있습니다.
Q. 생성된 팔레트를 파일로 저장할 수 있나요?
현재 전체 HEX 목록을 복사 버튼으로 클립보드에 복사할 수 있습니다. 복사한 값을 텍스트 파일이나 CSS 파일에 직접 붙여넣어 사용하세요.