색상 팔레트 생성기 계산
생성된 팔레트
색상 이론 기반 자동 팔레트입니다. 스와치를 클릭하면 HEX 코드가 복사됩니다.
사용 방법
-
1
기준이 되는 메인 컬러 코드를 입력하거나 선택합니다.
-
2
생성할 색상 수와 스타일(유사색, 보색 등)을 설정합니다.
-
3
생성된 팔레트의 헥사 코드를 확인하고 복사합니다.
HEX, RGB, HSL 색상 코드 체계
| 코드 체계 | 설명 | 예시 |
|---|
| HEX | R·G·B를 16진수 6자리로 표현. 웹 디자인에서 가장 보편적. | #FF5733 |
| RGB | 빛의 삼원색을 0~255 숫자로 조합. | rgb(255, 87, 51) |
| HSL | 색상(Hue)·채도(Saturation)·명도(Lightness) 기반. 직관적 조절 용이. | hsl(12, 100%, 60%) |
색상 조화 이론
| 조화 유형 | 설명 | 특징 |
|---|
| 보색 (Complementary) | 색상환에서 정반대 위치의 색 조합 (빨강↔청록) | 강렬한 대비, 강조 효과 |
| 유사색 (Analogous) | 색상환에서 인접한 3~4가지 색 (노랑, 주황, 빨강) | 자연스럽고 편안한 통일감 |
| 삼색 배합 (Triadic) | 동일 간격 3가지 색 (빨강·노랑·파랑) | 균형 잡히면서 다채로운 느낌 |
| 분할 보색 (Split-Complementary) | 보색을 인접 두 색으로 대체 | 강렬함 유지 + 안정감 |
2026년 디자인 트렌드 색상
| 트렌드 색상 | 특징 및 활용 |
|---|
| 바이오-루미너스 그린 | 자연+디지털 네온 결합, 첨단·환경·웰니스 분야 |
| 솔라 플레어 오렌지 | 활기차고 창의적, 젊음과 긍정 에너지 표현 |
| 디지털 라벤더 | 차분하고 세련된 연보라, 정신건강·웰빙 브랜드 |
| 얼씨 오커(황토색) | 대지의 따뜻함, 지속가능·자연친화 브랜드 |
웹 접근성(WCAG) 색상 대비 기준
| WCAG 등급 | 일반 텍스트 | 큰 텍스트 (18pt+) |
|---|
| AA (최소 기준) | 4.5:1 이상 | 3:1 이상 |
| AAA (강화 기준) | 7:1 이상 | 4.5:1 이상 |
색상 팔레트 구성 시 WCAG AA 기준 이상을 충족하면 저시력자·색각 이상 사용자도 콘텐츠를 명확하게 인식할 수 있습니다.
자주 묻는 질문
Q
HEX, RGB, HSL의 차이는?
HEX는 16진수로 색상을 표현(#RRGGBB)하고, RGB는 빨강·초록·파랑 0~255 조합, HSL은 색조(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현합니다.
Q
보색이란 무엇이고 어떻게 활용하나요?
보색은 색상환에서 정반대(180°)에 위치한 색으로, 함께 사용하면 강한 대비 효과를 줍니다. 강조색이나 CTA 버튼 색상 선택에 자주 활용됩니다.
Q
웹 접근성을 위한 색상 대비 기준은?
WCAG 2.1 기준 일반 텍스트는 배경과의 명도 대비비 4.5:1 이상, 큰 텍스트(18pt 이상)는 3:1 이상을 권장합니다.
