조화 컬러 팔레트 산출 수식과 HSL 색채학 60-30-10 배색 가이드

직접 해보기 →

UI/UX 디자이너나 프론트엔드 개발자가 새로운 브랜드 웹사이트, 모바일 앱, 대시보드 UI를 기획할 때 가장 먼저 직면하는 핵심 과제가 바로 조화로운 컬러 팔레트(Color Palette) 선정입니다.

무작작으로 예쁜 색상을 여러 개 섞는 대신, 색상환(Color Wheel) 기반의 보색(Complementary), 유사색(Analogous), 삼각 조화(Triadic) 등 색채학 공식에 따라 5개 기본 색상을 조합하면 사용자에게 훨씬 세련되고 전문적인 시각적 분위기를 전달할 수 있습니다. 본 글에서는 무작위 조화 컬러 팔레트 생성 알고리즘과 HSL 색 공간에서의 보색 산출 수식을 해설합니다.

---

1. 색상환(Color Wheel) 조화 색상 계산 수식 공식

컬러 팔레트를 설계할 때 기준 색상의 색조(Hue)를 중심으로 일정 각도만큼 색상환을 회전시켜 색상 배열을 산출하는 공식은 다음과 같습니다:

[ H_i = (H_{\text{base}} + \Delta \theta_i) \bmod 360^\circ ]

주요 색채학 조화 패턴 수식:

• 보색 (Complementary Palette): 기준 색상 H1과 반대편 180도에 위치한 색상을 조합합니다 (H2 = H1 + 180도). 대조감과 주목성이 강조됩니다.
• 유사색 (Analogous Palette): 기준 색상 양옆 30도 간격으로 색상을 선택합니다. 시각적 안정감과 조화로움이 뛰어납니다.
• 삼각 조화 (Triadic Palette): 색상환을 3등분하여 120도 간격으로 색상을 배치합니다 (H1, H1 + 120도, H1 + 240도). 균형 잡힌 다채로움을 제공합니다.

---

2. 무작위 조화 컬러 팔레트 생성 자바스크립트 코드

다음은 마우스 클릭이나 스페이스바 입력 시 조화로운 5색 HEX 팔레트를 동적으로 생성하는 알고리즘 소스입니다:

function generateHarmoniousPalette() {
  const baseHue = Math.floor(Math.random() * 360);
  const baseSat = 65 + Math.floor(Math.random() * 20); // 65% ~ 85% 채도
  const baseLight = 45 + Math.floor(Math.random() * 20); // 45% ~ 65% 명도

  // 5색 조화 색조 각도 오프셋 (유사색 + 보색 조합)
  const offsets = [0, 30, 60, 180, 210];

  return offsets.map(offset => {
    const h = (baseHue + offset) % 360;
    return hslToHex(h, baseSat, baseLight);
  });
}

function hslToHex(h, s, l) {
  l /= 100;
  const a = (s * Math.min(l, 1 - l)) / 100;
  const f = n => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color).toString(16).padStart(2, '0');
  };
  return '#' + f(0) + f(8) + f(4);
}

[!NOTE] 매번 HSL 계산 수식을 직접 작성하거나 디자인 툴을 열어 수동으로 색상을 조합할 필요 없이, 컬러 팔레트 생성기 도구를 활용하면 스페이스바 클릭 한 번으로 조화로운 5색 팔레트를 무작위 생성하고, 마음에 드는 특정 색상만 핀으로 고정한 채 나머지 색상을 무한 개별 재추첨하여 HEX 코드를 추출할 수 있습니다.

---

3. 실무 UI 배색 60-30-10 법칙과 디자인 가이드

1. 인테리어 및 UI 디자인의 60-30-10 배색 법칙: 전체 화면에서 주배경색 60%, 보조 컨테이너/카드 30%, 강조 포인트(CTA 버튼/배지) 10% 비율로 팔레트 색상을 분배하면 사용자의 시선 피로를 최소화하면서 직관적인 계층 구조(Hierarchy)를 완성할 수 있습니다.
2. WCAG 가독성 명암비(Contrast Ratio) 체크: 선정된 5색 중 텍스트와 배경 관계로 사용할 두 색상 간의 명암비가 최소 4.5:1 이상(AA 등급 기준)을 만족하는지 점검하여 저시력 사용자나 야외 직사광선 환경에서의 가독성을 보장해야 합니다.