팔레트 생성
목표 대비를 만족할 때까지 OKLCH 명도를 자동 보정해 토큰을 생성합니다 — 검사가 아니라 보장.
생성 설정
본문 대비 목표
AI 팔레트 추천
잠금 — 키 필요무드를 설명하면 색상·온도를 제안합니다. OpenAI 키를 연결하면 열립니다 — 키는 이 브라우저에만 저장됩니다.
색상(H)과 채도(C)는 브랜드가 정하고, 명도(L)는 계산이 정합니다. 어떤 설정에서도 기준 미달 토큰은 생성되지 않습니다.
시맨틱 토큰
라이트 · 목표 7:1 (AAA)| 토큰 | 값 | 대비 검증 |
|---|---|---|
| 배경 · 표면 | ||
| --bg페이지 캔버스 | #F9F4F5 | 15.36:1 · AAAvs --text · 기준 7:1 |
| --surface카드 · 패널 | #FFFFFF | 16.72:1 · AAAvs --text · 기준 7:1 |
| --surface-2삽입 영역 · 코드 블록 | #F3EEEE | 14.55:1 · AAAvs --text · 기준 7:1 |
| 경계 | ||
| --border장식 헤어라인 — 정보 전달 없음 | #DFD8D9 | 장식용 · 기준 없음WCAG 1.4.11 비대상 |
| --border-strong입력 필드 · 구분 필수 경계 | #968C8D | 3.26:1 · 3:1vs --surface · 기준 3:1 |
| 텍스트 | ||
| --text본문 · 제목 | #231C1D | 15.36:1 · AAAvs --bg · 기준 7:1 |
| --text-2보조 설명 | #574D4E | 7.09:1 · AAA최저 표면 기준 7:1 |
| --text-3캡션 · 자리표시자 | #766A6B | 4.51:1 · AA최저 표면 기준 4.5:1 |
| 액센트 · 포커스 | ||
| --accent주요 버튼 채움 | #1E77D5 | 4.51:1 · AAvs --on-accent · 기준 4.5:1 |
| --accent-text링크 · 강조 텍스트 | #034F97 | 7.11:1 · AAA최저 표면 기준 7:1 |
| --focus-ring포커스 링 (2px + 오프셋) | #418FE9 | 3.04:1 · 3:1vs --bg · 기준 3:1 |
| 상태 — 아이콘·라벨 병행 필수 | ||
| --success성공 · 명도 L34 | #044330 | 9.87:1 · AAA최저 표면 기준 7:1 |
| --warning경고 · 명도 L43 | #664B03 | 7.10:1 · AAA최저 표면 기준 7:1 |
| --danger오류 · 명도 L25 | #470000 | 14.41:1 · AAA최저 표면 기준 7:1 |
라이브 미리보기
이 미리보기는 생성된 토큰만 사용합니다. 상태는 색이 아니라 아이콘·라벨·명도로 구분됩니다.