색상 팔레트 생성기

색채 이론에 기반한 조화로운 팔레트 생성 — 보색, 삼각형, 유사색 등

공유:
Click any color swatch to copy its hex code
Copied!

왜 색상 팔레트 생성기를 사용해야 하나요?

조화로운 색상을 선택하려면 색채 이론 지식이 필요합니다. 저희 생성기는 HSL 수학을 사용하여 임의의 기본 색상에서 조화로운 팔레트를 자동 계산하여 디자이너와 개발자가 몇 초 만에 전문적인 컬러 스킴을 만들 수 있습니다.

🎨

6가지 조화 모드

보색, 삼각형, 유사색, 분할 보색, 사각형, 단색 음영

👁️

스워치 실시간 미리보기

스워치를 클릭하면 해당 16진수 코드가 즉시 클립보드에 복사

📋

CSS 변수 내보내기

전체 팔레트를 사용자 정의 CSS 속성으로 내보내기 — 스타일시트에 붙여넣기만 하면 됨

3단계로 팔레트 생성하는 방법

1

기본 색상 선택

색상 선택기를 사용하거나 16진수 코드를 입력하여 브랜드/시작 색상 설정

2

조화 유형 선택

디자인에 맞는 보색, 삼각형, 유사색 등의 조화 선택

3

복사 및 사용

스워치를 클릭하여 16진수 복사, 또는 'CSS 변수로 복사'로 전체 팔레트 내보내기

색상 팔레트 사용 사례

🌐

웹 디자인

브랜드 기본 색상을 기반으로 웹사이트의 완전한 색상 시스템 생성

🏢

브랜드 아이덴티티

기본, 보조, 강조 색상을 포함한 전문적인 브랜드 팔레트 개발

📱

UI/UX 디자인

앱의 버튼, 텍스트, 배경에 접근성 있고 시각적으로 일관된 색상 생성

📊

데이터 시각화

차트, 테이블, 분석 대시보드를 위한 식별 가능한 카테고리 색상 생성

색상 디자인 모범 사례

✓ 색상 대비 확인 (WCAG)

텍스트/배경 쌍이 접근성을 위한 WCAG AA 대비 비율(일반 텍스트 4.5:1)을 충족하는지 확인하세요.

✓ 팔레트 제한

3~5가지 색상으로 제한하세요: 기본 1가지, 보조 1가지, 강조 1~2가지, 중성 색상. 색상이 너무 많으면 시각적 혼란을 일으킵니다.

✓ 색상 심리학 고려

파랑=신뢰/전문성, 초록=성장/성공, 빨강=긴급/에너지, 노랑=낙관. 팔레트를 브랜드 메시지에 맞추세요.

✓ 다크 모드에서 테스트

명도 값을 조정하여 다크 모드 변형을 만드세요. 순수 검정(#000)이나 순수 흰색(#fff)은 이상적이지 않은 경우가 많아 거의 검정과 거의 흰색을 사용하세요.

❓ 자주 묻는 질문

보색 컬러 스킴이란 무엇인가요?
보색은 색상환에서 반대편에 위치한 색상(파랑과 주황, 빨강과 초록 등)입니다. 높은 대비와 시각적 에너지를 만들어내어 CTA 버튼과 강조 요소에 이상적입니다.
유사색 컬러 스킴은 언제 사용하나요?
유사색 스킴은 색상환에서 인접한 3가지 색상을 사용합니다. 낮은 대비의 조화롭고 차분한 디자인을 만들어내어 배경, 그라데이션, 부드러운 UI 디자인에 이상적입니다.
HSL과 RGB, Hex의 차이는 무엇인가요?
세 가지 모두 동일한 색상을 다른 형식으로 표현합니다. Hex(#6366f1)는 CSS에서 사용됩니다. RGB(99, 102, 241)는 빨강/초록/파랑 채널을 지정합니다. HSL(237°, 84%, 67%)은 색조, 채도, 명도를 사용하여 조화로운 팔레트 생성에 직관적입니다.
다크 모드용 색상 팔레트는 어떻게 만드나요?
다크 모드에서는 명도 값을 크게 낮추고(예: L:60% → L:30%) 텍스트/배경 역할을 바꾸세요. 유사한 색조와 채도를 유지하면서 어두운 배경에서 읽기 쉽도록 명도를 조정하세요.