HEX 컬러 팔레트 생성기

하나의 HEX 컬러에서 톤 스케일, 하모니 컬러, 시맨틱 토큰, 복사 가능한 CSS 변수를 포함한 완전한 팔레트를 생성합니다.

기본 색상 (HEX)

#RGB 또는 #RRGGBB 지원 (예: #0EA5E9)

기본 색상 (HEX)

빠른 프리셋

팔레트 개요

기본 색상 관계를 확인하고 일관된 시스템을 빠르게 구축합니다.

기본 색상 (HEX)

#2563EB

색상: 221채도: 83%명도: 53%

하모니 컬러

유사색 A

#45C7E4

유사색 B

#6345E4

보색

#E6AB2A

트라이어드 A

#E2386D

트라이어드 B

#6DE238

톤 스케일 (50 - 900)

배경, 테두리, 상태, 텍스트 대비에 바로 사용할 수 있는 밝기별 음영.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

시맨틱 토큰

UI에서 직접 사용하여 제품 비주얼과 브랜드 스타일의 일관성을 유지합니다.

Primary

메인 브랜드 & CTA 색상

#2563EB

Secondary

보조 브랜드 색상

#6C59D5

Accent

고대비 하이라이트

#E3AA2D

Background

페이지 배경 톤

#F7F7F8

Surface

카드 & 컨테이너 배경

#E8E9EE

Text

기본 본문 텍스트 색상

#1B212C

CSS 변수

한 번 복사하여 스타일시트에 바로 적용하세요.

: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;
}