DTCG format update on color tokens and support for color spaces.

Hey everyone, for those who aren't aware, I'm supporting the DTCG as an editor for the spec.

I'm collecting feedback on the current state of the proposal for color tokens in the DTCG spec. Early responses are highly appreciated 🚀🚀

This thread holds the context:

• https://github.com/design-tokens/community-group/issues/137

💬 Feedback that is valuable

Proposed format in JSON

{
  "my-token": {
    "$type": "color",
    "$value": {
      "hex": "#xxxxxx",
      "colorSpace": "color-space",
      "channels": [0.1, 0.2, 0.3],
      "alpha": 0.5
    }
  }
}

Color spaces supported:

srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 | hsl | hwb | lch | oklch

Next steps (from DTCG team)

• Figure out aliasing.

  • Possibly "hex": "{my-token.hex}", "channels": "{my-token.channels}",

  • but this doesn’t feel very natural or particularly safe.

• 8 week-long RFC where we ask tool makers in particular for feedback.

Below a summary of the thread to get you up to speed if you don't have time to read the whole discussion:

Summary of Discussion on Legacy Color Issue (#137)

Overview:

• The discussion revolves around the limitations of using hex color formats in design tokens, advocating for more modern and flexible color representations such as LAB, LCH, and OKLAB.

• Participants emphasize the need to future-proof the design token specification to accommodate advanced color spaces already supported by some browsers and anticipated to become standard.

Key Points:

Modern Color Support:

• Proposal: Standardize on modern color formats (e.g., OKLCH) instead of hex.

• Justification: Modern color formats offer better perceptual uniformity and more accurate color representation.

Flexible Color Representation:

• Alternative Syntax:

  "colorSpace": "sRGB",
  "channels": [0.1, 0.1, 0.1],
  "alpha": 1.0

Advantages:

• This format supports various color spaces and offers higher precision compared to hex values.

Backwards Compatibility and Toolchain Adoption:

• Concerns: Current toolchains predominantly support sRGB and hex formats.

• Suggestion: Include fallbacks to hex while allowing modern formats for future compatibility.

Practical Implementation:

• Fallbacks Example:

 "colorSpace": "Display-P3",
 "channels": [1, 0.5,0],
 "alpha": 1,
 "fallback": "#FF8800"

Tool Compatibility:

• Tools can adopt modern formats without the immediate need for full support, ensuring smoother transitions.

Community Insights and Concerns:

• Wide Gamut Support: Limiting to hex/sRGB restricts the potential of design systems to leverage advanced color spaces.

• Precision and Accuracy: Higher precision formats like floating-point numbers prevent rounding errors common in hex conversions.

Consensus and Next Steps:

• Flexibility in Spec: Propose allowing both hex and advanced color formats to coexist in the specification.

• Future-Proofing: Emphasize the importance of a forward-compatible spec that adapts to evolving design tools and browser capabilities.

Conclusion:

The discussion highlights the need to move beyond legacy color formats and adopt a more flexible, future-proof approach in the design token specification, balancing current toolchain limitations with the advantages of modern color spaces.

↔ Related topics

• 🎨 Expand support for color spaces → Jump to post