디자인 토큰 색상 모듈 2025.10

색상을 나타냅니다.

색상 토큰의 경우, $type 속성은 문자열 color로 설정되어야 합니다 MUST.

그 다음 $value 속성을 사용해 색상의 세부 정보를 지정할 수 있습니다. $value 객체에는 다음 속성이 포함됩니다:

colorSpace (필수): 색상 공간 또는 색상 모델을 지정하는 문자열. 지원되는 색상 공간은 아래의 지원되는 색상 공간 섹션을 참조하세요.
components (필수): 색상의 구성 요소를 나타내는 배열. 구성 요소의 개수는 색상 공간에 따라 달라집니다. 배열의 각 요소는 MUST 다음 중 하나여야 합니다:
- 숫자
- 'none' 키워드
alpha (선택): 색상의 알파 값을 나타내는 숫자. 값은 0에서 1 사이이며, 0은 완전 투명, 1은 완전 불투명입니다. 생략된 경우, 색상의 알파 값은 1(완전 불투명)으로 가정되어야 합니다 MUST.
hex (선택): 색상의 폴백 값을 나타내는 문자열. 폴백 색상은 제공된 알파 값과의 충돌을 피하기 위해 6자리 CSS HEX 색상 표기 형식으로 포맷되어야 합니다 MUST.

Example 1

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  },
  "Translucent shadow": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 0, 0],
      "alpha": 0.5,
      "hex": "#000000"
    }
  }
}

일부 색상 공간에서 색을 지정할 때, 0 값은 모호할 수 있습니다. 예를 들어 HSL 색상 공간에서 색상(Hue)이 0인 색은 빨강을 의미합니다. 단일 색인 hsl(0, 0, 50)은 빨강으로 렌더링되지는 않지만, 다른 색과 보간할 때 완전히 탈채된 빨강으로 취급될 수 있습니다. 따라서 특정 색상 공간에서는 0만으로 해당 구성 요소의 값이 없음을 나타내기에 충분하지 않습니다.

CSS Color Module Level 4는 구성 요소가 누락되었거나 적용되지 않음을 나타내기 위해 none 키워드를 도입했습니다. 예를 들어 HSL 색상 공간에서 none 키워드는 색상에 각도 값이 없음을 나타내는 데 사용할 수 있습니다. 색상의 hue 값이 none인 경우는 hue 각도가 0인 경우와 다르게 렌더링될 수 있으며 MAY, 보간 시 다른 결과를 낳을 수 있습니다.

none 키워드는 구성 요소가 적용되지 않거나 지정되지 않았음을 나타내기 위해 components 배열에서 사용할 수 있습니다 MAY.

Example 2

{
  "White": {
    "$type": "color",
    "$value": {
      "colorSpace": "hsl",
      "components": ["none", 0, 100],
      "alpha": 1,
      "hex": "#ffffff"
    }
  }
}

다음 예시처럼 Hue를 0으로 지정한 경우와 비교해 보십시오:

Example 3

{
  "White": {
    "$type": "color",
    "$value": {
      "colorSpace": "hsl",
      "components": [0, 0, 100],
      "alpha": 1,
      "hex": "#ffffff"
    }
  }
}

두 예시는 모두 흰색으로 렌더링되지만, 첫 번째 예시는 hue가 적용되지 않음을 더 명확하게 표현합니다. 이는 색상 간 보간이나 색상 혼합 시 중요하며, 0 또는 none 구성 요소를 사용하는 경우 서로 다른 결과를 낳을 수 있습니다.

colorSpace 속성에 대해 다음 값들이 지원됩니다. components 배열은 색상 공간에 따라 달라집니다.

Editor's note: 범위를 표현하는 구문

색상 공간	키	값
sRGB	`"srgb"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
sRGB linear	`"srgb-linear"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
HSL	`"hsl"`	Hue	[0 - 360)
		Saturation	[0 - 100]
		Lightness	[0 - 100]
HWB	`"hwb"`	Hue	[0 - 360)
		Whiteness	[0 - 100]
		Blackness	[0 - 100]
