Palette Generator：색상 조합 생성 도구

Palette Generator란?

곧 출시 예정: Palette Generator는 색상 이론 알고리즘을 적용하여 단일 기본 색상으로부터 수학적으로 균형 잡힌 색상 팔레트를 생성하는 브라우저 기반 도구입니다. 세 가지 모드를 제공합니다: 하모니(보색・유사색・삼색 조화・사색 조화・분할 보색・단색・이중 분할 보색・직사각형・클래시・파이브톤・식스톤을 포함한 11가지 하모니 유형), 생성(셰이드/틴트/톤・제한된 랜덤・WCAG 대비 쌍・그라디언트 보간・이미지 색상 추출), 무드(20가지 무드 기반 프리셋). 결과물은 헥스 값으로 복사하거나, CSS 변수 파일・JSON 객체・SCSS 변수・Tailwind 설정 확장으로 다운로드하거나, Adobe Swatch Exchange(ASE) 파일로 내보낼 수 있는 팔레트입니다. 모든 작업은 브라우저에서 실행되며, 서버로 데이터가 전송되지 않습니다.

주요 기능

• 보색 색상 구성: 색상환에서 직접 대향하는 색상(180° 거리)을 사용하여 2색 팔레트를 생성하고, 고유한 시각적 균형과 함께 최대 대비를 만들어냅니다.
• 유사색 팔레트: 색상환에서 인접한 3가지 색상을 생성하여, 배경과 차분한 UI 디자인에 적합한 조화롭고 낮은 대비의 팔레트를 만듭니다.
• 삼색 조화와 사색 조화: 삼색 조화는 120° 간격으로 균등하게 배치된 3색을 사용하고, 사색 조화는 90° 간격으로 4색을 사용합니다. 둘 다 조화를 유지하면서 풍부한 멀티컬러 옵션을 제공합니다.
• 분할 보색 구성: 보색의 부드러운 대안 — 보색 자체 대신 기본 색상과 보색에 인접한 두 색상을 사용합니다. 컴포넌트에서 'split-complementary' 하모니 유형으로 검증되었습니다.
• 단색 변형: 밝기를 변경하여 동일한 색조의 여러 셰이드를 생성하고, 일관된 단일 색조 팔레트를 만듭니다.
• 채도와 밝기 조정: 기본 색상 입력은 수동으로 입력하거나, 색상 피커 위젯으로 선택하거나, 랜덤 버튼으로 무작위 생성된 유효한 HEX 값을 허용합니다.
• 여러 형식으로 색상 복사: 팔레트의 각 색상에는 개별 복사 버튼이 있습니다. "모두 복사" 버튼은 팔레트 전체를 쉼표로 구분된 HEX 값으로 작성하고 세션 기록에도 작업을 기록합니다.
• 팔레트를 JSON・CSS・SCSS・Tailwind・ASE로 내보내기: 도구에서 직접 5가지 내보내기 형식을 사용할 수 있으며, 웹 개발・스타일시트 전처리기・Adobe 디자인 애플리케이션을 포괄합니다.

Palette Generator 사용 방법

1단계: 기본 색상 선택

곧 출시 예정: Palette Generator를 엽니다. 도구는 현재 사이트 색상 구성에서 파생된 기본 색상으로 로드됩니다(기본 구성은 파란색 사용). 세 가지 방법으로 변경할 수 있습니다:

• 색상 스와치 입력을 클릭합니다(네이티브 브라우저 색상 피커가 열립니다)
• 스와치 옆 텍스트 필드에 HEX 값을 직접 입력하거나 붙여넣습니다
• "랜덤" 버튼을 클릭하여 무작위 HEX 색상을 생성합니다

큰 프리뷰 스와치가 실시간으로 업데이트되어 대비 텍스트로 헥스 값과 함께 기본 색상을 표시합니다.

2단계: 하모니 유형 선택

기본 색상 섹션 아래에 11가지 하모니 유형 버튼이 그리드로 표시됩니다. 하나를 클릭하여 선택합니다:

활성 하모니 유형 버튼은 기본 색상으로 강조 표시됩니다. 선택을 변경할 때마다 생성된 팔레트가 즉시 업데이트됩니다.

3단계: 생성된 팔레트 검토

