HEX 컬러 팔레트 생성기
하나의 HEX 컬러에서 톤 스케일, 하모니 컬러, 시맨틱 토큰, 복사 가능한 CSS 변수를 포함한 완전한 팔레트를 생성합니다.
빠른 프리셋
기본 색상 (HEX)
#2563EB
하모니 컬러
Primary
메인 브랜드 & CTA 색상
#2563EBSecondary
보조 브랜드 색상
#6C59D5Accent
고대비 하이라이트
#E3AA2DBackground
페이지 배경 톤
#F7F7F8Surface
카드 & 컨테이너 배경
#E8E9EEText
기본 본문 텍스트 색상
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}하나의 HEX 코드로 완전한 컬러 시스템 구축하기
이 도구는 기본 HEX 색상을 실시간으로 구조화된 팔레트로 변환합니다. HEX 값을 직접 입력하거나, 컬러 셀렉터에서 선택하거나, 랜덤 색상을 생성할 수 있습니다.
단계 1: 기본 색상 입력 또는 선택
HEX 색상 코드를 직접 입력하거나, 피커에서 색상을 선택하거나, '랜덤 색상'을 클릭하여 자동 생성하세요.
단계 2: 팔레트 개요 확인
자동 생성된 조화 색상과 함께 기본 색상을 확인하세요.
단계 3: 톤 스케일 및 시맨틱 토큰 탐색
배경, 테두리, 상태, 텍스트 대비에 이상적인 50-900 톤 스케일을 확인하세요.
단계 4: CSS 변수 또는 토큰 복사
생성된 CSS 변수를 한 번의 클릭으로 복사하여 스타일시트에 붙여넣으세요.
실제 프로젝트를 위한 구조화된 컬러 팔레트
이 HEX 컬러 팔레트 생성기는 기본 색상 견본을 넘어섭니다. 제품 인터페이스, 디자인 시스템, 브랜딩 워크플로에 즉시 사용할 수 있는 구조화된 팔레트를 만듭니다.
조화 기반 색상 생성
시각적 균형과 대비를 유지하는 보색 조화 색상을 자동으로 생성합니다.
톤 스케일 (50-900)
UI 레이어, 상태, 배경 및 가독성 있는 텍스트 대비에 최적화된 밝은 색에서 어두운 색까지의 색조.
UI 일관성을 위한 시맨틱 토큰
미리 정의된 역할이 주요 액션, 성공 상태, 경고 및 중립 요소 전반에 걸쳐 일관된 사용을 유지합니다.
복사 가능한 CSS 변수
전체 팔레트를 한 번의 클릭으로 CSS 변수로 내보내기—스타일시트에 바로 적용 가능합니다.