색상 팔레트 생성기
색상 조화 이론 기반 팔레트를 생성합니다. 보색, 유사색, 삼각 배색 등 지원.
색상 팔레트 생성기는 색상 조화 이론을 기반으로 아름다운 색상 팔레트를 자동 생성하는 도구입니다. HSL 색상 모델을 사용하여 직관적으로 기본 색상을 선택하고, 다양한 조화 유형의 팔레트를 확인할 수 있습니다. 보색, 유사색, 삼각 배색, 분할 보색, 사각 배색, 단색 배색 등 6가지 색상 조화 유형을 지원합니다. 각 색상의 HEX, HSL, RGB 값을 확인하고 원클릭으로 복사할 수 있어 디자인 작업에 바로 활용 가능합니다. 웹 디자인, 앱 UI, 일러스트레이션, 프레젠테이션 등 색상 선택이 필요한 모든 작업에서 활용하세요.
설정
2개 색상
색상 상세
#2680d9#d98026workflow
사용 방법
약 15초
기본 색상 설정
Hue(색상), Saturation(채도), Lightness(명도) 슬라이더로 기본 색상을 선택합니다.
조화 유형 선택
보색, 유사색, 삼각 배색 등 원하는 색상 조화 유형을 선택합니다.
HEX 코드 복사
생성된 팔레트에서 원하는 색상의 HEX 코드를 복사합니다.
principle
계산 원리
색상 조화 이론은 색상환(Color Wheel)을 기반으로 합니다. HSL 모델에서 Hue(색상)는 0°~360° 범위의 각도로 표현되며, 보색은 H + 180°, 유사색은 H ± 30°, 삼각 배색은 H + 120°와 H + 240°의 위치에 있습니다. 분할 보색은 보색 양쪽 30° 위치(H + 150°, H + 210°)의 두 색을 사용합니다.
HSL에서 RGB로의 변환은 수학적으로 구간별 선형 함수로 이루어집니다. 먼저 채도(S)와 명도(L)로 채도 계수 C = (1 - |2L - 1|) × S를 구하고, 색상 각도를 60° 단위로 나누어 6개 구간에서 R, G, B 값을 결정합니다. RGB에서 HEX로의 변환은 각 채널(0~255)을 16진수 2자리로 변환하여 연결합니다.
색상 대비 비율은 WCAG(Web Content Accessibility Guidelines)에서 정의한 상대 휘도(Relative Luminance) 공식 L = 0.2126R + 0.7152G + 0.0722B로 계산합니다. 두 색의 대비 비율은 (L1 + 0.05) / (L2 + 0.05)이며, 텍스트 가독성을 위해 4.5:1 이상이 권장됩니다.
faq
자주 묻는 질문
cases
실생활 예시
웹사이트 색상 테마
새 웹사이트의 메인 컬러가 파란색(#3B82F6)입니다. 조화로운 보조 색상이 필요합니다.
기본 색상을 파랑(210°)으로 설정하고 유사색이나 분할 보색 조화를 사용하면 자연스러운 팔레트를 얻을 수 있습니다.
프레젠테이션 디자인
발표 자료에 일관된 색상을 적용하고 싶습니다.
단색 배색(Monochromatic)을 선택하면 같은 색상의 밝기 변화로 깔끔한 디자인을 만들 수 있습니다.
브랜드 로고 색상 조합
스타트업 브랜드의 로고에 사용할 조화로운 2~3가지 색상이 필요합니다.
분할 보색이나 삼각 배색을 사용하면 대비가 강하면서도 세련된 로고 색상 조합을 찾을 수 있습니다.
인테리어 색상 계획
거실 리모델링에 벽, 가구, 소품의 색상 조합을 미리 확인하고 싶습니다.
유사색 조화로 따뜻한 톤 또는 차가운 톤의 통일감 있는 인테리어 팔레트를 구성할 수 있습니다.
glossary
용어 사전
- 색상환 (Color Wheel)
- 가시광선의 색상을 원형으로 배열한 도표로, 색상 간의 관계(보색, 유사색 등)를 파악하는 데 사용됩니다.
- HSL
- Hue(색상, 0°~360°), Saturation(채도, 0~100%), Lightness(명도, 0~100%)의 세 값으로 색을 표현하는 모델입니다.
- HEX 코드
- 색상을 16진수 6자리(#RRGGBB)로 표현하는 방식으로, 웹 디자인에서 가장 널리 사용됩니다.
- 보색 (Complementary)
- 색상환에서 180° 반대편에 위치한 색상으로, 가장 강한 대비를 만들어 서로를 돋보이게 합니다.
- 유사색 (Analogous)
- 색상환에서 인접한 30° 범위의 색상들로, 자연스럽고 편안한 조화를 만듭니다.
- 채도 (Saturation)
- 색의 선명함 정도를 나타내며, 0%는 무채색(회색), 100%는 가장 선명한 색입니다.
- WCAG 대비 비율
- 웹 접근성 지침에서 정의한 텍스트와 배경 간 색상 대비 기준으로, 일반 텍스트는 4.5:1 이상을 권장합니다.
next tools