"생성된 팔레트" 섹션은 결과의 두 가지 보기를 보여줍니다:

• 각각 비례적인 너비를 차지하는 색상 블록의 수평 밴드. 임의의 블록을 클릭하면 해당 색상의 HEX 값이 직접 복사됩니다.
• 밴드 아래의 목록에는 각 색상의 HEX 코드가 스와치와 개별 복사 버튼과 함께 표시됩니다. 첫 번째 항목은 기본 색상으로 표시됩니다.

예를 들어, 삼색 조화로 #e63946에서 시작하면:

#e63946  (기본)
#46e639
#3946e6

4단계: 복사 또는 내보내기

내보내기 버튼을 사용하여 워크플로우에 맞게 팔레트를 저장합니다:

• JSON 내보내기: { baseColor, harmonyType, palette }를 포함하는 triadic-palette.json을 다운로드합니다.
• CSS 내보내기: :root CSS 사용자 지정 속성 --color-1・--color-2 등으로 triadic-palette.css를 다운로드합니다.
• Tailwind JS 내보내기: color-1・color-2 등의 항목과 함께 palette를 색상 패밀리 키로 사용하는 Tailwind 설정 theme.extend.colors 블록이 포함된 triadic-tailwind.js를 다운로드합니다.
• SCSS 변수 내보내기: $color-1・$color-2 등과 Sass 맵이 포함된 triadic-palette.scss를 다운로드합니다.
• ASE 내보내기(프리미엄): Photoshop・Illustrator 및 기타 Adobe 애플리케이션에서 읽을 수 있는 바이너리 Adobe Swatch Exchange 파일을 다운로드합니다.

5단계: 프리셋으로 저장 또는 초기화

이 기본 색상과 하모니 유형 조합을 정기적으로 사용하는 경우, 프리셋 패널(Glyph Widgets 서포터 기능)을 사용하여 이름으로 저장하고 원클릭으로 불러올 수 있습니다. 기본값을 복원하려면 지우기 버튼을 클릭합니다 — 기본 색상 #8467c7과 보색 하모니 유형으로 재설정됩니다.

실용적인 사용 예시

랜딩 페이지 색상 시스템 설계

기본 브랜드 색상, 예를 들어 #0f62fe(IBM 블루)로 시작합니다. 더 부드러운 대비 쌍을 얻기 위해 분할 보색 하모니를 선택합니다. 결과적으로 충돌 없이 함께 작동하는 기본 파란색과 두 가지 따뜻한 강조색 옵션을 얻습니다. CSS 변수로 내보내어 스타일시트의 :root 블록에 직접 붙여넣습니다.

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

Tailwind 팔레트 확장 생성

Tailwind CSS 프로젝트를 구축 중이고 사용자 지정 색상 패밀리가 필요한 경우. 브랜드 색상을 입력하고, 밝은 색에서 어두운 색까지 셰이드를 생성하기 위해 단색을 선택한 다음 Tailwind JS로 내보냅니다. 다운로드된 파일에는 각 셰이드가 monochromatic-1・monochromatic-2 등으로 인덱싱된 바로 붙여넣을 수 있는 theme.extend.colors 블록이 있습니다.

Adobe Illustrator 프로젝트용 스와치 준비

인쇄 디자인에서 웹 색상 팔레트를 맞춰야 하는 경우. 기본 색상을 입력하고, 하모니 유형을 선택한 다음 ASE로 내보냅니다. 바이너리 ASE 파일은 ASEF 형식을 따르며, 모든 RGB 값을 수동으로 재입력하지 않고 Illustrator의 Swatches 패널에 직접 로드할 수 있습니다.

팁과 모범 사례

랜덤 버튼은 완전히 무작위 HEX 기본 색상을 설정합니다. 의도적으로 선택하지 않았을 하모니를 탐색하는 데 사용하세요 — 새로운 디자인을 위한 예상치 못한 출발점을 찾는 빠른 방법입니다.

하모니 유형을 비교할 때, 기본 색상은 항상 생성된 각 팔레트의 첫 번째 항목임을 알아 두세요. 이를 통해 다양한 보완 옵션을 탐색하면서 이미 결정한 색상(로고 색상, 브랜드 가이드라인 값)에 팔레트를 고정할 수 있습니다.

