M2· 토큰 스키마L46Ch 5 / 28

색(Color) 값 형식

왜 "#뒤에 hex 6자리"만 허용했을까

원문 발췌 · L46–46

description: <string>      # optional

L46Color: A color value must start with "#" followed by a hex color code in the SRGB color space.

한국어로 풀면

색 값은 반드시 "#"으로 시작 + hex 코드(영문/숫자 6자리) + sRGB 색공간이어야 해요. 예: #1A1C1E, #B8422E. 그 외 형식은 안 받아요.

이 한 줄이 쳐낸 대안들

짧은 문장 하나로 여러 선택지를 전부 막았어요.

rgb(26, 28, 30)·hsl(210, 7%, 11%) 같은 CSS 함수 형식 ❌
red·tomato처럼 색 이름 ❌
넓은 색공간(P3·Display P3·oklch 등 최신 화면에서 쓰는 더 선명한 표현) ❌
투명도까지 붙인 #RRGGBBAA(8자리) — 스펙엔 언급 없음. 실제 예시들은 투명도가 필요하면 rgba(…)를 컴포넌트 값에 직접 쓰는 편법으로 우회해요(다음 챕터에서 확인).

왜 굳이 형식 하나로 좁혔을까

검증이 간단

검사 규칙이 한 줄이면 돼요. "샵으로 시작 + hex 6자리"만 맞으면 통과.

모든 도구가 이해함

Figma·Tailwind·Android·iOS 전부 hex를 기본 지원. 변환 걱정 없음.

대비 계산이 쉬움

접근성 대비 비율(WCAG)은 sRGB 기준 공식이 표준. 다른 색공간이면 계산이 복잡해져요.

AI가 실수할 여지 ↓

형식이 하나면 AI가 값을 생성할 때 헛것을 만들기 어려워요.

포기한 것 — 새 디스플레이의 선명한 색

P3·oklch 같은 넓은 색공간은 아이폰·맥 Pro Display XDR 같은 최신 화면에서 훨씬 선명한 색을 낼 수 있어요. 이걸 포기한 대신 정확성을 택한 거예요. 지금은 alpha 단계라 "일단 모든 도구가 확실히 이해하는 형식으로"로 가고, 나중에 스펙이 안정되면 확장 여지가 있어요.

투명도가 필요할 땐 — 예시들이 쓰는 우회

Atmospheric Glass 예시

colors:
  primary: "#ffffff"            # ← 색 토큰은 hex만

components:
  glass-card-standard:
    backgroundColor: rgba(255, 255, 255, 0.1)   # ← 컴포넌트 값은 rgba 허용
    textColor: "{colors.primary}"

colors: 토큰은 hex만, 그런데 components:의 배경 값은 문자열이라 rgba(…)도 통과해요. "색 토큰 자체를 반투명으로 만들 순 없지만, 컴포넌트에서 그때그때 반투명으로 쓰는 건 OK"라는 현실 타협이에요.

핵심 인사이트

포맷을 설계할 때 "정확히 한 가지 형식"으로 좁히는 것의 힘. 허용할 형식이 많으면 검증·변환·AI 생성이 전부 어려워져요. 표현력을 조금 포기하는 대신 안정성·상호호환성·검증 편의성을 얻는 건 alpha 단계에서 합리적인 선택이에요.

체크리스트

Color 값의 유효 형식을 1줄로 정의할 수 있다
sRGB 헥스로 좁힌 4가지 이유를 기억한다
투명도가 필요할 때 실제 예시가 어떻게 우회하는지 안다