색상 팔레트 생성기

베이스 색상에서 보색, 유사색, 삼색, 사색 배색 팔레트 생성

예시 시도

베이스 색상

배색 유형

생성된 팔레트

색상 팔레트란?

색상 팔레트는 디자인에서 함께 사용하도록 선택된 고정된 색상 집합입니다. 브랜드, 웹사이트, 일러스트레이션을 위한 베이스 색상 하나를 선택했을 때, 그 옆에 잘 어울리는 보조 색상이 필요합니다. 색상 팔레트 생성은 색채 이론의 규칙, 특히 표준 HSL 색상환의 기하학적 관계를 적용하여 이 선택을 자동화합니다.

HSL(색조, 채도, 명도) 색상환은 360도 원형으로 색조를 배열합니다. 빨간색은 0도, 초록색은 120도, 파란색은 240도에 위치합니다. 모든 색상 배색 유형은 베이스 색상으로부터 특정 각도 거리에서 색조를 선택하는 방식으로 작동합니다. 예를 들어 보색은 180도 반대편에 있는 두 색상을 사용합니다. 유사색은 양쪽으로 30도 이내의 색상을 선택합니다. 이러한 기하학적 규칙은 선택된 색조가 한 영역에 집중되지 않고 색상환 전체에 분산되므로 균형 잡힌 조합을 만들어냅니다.

이 도구는 임의의 hex 색상을 입력받아 HSL로 변환하고, 선택된 배색 유형이 정의하는 각도만큼 색조를 회전시킨 후 결과를 다시 hex로 변환합니다. 보색, 유사색, 삼색, 분할 보색, 사색, 단색 등 여섯 가지 배색 유형을 지원합니다. 각 유형은 2~5개의 색상을 출력합니다.

이 색상 팔레트 생성기를 사용하는 이유

시행착오를 통해 어울리는 색상을 고르는 것은 느리고 일관성이 없습니다. 팔레트 생성기는 색채 이론 규칙을 즉시 적용하여 어떤 출발점에서도 수학적으로 균형 잡힌 결과를 제공합니다.

즉각적인 팔레트 생성
베이스 색상과 배색 유형을 선택하면 팔레트가 즉시 표시됩니다. 폼 제출도, 로딩 화면도 없습니다. 베이스 색상을 바꾸면 결과가 실시간으로 업데이트됩니다.
🎨
여섯 가지 배색 유형
보색, 유사색, 삼색, 분할 보색, 사색, 단색 중 선택하세요. 각 유형은 고대비 색상 쌍부터 섬세한 단일 색조 그라데이션까지 다양한 시각적 효과를 만들어냅니다.
🔒
개인정보 보호 우선 처리
모든 색상 연산은 브라우저에서 실행됩니다. 색상 데이터가 서버로 전송되지 않으며, 페이지가 로드된 후에는 오프라인에서도 작동합니다.
📋
원클릭 내보내기
개별 hex 코드나 전체 팔레트를 한 번의 클릭으로 복사하세요. CSS, Figma, Tailwind 설정 파일, 또는 hex 값을 지원하는 모든 디자인 도구에 바로 붙여넣을 수 있습니다.

색상 팔레트 생성기 활용 사례

UI 테마 제작
새 앱을 개발하는 프런트엔드 개발자는 브랜드 색상에서 시작하여 기본, 보조, 강조 토큰에 사용할 전체 팔레트를 생성할 수 있습니다. 삼색이나 사색 배색은 버튼, 링크, 알림, 배경에 충분한 색상 다양성을 제공합니다.
디자인 시스템 색상 토큰
디자인 시스템 엔지니어는 단색 팔레트를 사용하여 단일 브랜드 색조의 명도 스케일을 생성한 후, 각 단계를 명명된 토큰(예: blue-100 ~ blue-900)에 매핑합니다.
데이터 시각화
데이터 엔지니어와 분석가는 차트 시리즈에 서로 충돌하지 않는 구분되는 색상이 필요합니다. 유사색이나 삼색 팔레트는 차트의 시각적 일관성을 유지하면서 3~6개 시리즈에 충분한 색상 차이를 제공합니다.
마케팅 랜딩 페이지
캠페인 페이지를 디자인하는 디자이너는 브랜드 기본 색상에서 시작하여 분할 보색 배색으로 로고와 충돌하지 않는 CTA 버튼과 강조 섹션의 액센트 색상을 찾습니다.
접근성 색상 조합
WCAG 준수 여부를 테스트하는 QA 엔지니어는 생성된 팔레트 색상을 쌍으로 묶어 대비 검사기로 검증합니다. 보색이나 분할 보색 배색에서 시작하면 높은 휘도 대비를 가진 색상 쌍이 나오는 경우가 많습니다.
색채 이론 학습
디자인을 공부하는 학생은 동일한 베이스 색상으로 여섯 가지 배색 유형을 전환하며 각 기하학이 색상환에서 색조를 어떻게 분산시키는지 확인할 수 있습니다. 시각적 결과물은 추상적인 각도를 직관적으로 이해하게 해줍니다.