삼색 조화 팔레트는 세 가지 명확히 구별되는 기능적 색상이 필요할 때 효과적입니다 — 기본 액션・보조 액션・파괴적 또는 경고 상태. 120° 간격으로 인해 어떤 두 색상도 시각적으로 너무 유사하지 않습니다.

접근성을 위해 최종화하기 전에 생성된 팔레트의 색상을 Contrast Checker로 검토하세요. 보색 쌍은 종종 WCAG 대비 요건을 충족하지만, 유사색 팔레트는 텍스트 사용에 실패하는 조합을 생성할 수 있습니다.

기록 패널(서포터 기능)은 기본 색상과 하모니 유형과 함께 모든 "모두 복사" 액션을 기록하여, 정확한 값을 기억하지 않고도 세션에서 이전에 생성한 팔레트로 돌아갈 수 있습니다.

일반적인 문제 및 해결 방법

HEX 값을 입력해도 팔레트가 업데이트되지 않음: 도구는 텍스트 입력의 각 키 입력에 반응합니다. 불완전하거나 잘못된 HEX 문자열을 입력하면, generateHarmony 함수가 현재 값을 받아 값이 유효한 6자리 HEX가 될 때까지 예상치 못한 출력을 생성할 수 있습니다. 전체 값을 입력하거나 유효한 결과를 보장하기 위해 색상 피커 입력을 사용하세요.

랜덤 버튼이 매우 어둡거나 밝은 팔레트를 생성함: generateRandomColor() 함수는 거의 검정색에서 거의 흰색까지 HEX 값의 전체 범위를 생성합니다. 무작위 결과가 너무 극단적이면, 다시 랜덤을 클릭하거나 색상 피커를 사용하여 기본 색상을 수동으로 조정하세요.

ASE로 내보내면 Adobe에서 열 수 없는 파일이 생성됨: ASE 내보내기는 DataView를 사용하여 브라우저에서 바이너리 ASEF 형식 파일을 구성합니다. 다운로드에 0바이트가 포함되거나 파일이 거부되면, 브라우저가 application/octet-stream과 함께 Blob을 지원하는지 확인하세요. 최신 Chromium 기반 브라우저와 Firefox는 이를 올바르게 처리합니다.

"모두 복사"가 쉼표로 구분된 목록을 복사하지만 줄바꿈으로 구분된 값이 필요함: 클립보드 출력은 , 를 구분자로 사용합니다. 텍스트 편집기에 값을 붙여넣고, 대상 도구가 줄당 하나의 값을 요구하면 찾기-바꾸기를 사용하여 , 를 줄바꿈으로 변경하세요.

지우기 버튼이 기본값으로 재설정됨: 지우기 버튼은 현재 사이트 색상 구성의 기본 색상과 보색 하모니 유형을 포함한 기본 설정을 복원하도록 설계되었습니다. 이것은 예상된 동작입니다 — 이전 사용자 지정 색상을 복원하지 않습니다.

개인정보 보호 및 보안

Palette Generator는 완전히 클라이언트 사이드에서 실행됩니다. 모든 색상 조화 계산은 JavaScript를 사용하여 브라우저에서 이루어집니다 — 색상 값・기본 설정・내보내기 데이터는 어떤 서버로도 전송되지 않습니다. 내보낸 파일(JSON・CSS・SCSS・Tailwind JS・ASE)은 메모리 내 Blob 객체로 생성되어 장치에 직접 다운로드됩니다. 페이지가 로드되면 도구는 오프라인으로 작동합니다.

자주 묻는 질문

Palette Generator는 무료인가요?

네. 핵심 팔레트 생성과 모든 표준 내보내기 형식(JSON・CSS・SCSS・Tailwind JS)은 계정 없이 무료입니다. ASE 내보내기는 Glyph Widgets 서포터 기능으로, Ko-fi에서 $5 이상 기부 시 이용 가능하며 30일간의 프리미엄 액세스가 부여됩니다.

Palette Generator는 오프라인으로 작동하나요?

네. 브라우저에서 페이지가 로드되면, 모든 색상 계산과 파일 내보내기가 인터넷 연결 없이 작동합니다. 도구는 일반적인 팔레트 생성 중에 네트워크 요청을 하지 않습니다.

Palette Generator와 내 데이터는 안전한가요?

