컬러 팔레트 생성기

색상 이론 기반 조화로운 배색 자동 추천

기준 색상

#3CE0F6

rgb(60, 224, 246)

hsl(187, 91%, 60%)

#3B82F6

rgb(59, 130, 246)

hsl(217, 91%, 60%)

#523CF6

rgb(82, 60, 246)

hsl(247, 91%, 60%)

#AF3CF6

rgb(175, 60, 246)

hsl(277, 91%, 60%)

명암 대비:#3CE0F6/#3B82F6: 2.31:1 미달#3CE0F6/#523CF6: 3.95:1 미달#3CE0F6/#AF3CF6: 2.75:1 미달

내보내기

:root {
  --color-1: #3CE0F6;
  --color-2: #3B82F6;
  --color-3: #523CF6;
  --color-4: #AF3CF6;
}

사용 방법

1. 색상 피커 또는 HEX 코드 입력으로 기준 색상을 선택하세요.

2. 보색, 유사색, 삼색 조화 등 원하는 배색 유형을 선택하세요.

3. 생성된 팔레트의 각 색상을 클릭하면 HEX 코드가 복사됩니다.

4. 내보내기 옵션으로 CSS, JSON, Tailwind 형식으로 복사하세요.

※ 안내사항

색상 이론(Color Theory)에 기반한 조화로운 배색을 자동 생성합니다.
모든 색상 값은 클릭 한 번으로 클립보드에 복사됩니다.
WCAG 기준 명암 대비를 확인하여 접근성을 검증할 수 있습니다.

자주 묻는 질문

보색(Complementary)은 색상환에서 정반대에 위치한 두 색상으로, 강한 대비를 만듭니다. 유사색(Analogous)은 색상환에서 인접한 색상들로, 자연스럽고 편안한 조화를 만듭니다. 보색은 주목도가 높은 디자인에, 유사색은 통일감 있는 디자인에 적합합니다.

삼색 조화는 색상환에서 120도 간격으로 배치된 세 가지 색상을 사용하는 배색 방법입니다. 풍부하고 균형 잡힌 배색을 만들 수 있으며, 하나를 주색으로 나머지 두 색을 강조색으로 사용하면 효과적입니다.

단색 조화는 하나의 색조(Hue)에서 명도와 채도만 변화시켜 팔레트를 구성합니다. 세련되고 통일감 있는 디자인에 적합하며, 브랜딩, 최소주의 디자인, 배경 그래디언트 등에 많이 활용됩니다.

WCAG(Web Content Accessibility Guidelines)에서 일반 텍스트는 4.5:1, 큰 텍스트(18px 이상 또는 14px 굵은 글씨)는 3:1 이상의 명암 대비를 권장합니다. AAA 등급은 일반 7:1, 큰 텍스트 4.5:1 이상입니다.

컬러 팔레트와 색상 이론 완벽 가이드

효과적인 디자인을 위해 색상 이론을 이해하고 활용하는 것은 매우 중요합니다. 올바른 컬러 팔레트는 브랜드 아이덴티티를 강화하고 사용자 경험을 향상시킵니다.

색상 이론의 기본 원리

색상 이론은 색상환(Color Wheel)을 기반으로 색상 간의 관계를 설명합니다. 1차색(빨강, 노랑, 파랑), 2차색(주황, 초록, 보라), 3차색의 조합을 통해 무한한 배색을 만들 수 있습니다. 보색은 강렬한 대비를, 유사색은 자연스러운 조화를 제공하며, 이러한 원리를 이해하면 목적에 맞는 효과적인 색상 선택이 가능합니다.

웹 디자인에서의 컬러 팔레트 활용

웹 디자인에서 컬러 팔레트는 보통 주색(Primary), 보조색(Secondary), 강조색(Accent), 중립색(Neutral)으로 구성됩니다. 60-30-10 규칙(주색 60%, 보조색 30%, 강조색 10%)을 적용하면 시각적으로 균형 잡힌 디자인을 만들 수 있습니다. 또한 접근성을 위해 텍스트와 배경 간 충분한 명암 대비를 유지하는 것이 중요합니다.