팔레트 생성기

메인 색상 하나로 완전한 UI 팔레트를 만드세요. 보조, 3차, 성공, 경고, 위험, 중립 색상이 각각의 셰이드, 대비 검사와 함께 만들어져요.

메인 색상

값을 입력하거나 색을 고르세요. 나머지 팔레트는 이 색을 중심으로 만들어져요.

#2563EB 같은 HEX 값을 입력하거나 사각형을 클릭해 색을 고르세요.

내 팔레트

값이나 셰이드(50~950)를 클릭하면 복사돼요. 연필 아이콘으로 추천 색상을 원하는 색으로 바꿀 수 있어요. 바꾼 색은 메인 색상을 변경해도 그대로 유지돼요.

—
기본
내 색상
—
보조
보색
—
3차
보색에 가까움
—
정보
파랑
—
성공
초록
—
경고
주황
—
위험
빨강
—
중립적
색이 감도는 회색

라이트·다크 토큰

인터페이스에서 실제로 쓰는 색상을 라이트 테마와 다크 테마용으로 준비했어요. 각 색상은 팔레트의 셰이드 하나를 가리켜요. 클릭하면 복사돼요.

--background페이지 배경
--surface카드와 패널
--surface-muted보조 영역
--border테두리와 구분선
--text본문 텍스트
--text-muted보조 텍스트
--primary버튼과 링크
--primary-hover호버 상태
--on-primary기본 색상 위 텍스트
--focus-ring포커스 테두리
--secondary보조 강조색
--tertiary3차 강조색
--info정보
--info-soft정보 배경
--success성공
--success-soft성공 배경
--warning경고
--warning-soft경고 배경
--danger위험, 오류
--danger-soft오류 배경

어울리는 색상

메인 색상을 기준으로 한 기본 배색이에요. 일러스트, 차트, 강조색에 활용하세요.

보색
반대편 색
분할 보색
보색보다 부드러움
유사색
이웃한 색
삼각 배색
균형 잡힌 세 가지 색
사각 배색
정사각형을 이루는 네 가지 색
단색 배색
한 가지 색상, 여러 농도

미리보기와 대비

몇 가지 인터페이스 요소에 팔레트를 적용한 모습과, WCAG 기준에 따른 각 조합의 가독성이에요.

미리보기 테마

페이지 제목제목 아래에 오는, 덜 중요한 보조 텍스트예요.

링크와 버튼이 있는 카드예요.

기본보조3차

정보 · 새 업데이트가 있어요.

성공 · 변경 사항이 저장됐어요.

경고 · 구독이 곧 만료돼요.

오류 · 결제에 실패했어요.

배경 위 텍스트
대비율—일반 텍스트—큰 텍스트—AAA—
배경 위 보조 텍스트
대비율—일반 텍스트—큰 텍스트—AAA—
배경 위 링크
대비율—일반 텍스트—큰 텍스트—AAA—
기본 버튼
대비율—일반 텍스트—큰 텍스트—AAA—
보조 버튼
대비율—일반 텍스트—큰 텍스트—AAA—
배경 위 3차 텍스트
대비율—일반 텍스트—큰 텍스트—AAA—
정보 알림
대비율—일반 텍스트—큰 텍스트—AAA—
성공 알림
대비율—일반 텍스트—큰 텍스트—AAA—
경고 알림
대비율—일반 텍스트—큰 텍스트—AAA—
위험 알림
대비율—일반 텍스트—큰 텍스트—AAA—

내보내기

위에서 선택한 형식(HEX)으로 팔레트를 내보내요.

메인 색상을 입력하면 코드가 만들어져요.

팔레트의 CSS 변수(--color-primary-500…)예요. 토큰은 이 변수를 가리켜요. html 요소에 data-theme="dark" 속성을 추가하면 다크 테마가 적용돼요.