Skip to content

Color space tokens

This example shows how DTIF captures colors in sRGB, Display-P3, and OKLCH to preserve brand hues across wide-gamut displays. Each value demonstrates how color space metadata travels with the components.

See color-spaces.tokens.json for the complete document.

Sample tokens

json
{
  "color": {
    "accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "display-p3",
        "components": [0.2, 0.45, 0.7, 0.9]
      }
    },
    "surface": {
      "$type": "color",
      "$value": {
        "colorSpace": "oklch",
        "components": [0.82, 0.04, 262]
      }
    },
    "text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.1, 0.1, 0.12]
      }
    }
  }
}