CIELAB	`"lab"`	Lightness	[0 - 100]
		A	[-Infinity - Infinity]*
		B	[-Infinity - Infinity]*
LCH	`"lch"`	Lightness	[0 - 100]
		Chroma	[0 - Infinity]**
		Hue	[0 - 360)
OKLAB	`"oklab"`	Lightness	[0 - 1]
		A	[-Infinity - Infinity]†
		B	[-Infinity - Infinity]†
OKLCH	`"oklch"`	Lightness	[0 - 1]
		Chroma	[0 - Infinity]‡
		Hue	[0 - 360)
Display P3	`"display-p3"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
A98 RGB	`"a98-rgb"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
ProPhoto RGB	`"prophoto-rgb"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
Rec 2020	`"rec2020"`	Red	[0 - 1]
		Green	[0 - 1]
		Blue	[0 - 1]
XYZ-D65	`"xyz-d65"`	X	[0 - 1]
		Y	[0 - 1]
		Z	[0 - 1]
XYZ-D50	`"xyz-d50"`	X	[0 - 1]
		Y	[0 - 1]
		Z	[0 - 1]

* CIELAB에서 A와 B는 이론적으로 제한이 없지만 실제로는 -160에서 160을 넘지 않습니다
** LCH에서 C는 이론적으로 제한이 없지만 실제로는 230을 넘지 않습니다
† OKLAB에서 A와 B는 이론적으로 제한이 없지만 실제로는 -0.5에서 0.5를 넘지 않습니다
‡ OKLCH에서 Chroma는 이론적으로 제한이 없지만 실제로는 0.5를 넘지 않습니다

Editor's note: 예시의 정밀도

Editor's note: 예시의 선택 값

Editor's note: CSS Color Module 4와의 적합성

형식에 대한 모호성을 만들지 않으면서 논리적으로 일관된 접근을 제공하기 위해, 본 명세는 다음과 같은 방식을 취합니다:

CSS Color Module 4가 색상 공간을 이름 있는 함수(예: srgb()) 그리고 color() 함수의 키워드로 모두 참조하도록 허용하는 경우, color() 함수에 의도된 형식을 사용합니다.
CSS Color Module 4가 색상 공간을 이름 있는 함수(예: hwb()) 또는 color() 함수의 키워드(예: rec-2020)로만 정의하는 경우, 해당 문법을 사용합니다.
CSS Color Module 4가 구성 요소에 대해 단위 값(예: 50) 과 퍼센트(예: 50%)를 모두 허용하는 경우, 단위 값을 사용합니다.

이 명세를 참고로 사용하면 색상 과학 자체가 아니라 토큰의 설계와 구현에 집중할 수 있습니다.

sRGB는 CSS Color Module 4 이전에 모든 CSS 색상의 표준 색상 공간이었습니다. 웹에서 가장 널리 사용되는 색상 공간이며, 대부분의 디자인 도구의 기본 색상 공간입니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 4

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

sRGB 색상 공간에 대한 자세한 정보는 Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB를 참조하세요.

sRGB linear는 sRGB의 선형화된 버전입니다. 일부 디자인 도구에서 선형 색상 공간에서 색을 표현하는 데 사용됩니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 5

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb-linear",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

sRGB linear 색상 공간에 대한 자세한 정보는 Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB를 참조하세요.

HSL은 sRGB의 극좌표 변환인 색상 모델이며, CSS Color Level 3 초기부터 지원되었습니다.

[Hue, Saturation, Lightness]

Hue: 색상환에서 색의 색상(Hue) 각도를 나타내는 0 이상 360 미만의 숫자.
Saturation: 색의 채도 퍼센트를 나타내는 0에서 100 사이의 숫자.
Lightness: 명도 퍼센트를 나타내는 0에서 100 사이의 숫자.

Example 6

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "hsl",
      "components": [330, 100, 50],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

HSL 색상 공간에 대한 자세한 정보는 HSL: light vs saturation를 참조하세요.

또 다른 sRGB의 극좌표 변환인 색상 모델입니다.

[Hue, Whiteness, Blackness]

Hue: 색상환에서 색의 각도를 나타내는 0 이상 360 미만의 숫자.
Whiteness: 색 내 흰색의 퍼센트를 나타내는 0에서 100 사이의 숫자.
Blackness: 색 내 검정의 퍼센트를 나타내는 0에서 100 사이의 숫자.

Example 7

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "hwb",
      "components": [330, 0, 0],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

HWB 색상 공간에 대한 자세한 정보는 HWB — A More Intuitive Hue-Based Color Model을 참조하세요.

CIELAB는 지각적으로 균일하도록 설계된 색상 공간입니다.

[L, A, B]

L: 색의 명도 퍼센트를 나타내는 0에서 100 사이의 숫자.
A: 색의 녹-빨 축을 나타내는 부호 있는 숫자.
B: 색의 청-황 축을 나타내는 부호 있는 숫자.

A와 B는 이론적으로 제한이 없지만 실제로는 -160에서 160을 넘지 않습니다.

Example 8

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "lab",
      "components": [60.17, 93.54, -60.5],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

CIELAB 색상 공간에 대한 자세한 정보는 ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space를 참조하세요.

LCH는 CIELAB의 원통형 표현입니다.

[L, C, Hue]

L: 색의 명도 퍼센트를 나타내는 0에서 100 사이의 숫자.
C: 색의 크로마를 나타내는 숫자.
Hue: 색상환에서 색의 각도를 나타내는 0 이상 360 미만의 숫자.

C의 최소값은 0로, 중립색(회색)을 의미하며, 최대값은 이론적으로 제한이 없지만 실제로는 230을 넘지 않습니다.

Example 9

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "lch",
      "components": [60.17, 111.4, 327.11],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

LCH 색상 공간에 대한 자세한 정보는 CSS Color Module Level 4의 CIELAB 및 LCH 섹션을 참조하세요.

OKLAB는 CIELAB보다 더 정확하도록 설계된 지각적으로 균일한 색상 공간입니다.

[L, A, B]

L: 색의 명도를 나타내는 0에서 1 사이의 숫자.
A: 색의 녹-빨 축을 나타내는 부호 있는 숫자.
B: 색의 청-황 축을 나타내는 부호 있는 숫자.

CIELAB와 마찬가지로 A와 B는 이론적으로 제한이 없지만 실제로는 -0.5에서 0.5를 넘지 않습니다.

Example 10

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "oklab",
      "components": [0.701, 0.2746, -0.169],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

OKLAB 색상 공간에 대한 자세한 정보는 OKLAB: A Perceptually Uniform Color Space를 참조하세요.

OKLCH는 OKLAB의 원통형 색상 모델입니다.

[L, Chroma, Hue]

L: 색의 명도를 나타내는 0에서 1 사이의 숫자.
Chroma: 색의 크로마를 나타내는 숫자.
Hue: 색상환에서 색의 각도를 나타내는 0 이상 360 미만의 숫자.

LCH와 마찬가지로 Chroma의 최소값은 0로 중립색(회색)을 의미하며, 최대값은 이론적으로 제한이 없지만 실제로는 0.5를 넘지 않습니다.

Example 11

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "oklch",
      "components": [0.7016, 0.3225, 328.363],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

OKLCH 색상 공간에 대한 자세한 정보는 OKLAB: A Perceptually Uniform Color Space를 참조하세요.

Display P3는 넓은 색상 색역(gamut)을 가진 디스플레이에서 사용되도록 설계된 색상 공간입니다. 디지털 시네마에서 사용되는 P3 색상 공간을 기반으로 합니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 12

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "display-p3",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

Display P3 색상 공간에 대한 자세한 정보는 Display P3의 정의를 참조하세요.

A98 RGB는 넓은 색역을 가진 디스플레이에서 사용되도록 설계된 색상 공간입니다. Adobe RGB 색상 공간을 기반으로 합니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 13

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "a98-rgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

A98 색상 공간에 대해 더 알아보려면 위키백과의 Adobe RGB 색상 공간 문서를 참조하세요.

ProPhoto RGB는 넓은 색역을 가진 디스플레이에서 사용되도록 설계된 색상 공간입니다. ProPhoto RGB 색상 공간을 기반으로 합니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 14

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "prophoto-rgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

ProPhoto RGB 색상 공간에 대한 자세한 정보는 Design and Optimization of the ProPhoto RGB Color Encodings 를 참조하세요.

Rec 2020은 넓은 색역을 가진 디스플레이에서 사용되도록 설계된 색상 공간입니다. Rec 2020 색상 공간을 기반으로 합니다.

[Red, Green, Blue]

Red: 색상의 빨강 구성 요소를 나타내는 0에서 1 사이의 숫자.
Green: 색상의 초록 구성 요소를 나타내는 0에서 1 사이의 숫자.
Blue: 색상의 파랑 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 15

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "rec2020",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

Rec 2020 색상 공간에 대한 자세한 정보는 Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange 를 참조하세요.

XYZ-D65는 인간의 눈으로 지각 가능한 모든 색을 표현할 수 있도록 설계된 색상 공간입니다. 모든 다른 공간은 XYZ로 변환 가능하므로 근본적인 색상 공간입니다. D65 조명체를 사용하는 CIE 1931 색상 공간을 기반으로 합니다. XYZ는 디자인 도구에서 흔히 사용되지는 않지만, 색상 변환에 유용합니다.

[X, Y, Z]

X: 색의 X 구성 요소를 나타내는 0에서 1 사이의 숫자.
Y: 색의 Y 구성 요소를 나타내는 0에서 1 사이의 숫자.
Z: 색의 Z 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 16

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "xyz-d65",
      "components": [0.5929, 0.2848, 0.9699],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

XYZ-D65 색상 공간에 대한 자세한 정보는 Colorimetry, Fourth Edition. CIE 015:2018를 참조하세요.

XYZ-D50은 XYZ-D65와 유사하지만 D50 조명체를 사용합니다.

[X, Y, Z]

X: 색의 X 구성 요소를 나타내는 0에서 1 사이의 숫자.
Y: 색의 Y 구성 요소를 나타내는 0에서 1 사이의 숫자.
Z: 색의 Z 구성 요소를 나타내는 0에서 1 사이의 숫자.

Example 17

{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "xyz-d50",
      "components": [0.5791, 0.2831, 0.728],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}

XYZ-D50 색상 공간에 대한 자세한 정보는 Colorimetry, Fourth Edition. CIE 015:2018를 참조하세요.

본 명세의 향후 버전은 디자인 도구에서의 채택 및 지원에 따라 추가 색상 공간 지원을 포함할 수 있습니다.

이 절은 비규범적입니다.

이 명세에서 계속 참조할 디자인 토큰의 주요 카테고리는 3가지입니다.

Base 토큰은 가장 낮은 수준의 토큰입니다.

Example 18

{
  "color": {
    "green": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.67, 0.79, 0.74]
      }
    },
    "shadow": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0, 0],
        "alpha": 0.53
      }
    }
  }
}

디자인 토큰의 값은 다른 토큰에 대한 참조(reference)가 될 수 있습니다 MAY. 동일한 값은 여러 이름(별칭)을 가질 수 있습니다 MAY.

Example 19

{
  "color": {
    "palette": {
      "black": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0, 0, 0]
        }
      }
    },
    "text": {
      "base": {
        "$value": "{color.palette.black}"
      }
    }
  }
}

컴포넌트별 토큰은 컴포넌트 수준에서 디자인 결정을 제공하며 토큰 아키텍처의 관심사 분리를 개선합니다.

Example 20

{
  "color": {
    "button": {
      "primary": {
        "$value": "{color.brand.primary}"
      }
    },
    "banner": {
      "background": {
        "$value": "{color.palette.black}"
      }
    }
  }
}

디자인 토큰(특히 색상 타입 토큰)의 명명 방식은 다양합니다. 가장 많이 구현되는 것으로 보이는 두 가지, 즉 서술형(descriptive)과 숫자형(numerical)을 확인했습니다.

Base 토큰의 경우 각 버전에서 다음과 같이 표현될 수 있습니다 MAY:

서술형 이름은 잔디(grass)나 수박(watermelon)처럼 사람이 상호작용하는 실체적 대상과 연결되기 때문에 더 감성적이고 친숙할 수 있습니다.

장점(Pros)	단점(Cons)
일부 사람들에게 더 직관적일 수 있으며, 브랜드 색과 제품 색을 구분하는 데 활용 가능	색상의 단계(예: 더 밝은지 더 어두운지, 서로 잘 짝을 이루는지)를 파악하기 더 어려움
	이름이 비영어권 사용자에게 쉽게 인식되지 않을 수 있어 다국어 팀에는 적합하지 않을 수 있음

Example 21

{
  "color": {
    "grass": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.67, 0.79, 0.74]
      }
    },
    "brand": {
      "watermelon": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.91, 0.28, 0.42]
        }
      }
    }
  }
}

숫자형 토큰은 종종 색이 어떻게 진행되는지 구분하기 위해 스케일을 따릅니다. 예를 들어 정렬된 스케일을 사용할 때 color.blue.500이 기본 색이 되고, 가장 밝은 값은 color.blue.100, 가장 어두운 값은 color.blue.900이 될 수 있으며, 그 사이 값은 100 단위로 증가합니다. 향후 두 색 사이에 새 색을 추가해야 할 확장성을 위해 1, 2, 3, 4 같은 순차 숫자는 사용하지 않기를 권장합니다.

Example 22

{
  "color": {
    "green": {
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.42, 0.73, 0.63]
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.15, 0.56, 0.42]
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.07, 0.5, 0.36]
        }
      }
    }
  }
}

숫자형 토큰 이름은 필요 시 더 세밀한 구분을 가능하게 합니다. 예를 들어 뉴트럴 팔레트(회색 등)를 만들 때 가장 밝은 값에서는 25 단위로 증가하고 이후에는 100 단위로 증가하도록 할 수 있습니다.

Example 23

{
  "color": {
    "gray": {
      "25": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.93, 0.93, 0.93],
        },
      },
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.87, 0.87, 0.87],
        },
      },
      "75": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8, 0.8, 0.8],
        },
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.73, 0.73, 0.73],
        },
      },
      // etc...
    },
  },
}

숫자형 토큰은 경계형 스케일을 통해서도 명명될 수 있습니다. 이러한 토큰은 해당 토큰에 사용된 실제 색의 구분 값(예: HSL의 lightness 값)을 활용해 명도 변화를 나타냅니다.

Example 24

{
  "color": {
    "gray": {
      "22": {
        "$type": "color",
        "$value": {
          "colorSpace": "hsl",
          "components": [0, 0, 22]
        }
      },
      "49": {
        "$type": "color",
        "$value": {
          "colorSpace": "hsl",
          "components": [0, 0, 49]
        }
      },
      "73": {
        "$type": "color",
        "$value": {
          "colorSpace": "hsl",
          "components": [0, 0, 73]
        }
      },
      "99": {
        "$type": "color",
        "$value": {
          "colorSpace": "hsl",
          "components": [0, 0, 99]
        }
      }
    }
  }
}

토큰 이름은 도구에 의해 생성될 수도 있으며 MAY, 사용자가 기본 이름을 지정하고 도구가 기저 값의 변화에 따라 스케일 숫자를 덧붙입니다.

Example 25

// User specified name: color-green
// Tool generated names for 6 steps of opacity
{
  "color": {
    "green": {
      "10": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.13, 0.7, 0.67],
          "alpha": 0.1,
        },
      },
      "20": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.13, 0.7, 0.67],
          "alpha": 0.2,
        },
      },
      // etc...
    },
  },
}

장점(Pros)	단점(Cons)
색 대비를 위한 서로 다른 토큰 간 매핑이 용이. 예: 100-400 토큰은 500-900 토큰과 짝지어 접근성 있는 색 조합 생성	기억하기 어렵고 토큰 간 차이가 직관적으로 드러나지 않음
경계형 스케일을 사용할 경우 토큰 이름이 기저 값에 대한 힌트를 줄 수 있음

Alias 토큰의 경우 이름 내에서 카테고리 + 속성을 우선해 비슷한 의도를 가진 토큰을 그룹화할 것을 권장합니다. 예를 들어 모든 배경 색상 Alias 토큰은 color.background.XXX로 시작할 가능성이 높습니다.

약어 사용은 피하는 것을 권장합니다. 예: “bg” 대신 “background” 사용으로 가독성 향상.

Alias 토큰은 다음과 같이 표현될 수 있습니다:

Example 26

{
  "color": {
    "background": {
      "error": {
        "$value": "{color.red.600}"
      },
      "success": {
        "$value": "{color.green.400}"
      }
    },
    "text": {
      "base": {
        "$value": "{color.palette.black}"
      },
      "errorHover": {
        "$value": "{color.red.700}"
      }
    }
  }
}

색상 Alias 토큰은 다음처럼 개념별로 묶을 수도 있습니다:

Example 27

// These can be used for background, border, or text colors
{
  "color": {
    "background": {
      "error": {
        "$value": "{color.red.600}",
      },
      "success": {
        "$value": "{color.green.400}",
      },
    },
  },
}

컴포넌트별 이름은 지원하는 컴포넌트로 시작해야 하며 컴포넌트 코드 인근에 위치하는 것이 좋습니다. 이들은 일반적으로 Alias 토큰을 참조하며 컴포넌트 간 스타일을 일관되게 유지하면서도 관심사 분리를 유지하는 데 도움이 됩니다.

Example 28

{
  "color": {
    "badge": {
      "background": {
        "error": {
          "$value": "{color.background.error}"
        },
        "success": {
          "$value": "{color.background.success}"
        }
      },
      "text": {
        "error": {
          "$value": "{color.text.error}"
        },
        "success": {
          "$value": "{color.text.success}"
        }
      }
    }
  }
}

디자인 토큰 색상 모듈 2025.10

요약

이 문서의 상태

1. 적합성

2. 소개

2.1 색상 토큰

3. 색상 용어

4. 색상 타입

4.1 포맷

4.1.1 none 키워드

4.1.1.1 none 키워드 사용

4.2 지원되는 색상 공간

4.2.1 sRGB

4.2.1.1 구성 요소

4.2.2 sRGB linear

4.2.2.1 구성 요소

4.2.3 HSL

4.2.3.1 구성 요소

4.2.4 HWB

4.2.4.1 구성 요소

4.2.5 CIELAB

4.2.5.1 구성 요소

4.2.6 LCH

4.2.6.1 구성 요소

4.2.7 OKLAB

4.2.7.1 구성 요소

4.2.8 OKLCH

4.2.8.1 구성 요소

4.2.9 Display P3

4.2.9.1 구성 요소

4.2.10 A98 RGB

4.2.10.1 구성 요소

4.2.11 ProPhoto RGB

4.2.11.1 구성 요소

4.2.12 Rec 2020

4.2.12.1 구성 요소

4.2.13 XYZ-D65

4.2.13.1 구성 요소

4.2.14 XYZ-D50

4.2.14.1 구성 요소

4.3 향후 색상 공간 지원

5. 색역 매핑(Gamut mapping)

6. 보간(Interpolation)

7. 토큰 명명(Token naming)

7.1 분류(Categorization)

7.1.1 Base

7.1.2 Alias

7.1.3 Component

7.2 명명 전략(Naming strategies)

7.2.1 Base Tokens

7.2.1.1 Descriptive

7.2.1.2 Numerical

7.2.1.2.1 정렬된 스케일(Ordered scales)

7.2.1.2.2 경계형 스케일(Bounded scales)

7.2.1.2.3 도구 생성 스케일(Computer generated scales)

7.2.2 Alias Tokens

7.2.3 Component Tokens

A. 이슈 요약

B. 참고문헌

B.1 규범적 참고문헌

4.1.1 `none` 키워드

4.1.1.1 `none` 키워드 사용