색상 팔레트 생성기 - 배색 조합 만들기 온라인

색상 이론으로 조화로운 팔레트를 생성하세요. 보색, 유사색, 삼원색, 분할보색 배색을 인터랙티브 색상환으로 만들기.

HEX

가장 가까운 색: royalblue

색조220°

채도70%

명도50%

생성된 팔레트

기본#2662D9

#D99D26

쉐이드 & 틴트 스케일

밝은색부터 어두운색까지 10단계 색상 스케일

50#E9EFFB

100#D4E0F7

200#A8C0F0

300#7DA1E8

400#5281E0

500#2662D9

600#1F4EAD

700#173B82

800#0F2757

900#08142B

내보내기

자주 묻는 질문

컬러 팔레트 생성기란 무엇인가요?

컬러 팔레트 생성기는 색상 이론 원리를 기반으로 조화로운 색상 세트를 만드는 온라인 도구입니다. 하나의 기본 색상에서 색상환의 수학적 관계(보색, 유사색, 삼원색 조화 등)를 사용하여 시각적으로 어울리고 디자인에서 잘 어울리는 팔레트를 생성합니다.

이 도구는 어떻게 사용하나요?

인터랙티브 컬러 휠을 사용하여 기본 색상을 선택하거나 HEX/RGB/HSL 값을 입력 필드에 입력하세요. 하모니 모드(보색, 유사색, 삼원색, 사원색, 분할보색, 단색)를 선택하세요. 생성된 팔레트가 색상 스와치로 표시됩니다. 개별 색상을 잠근 후 다른 색상을 재생성할 수 있습니다. 개별 색상이나 전체 팔레트를 복사하세요. CSS 변수, Tailwind 설정, JSON, SCSS 변수로 내보낼 수 있습니다.

내 색상 데이터는 안전한가요? 서버로 전송되나요?

색상 데이터는 100% 안전하며 브라우저를 떠나지 않습니다. 모든 색상 계산, 하모니 생성, 팔레트 생성은 JavaScript를 사용하여 클라이언트 측에서 수행됩니다. 어떤 데이터도 서버로 전송되지 않으므로 브랜드 색상이나 기밀 디자인 작업을 안전하게 탐색할 수 있습니다.

색상 하모니란 무엇이며 왜 중요한가요?

색상 하모니는 색상환에서의 위치를 기반으로 미적으로 만족스러운 색상 조합입니다. 무작위로 선택한 색상은 종종 충돌하지만, 조화로운 색상은 시각적 균형과 일관성을 만들어냅니다. 6가지 주요 하모니 유형은: 보색(높은 대비, 생동감), 유사색(차분하고 편안한 느낌), 삼원색(균형 잡힌 팔레트), 사원색(풍부하고 다양한 스킴), 분할보색(높은 대비와 적은 긴장감), 단색(통일되고 우아한 모습)입니다.

이 도구와 색상 변환기의 차이점은 무엇인가요?

색상 변환기는 색상 형식(HEX, RGB, HSL, CMYK) 간 변환에 초점을 맞추고 기본적인 팔레트 탭을 포함합니다. 컬러 팔레트 생성기는 인터랙티브 컬러 휠, 6가지 하모니 모드, 팔레트 잠금, 쉐이드/틴트 스케일 생성, 디자인 시스템 및 CSS 프레임워크를 위한 다양한 내보내기 형식 등 팔레트 생성에 특화된 도구입니다.

생성된 팔레트를 Tailwind CSS 프로젝트에서 사용할 수 있나요?

네. 이 도구는 쉐이드 값(50-900)이 포함된 즉시 붙여넣기 가능한 색상 객체를 생성하는 Tailwind CSS 설정 내보내기를 제공합니다. 출력을 복사하여 tailwind.config.js 파일의 colors 키 아래에 직접 추가할 수 있습니다.

쉐이드/틴트 스케일이란 무엇이며 어떻게 작동하나요?

쉐이드/틴트 스케일은 기본 색상에서 매우 밝은(50)에서 매우 어두운(900)까지 10단계의 색상 변형을 생성합니다. 이는 Tailwind CSS 및 인기 있는 디자인 시스템에서 사용하는 명명 규칙을 따릅니다. 틴트는 명도를 높여(더 밝게), 쉐이드는 명도를 낮춰(더 어둡게) 생성되며, 동일한 색조와 채도를 유지합니다.

코드 예제

// Color Palette Generator
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;
    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)}`;
}

function generatePalette(baseHue, saturation, lightness, harmonyType) {
  let hues;
  switch (harmonyType) {
    case 'complementary':
      hues = [baseHue, (baseHue + 180) % 360];
      break;
    case 'analogous':
      hues = [(baseHue - 30 + 360) % 360, baseHue, (baseHue + 30) % 360];
      break;
    case 'triadic':
      hues = [baseHue, (baseHue + 120) % 360, (baseHue + 240) % 360];
      break;
    case 'monochromatic':
      return [15, 30, 50, 70, 85].map(l => hslToHex(baseHue, saturation, l));
    default:
      hues = [baseHue];
  }
  return hues.map(h => hslToHex(h, saturation, lightness));
}

const palette = generatePalette(220, 70, 50, 'triadic');
console.log(palette);