색상 배색 유형 비교

모든 배색 유형은 HSL 색상환에서 베이스 색상으로부터의 색조 회전 각도를 기반으로 색상을 선택합니다. 아래 표는 각 유형, 생성 색상 수, 회전 각도, 가장 적합한 디자인 상황을 정리합니다.

배색 유형색상 수색조 각도적합한 용도
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

HSL 색상환 회전 원리

이 도구의 모든 팔레트 생성은 HSL 색상 모델을 기반으로 합니다. 세 가지 축을 이해하면 베이스 색상이 각 배색 유형에서 어떻게 변환될지 예측할 수 있습니다.

색조(Hue, 0-360)
색상환에서의 위치를 도 단위로 나타냅니다. 0은 빨간색, 60은 노란색, 120은 초록색, 180은 시안, 240은 파란색, 300은 마젠타입니다. 배색 유형은 채도와 명도를 유지한 채 이 값을 회전시킵니다.
채도(Saturation, 0-100%)
색상의 선명도를 나타냅니다. 100%는 완전히 채도가 높은 상태이고, 0%는 회색입니다. 배색 유형은 베이스 채도를 유지하므로 생성된 모든 색상은 동일한 채도를 공유합니다.
명도(Lightness, 0-100%)
색상의 밝기를 나타냅니다. 0%는 검정, 50%는 순수 색조, 100%는 흰색입니다. 단색 배색은 명도를 변경하여 톤 스케일을 만들고, 다른 배색 유형은 명도를 유지합니다.

코드 예제

HSL 변환과 색조 회전을 사용하여 프로그래밍 방식으로 색상 팔레트를 생성하세요.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

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

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

자주 묻는 질문

보색과 분할 보색의 차이는?
보색은 색상환에서 정확히 180도 반대편에 있는 두 색상을 사용하여 최대 색조 대비를 만들어냅니다. 분할 보색은 직접 반대편 대신 베이스 색상에서 150도와 210도에 위치한 두 색상을 사용하여 시각적 긴장감을 줄이면서도 강한 대비를 제공합니다. 분할 보색은 어떤 액센트 색상도 베이스와 직접 대립하지 않으므로 UI 디자인에서 다루기 더 쉽습니다.
UI 팔레트에는 색상이 몇 개가 적당한가요?
대부분의 디자인 시스템은 기본색, 보조색, 중립색, 액센트 1~2개 등 3~5개의 핵심 색조를 사용합니다. 각 핵심 색조는 명도 스케일(100~900)을 가집니다. 핵심 색조에는 삼색이나 사색 배색으로 시작하고, 각 색조의 단색 스케일을 생성하세요.
이 팔레트를 Tailwind CSS에서 사용할 수 있나요?
네. hex 값을 복사하여 tailwind.config.js 또는 tailwind.config.ts 파일의 colors 객체에 추가하세요. 단색 스케일의 경우 Tailwind의 명명 규칙에 맞게 각 색조를 번호 키(50, 100, 200 등)에 매핑하세요.
생성된 색상이 탁하거나 칙칙해 보이는 이유는?
베이스 색상의 채도가 낮거나 명도가 극단적(0% 또는 100%에 매우 가까운)이면 회전된 색조도 흐릿하게 보입니다. 생성기는 베이스 색상의 채도와 명도 값을 그대로 유지합니다. 선명한 팔레트를 원한다면 채도 50% 이상, 명도 30%~70% 사이의 베이스 색상을 선택하세요.
HSL과 HSV/HSB의 차이는?
HSL과 HSV는 모두 색조를 원형 축으로 사용하지만 밝기를 다르게 정의합니다. HSL에서는 명도 50%가 순수 색조이고 100%가 흰색입니다. HSV(HSB라고도 함)에서는 값(Value) 100%가 순수 색조이며, 채도를 낮추지 않으면 흰색에 도달할 수 없습니다. 대부분의 팔레트 생성기는 명도 축이 색상 밝기의 인식과 더 직관적으로 대응하는 HSL을 사용합니다.
색상 배색과 접근성의 관계는?
색상 배색과 WCAG 대비는 별개의 개념입니다. 보색 쌍은 색조 대비가 최대이지만, 텍스트 가독성을 위한 충분한 휘도 대비를 보장하지는 않습니다. 팔레트를 생성한 후 각 전경/배경 색상 쌍을 WCAG AA(일반 텍스트 4.5:1 비율)에 대해 테스트하세요. 명도가 비슷한 색상은 색조 관계에 상관없이 기준을 통과하지 못합니다.
HSL은 CSS의 hsl() 함수와 동일한가요?
네. CSS hsl() 함수는 세 가지 인수를 받습니다: 도 단위의 색조(0-360), 백분율 단위의 채도, 백분율 단위의 명도입니다. CSS Color Level 4는 슬래시로 구분된 알파 값도 지원합니다: hsl(240 60% 50% / 0.8). 이 생성기가 사용하는 HSL 모델은 CSS 사양과 정확히 일치하므로 색조, 채도, 명도 값을 스타일시트에 바로 붙여넣을 수 있습니다.