프리픽싱은 충돌 방지·의도 명확화. 스페이싱 토큰·라디우스 토큰 등도 있을 때 `--color-primary`가 `--primary`보다 가독성 좋음. Tailwind에선 프리픽스가 `extend` 아래 키 → `extend.colors`가 기본 Tailwind 컨벤션, 스코프드 팔레트엔 `extend.brand`·`extend.surface` 원할 수 있음.

Design Tokens JSON은 W3C 스펙 일치?

거의. 토큰당 `{ value, type: 'color' }` 사용 → Design Tokens Community Group 초안과 일치. 엄격한 W3C 준수엔 그룹 객체 아래 중첩 필요할 수도 — 대부분 툴(Style Dictionary·Specify·Cobalt)은 플랫 형태 잘 처리하고 자체 변환 수행.

컬러 토큰 익스포터

색상

컬러 팔레트의 단일 진실 원천(SSOT), 어떤 스택에 배포하든 원클릭 익스포트. 이름과 hex(3·6·8자리)로 토큰 추가, 프리픽스 선택(`color`·`brand`·`surface` 등) → 선택한 포맷으로 출력 재생성. CSS는 `:root` 아래 `--color-primary` 커스텀 프로퍼티 제공. Tailwind는 `tailwind.config.js`에 붙여넣는 `theme.extend.colors` 블록. SCSS는 `$color-primary` 변수와 `map.get` 용 `$colors` 맵 둘 다. JSON은 Design Tokens Community Group `{ value, type }` 형태. iOS는 SwiftUI `Color` 익스텐션, Android는 언더스코어 쓴 `colors.xml` 리소스 포맷. 프리셋으로 브랜드·중립 스케일·상태 컬러 시작 가능.

—

프리픽스출력 형식

프리셋:

토큰

미리보기

primary

primary-hover

surface

surface-muted

text

text-muted

border

danger

출력

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-danger: #ef4444;
}

이름은 kebab-case로 정리. Hex는 #abc → #aabbcc 자동 확장.

사용법

프리셋 선택 또는 처음부터 팔레트 구성. 이름은 `kebab-case`로 정리됨.
스택에 맞는 프리픽스 설정: CSS엔 `color`, Tailwind엔 `colors`(또는 빈), 순수 `$primary` 원하면 SCSS엔 비우기.
포맷 전환. 복사. 스타일시트·테마 파일·에셋 카탈로그에 붙여넣기.

자주 묻는 질문

프리픽스 왜?: 프리픽싱은 충돌 방지·의도 명확화. 스페이싱 토큰·라디우스 토큰 등도 있을 때 `--color-primary`가 `--primary`보다 가독성 좋음. Tailwind에선 프리픽스가 `extend` 아래 키 → `extend.colors`가 기본 Tailwind 컨벤션, 스코프드 팔레트엔 `extend.brand`·`extend.surface` 원할 수 있음.
Design Tokens JSON은 W3C 스펙 일치?: 거의. 토큰당 `{ value, type: 'color' }` 사용 → Design Tokens Community Group 초안과 일치. 엄격한 W3C 준수엔 그룹 객체 아래 중첩 필요할 수도 — 대부분 툴(Style Dictionary·Specify·Cobalt)은 플랫 형태 잘 처리하고 자체 변환 수행.

컬러 토큰 익스포터

사용법

자주 묻는 질문

관련 도구

색맹 시뮬레이터

CSS Box Shadow 생성기

컬러 포맷 변환기

CSS 그라디언트 생성기

컬러 팔레트 생성기

색상 대비 검사기