색상 팔레트 생성기

알맞은 배색 선택

실무용 팔레트 구조

생성된 조화는 시작점이지 완전한 디자인 시스템은 아닙니다. 실제 UI에서는 색을 모양이 아니라 역할로 이름 붙이세요: primary, secondary, accent, surface, border, text, success, warning, error. 중성 회색은 별도로 추가하는 편이 좋습니다. 중성색은 hue 기반 생성기보다 더 세밀한 제어가 필요한 경우가 많습니다.

생성된 HEX 색상을 프로토타입에 먼저 넣어 보고, 실제 화면, 밝은 배경과 어두운 배경, hover와 disabled 상태에서 살아남는 색만 채택하세요.

CSS 변수 내보내기

내보내기 단계는 단순한 커스텀 속성을 사용합니다:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

CSS, Tailwind theme token 또는 design tokens 파일에 붙여 넣을 때는 이 변수명을 자체 시스템 이름으로 바꾸세요.

HEX, RGB, HSL

입력과 화면에 보이는 출력은 HEX입니다. CSS, 디자인 도구, 이슈 댓글 사이에서 가장 빠르게 복사할 수 있는 형식이기 때문입니다. 내부적으로는 기준 색상을 HSL로 변환하고 hue 또는 lightness를 이동한 뒤 다시 HEX로 반환합니다. RGB 또는 HSL 표기가 필요하다면 생성된 HEX 값을 색상 코드 변환기에 넣어 변환하세요.

대비와 접근성

조화 배색은 접근성을 보장하지 않습니다. 텍스트, 컨트롤, 차트에 색 조합을 쓰기 전에 대비 검사기로 확인하세요:

• 일반 텍스트와 배경: WCAG AA 기준 최소 4.5:1.
• 큰 텍스트: 최소 3:1.
• 버튼 테두리, 아이콘, 포커스 링, 차트 경계처럼 중요한 비텍스트 UI 요소: 인접 색상과 최소 3:1.

hue만 믿지 마세요. 두 색이 스와치에서는 달라 보여도 작은 글자, 얇은 아이콘, 상태 라벨에서는 실패할 수 있습니다.

팁

• 의미 있는 기준 색상에서 시작하세요, 예를 들어 기존 브랜드색, 제품색, 캠페인 색상입니다.
• 주조색 하나를 고르고 나머지는 보조 색으로 다루세요. 모든 색에 같은 비중을 주면 대부분의 UI가 복잡해집니다.
• 큰 면에는 채도를 낮추세요, 특히 앱 배경, 패널, hero 섹션에 사용할 때 그렇습니다.
• 테마 적용 후 다시 테스트하세요. 흰 배경에서 괜찮은 팔레트가 다크 모드나 복잡한 차트에서는 실패할 수 있습니다.