프리픽싱은 충돌 방지·의도 명확화. 스페이싱 토큰·라디우스 토큰 등도 있을 때 `--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)은 플랫 형태 잘 처리하고 자체 변환 수행.

컬러 토큰 익스포터

사용법

자주 묻는 질문

관련 도구

색상 이름 찾기

색맹 시뮬레이터

이미지에서 컬러 팔레트 추출

Tailwind 색상 팔레트

Material Design 3 토널 팔레트

CSS 그라디언트 생성기