모든 계산은 브라우저에서 로컬로 수행됩니다. 색상 데이터・기본 색상・내보낸 파일은 어떤 서버로도 전송되지 않습니다. 팔레트 작업은 완전히 비공개입니다.

삼색 조화와 분할 보색의 차이점은 무엇인가요?

삼색 조화는 색상환에서 정확히 120° 간격으로 3가지 색상을 선택합니다. 분할 보색은 기본 색상과 보색을 양쪽에서 감싸는 2가지 색상을 가져옵니다 — 반대 색조의 양쪽 30°에 있는 두 색상입니다. 분할 보색은 일반적으로 진정한 보색 쌍보다 시각적 긴장감이 적으면서도 좋은 대비를 제공합니다.

내보낸 CSS 변수는 어떻게 사용하나요?

CSS 내보내기는 --color-1・--color-2 등의 이름을 가진 변수가 있는 :root 블록을 생성합니다. 이 블록을 스타일시트에 붙여넣고 var(--color-1)로 어디서든 변수를 참조합니다. 파일 이름에는 하모니 유형이 포함되어 있으므로 complementary-palette.css는 명확하게 표시됩니다.

Tailwind 내보내기를 프로젝트에서 직접 사용할 수 있나요?

다운로드된 파일은 완전한 tailwind.config.js가 아닌 Tailwind 설정 스니펫입니다. theme.extend.colors 내부에서 colors 객체를 복사하여 기존 Tailwind 설정에 병합하세요. 색상 패밀리는 color-1・color-2 등의 항목과 함께 palette를 키로 사용하므로, 템플릿에서 text-palette-color-1 또는 bg-palette-color-2로 색상을 참조할 수 있습니다.

ASE 내보내기 형식이란 무엇이며 누구를 위한 것인가요?

ASE(Adobe Swatch Exchange)는 Photoshop・Illustrator・InDesign을 포함한 Adobe Creative Suite 애플리케이션에서 사용하기 위한 색상 스와치를 저장하는 바이너리 형식입니다. 웹(CSS)과 인쇄(Adobe 앱) 모두에서 작업하는 디자이너는 값을 수동으로 재입력하지 않고 두 환경 모두에서 색상 일관성을 유지하기 위해 ASE 내보내기를 사용할 수 있습니다.

각 하모니 유형은 몇 가지 색상을 생성하나요?

보색은 2가지 색상을 생성하고, 유사색・삼색 조화・분할 보색・클래시는 각각 3가지를 생성하며, 사색 조화와 직사각형은 각각 4가지를 생성하고, 이중 분할 보색과 파이브톤은 각각 5가지를 생성하며, 식스톤은 6가지를 생성하고, 단색은 가변적인 수의 셰이드를 생성합니다. 모든 팔레트 항목은 팔레트 밴드와 그 아래 목록에 표시됩니다.

이미지에서 선택한 색상으로 시작할 수 있나요?

네. 곧 출시 예정: Image Color Picker를 사용하여 사진에서 색상을 추출하고, HEX 값을 복사한 다음 Palette Generator의 기본 색상 텍스트 필드에 붙여넣어 그 주변의 하모니를 구성합니다.

즐겨찾는 팔레트를 저장할 수 있나요?

Glyph Widgets 서포터 계정이 있으면, 프리셋 패널에서 기본 색상과 하모니 유형을 저장하는 이름 있는 프리셋을 저장할 수 있습니다. 기록 패널도 과거의 "모두 복사" 작업을 기록하여 이전에 생성한 팔레트를 쉽게 찾을 수 있습니다.

관련 도구

• 곧 출시 예정: Color Blender — 두 색상을 혼합하고 중간 단계를 생성하여 팔레트 작업을 보완합니다.
• Color Picker — 팔레트를 생성하기 전에 색상환이나 슬라이더를 사용하여 정확한 기본 색상을 선택합니다.
• 곧 출시 예정: Gradient Generator — 생성된 팔레트의 색상을 사용하여 CSS 그라디언트를 만듭니다.
• Contrast Checker — UI 텍스트에 사용하기 전에 팔레트에서 임의의 두 색상에 대한 WCAG 대비 비율을 확인합니다.

지금 Palette Generator를 사용해 보세요: 곧 출시 예정: Glyph Widgets Palette Generator