Color Library
색을 눈으로 고르고, 이름을 복사하고, 파일로 받는 곳입니다.
색을 클릭하면 토큰 이름이 복사됩니다. 대비 검사는 실시간이며 투명도(알파) 합성까지 반영합니다.
파일로 받기
| 형식 | 링크 | 언제 |
|---|---|---|
| CSS 변수 | jt-tokens.css | 웹·앱에 그대로 링크 |
| JSON | jt-tokens.json | Figma Variables · Style Dictionary · 스크립트 |
JSON 구조는 이렇습니다. $value는 원본(참조 그대로), $resolved는 참조를 따라간 실제 색입니다.
"color": {
"color-primary": { "$value": "var(--neutral-900)", "$resolved": "#1F2328" },
"color-accent": { "$value": "var(--blue-500)", "$resolved": "#305CDE" }
}- Figma Variables처럼 별칭(alias)을 그대로 살리고 싶으면
$value를 쓰세요 - 스크립트에서 실제 색이 필요하면
$resolved를 쓰세요 - 다크 재정의분은
colorDark에 따로 있습니다
고를 때 기억할 것 네 가지
| 뉴트럴이 90% | 색은 의미가 있을 때만 씁니다 |
| 먹색 = 브랜드, 파랑 = 누를 수 있음 | 주버튼을 파랑으로 만들지 마세요 |
| 판정은 색 + 글자 | 흑백 COA로 인쇄되면 색은 사라집니다 |
| 팔레트 직접 참조 금지 | --blue-500이 아니라 --color-accent |
하지 말 것
--color-text-tertiary를 글자에 쓰기 — 3.04:1로 WCAG 기준 미달입니다. 비텍스트 장식 전용teal-400을 글자 배경으로 쓰기 — 흰 글자 대비 2.61:1- yellow에 흰 글자 — warning은
yellow-50배경 +yellow-900글자 고정 - 팔레트에 없는 색을 지어내기 — 도움말로 요청하면 토큰에 먼저 추가합니다
자세한 규칙과 근거는 토큰 (Seed·Map·Alias).