Color Palette Generator

기본 색상을 선택하고 검증된 색채 이론 규칙을 사용해 조화로운 팔레트를 생성해요. 음영을 미리 보고 hex 값이나 CSS 변수를 복사할 수 있어요. 모든 작업이 브라우저에서 이루어져요.

작동 방식: 기본 색상을 선택하고 조화 유형을 정한 후 팔레트를 즉시 받아요. 색상 칩을 클릭하면 hex 값이 복사돼요. Copy CSS로 모든 색상을 CSS custom properties로 내보낼 수 있어요. 데이터가 브라우저를 벗어나지 않아요.

#3bdff6rgb(59, 223, 246)hsl(187, 91%, 60%)
#3b82f6rgb(59, 130, 246)hsl(217, 91%, 60%)
#523bf6rgb(82, 59, 246)hsl(247, 91%, 60%)

색상 조화란?

색상 조화는 시각적으로 쾌적한 방식으로 색상을 배치하는 것을 뜻해요. 색채 이론에 기반한 색상 조화는 색상환에서 색상 간의 관계에 의존해요. 디자이너들은 조화로운 팔레트를 사용해 응집력 있고 균형잡힌 인터페이스를 만들어요. 보색, 유사색, 삼원색, 사각 조화 같은 가장 흔한 조화 규칙들은 자의적이지 않아요. 이들은 색상환의 기하학적 관계에 대응되고 인간의 시각 체계가 대비와 유사성을 인식하는 방식을 활용해요.

HSL 색상 모델

HSL은 Hue(색상), Saturation(채도), Lightness(명도)를 의미해요. RGB는 빨강, 초록, 파랑 빛의 혼합으로 색상을 설명하지만 HSL은 인간이 색상을 생각하는 방식과 일치하는 용어로 설명해요. Hue는 색상환의 각도(0–360°)고, Saturation은 색상이 얼마나 선명한지 조절하고(0% = 회색, 100% = 순색), Lightness는 밝기를 조절해요(0% = 검정, 100% = 흰색). HSL은 색상 조화를 계산하기 쉽게 만들어요. 보색은 단순히 180° 떨어져 있고, 삼원색은 120° 떨어져 있으며, 유사색은 서로 ±30° 범위에 있어요.

조화 유형 설명

보색 팔레트는 색상환에서 정확히 반대편 색상을 짝지어 최고의 대비를 만들어요. Call-to-action과 강조에 이상적이에요. 유사색 팔레트는 인접한 세 가지 색상을 사용해 차분하고 자연스러운 느낌을 연출해요. 배경과 콘텐츠 영역에 적합해요. 삼원색 팔레트는 세 가지 색상을 120° 간격으로 배치해 시각적 균형을 유지하면서 생기 있는 다양성을 제공해요. 분할 보색은 직접 보색을 그 옆의 두 색상으로 바꿔 대비를 부드럽게 해요. 사각 조화(직사각형)는 네 가지 색상을 두 개의 보색 쌍으로 사용해 최대의 다양성을 제공하지만 신중한 균형이 필요해요. 단색 팔레트는 한 가지 색상의 명도만 변화시켜 조화를 보장하면서도 읽을 수 있는 인터페이스를 위한 충분한 대비를 제공해요.

UI 디자인에서 색상 팔레트 사용 팁

  • 60-30-10 규칙을 사용해요: 주요 색상 60%, 보조 색상 30%, 악센트 10%
  • 단색 팔레트는 다크 모드 개발자 도구에서 가장 안전한 선택이에요
  • 명도 대비를 확인해요 — WCAG AA는 일반 텍스트에 최소 4.5:1을 요구해요
  • CSS 변수 출력을 복사해서 :root 블록에 직접 붙여넣어요
  • 사각 조화는 시각적 혼란을 피하기 위해 명확한 주요 색상이 필요해요
  • 적용하기 전에 밝은 배경과 어두운 배경 모두에서 팔레트를 테스트해요