🎨 Expanded support for color spaces

Oklch must have!

"What workarounds do you have?"
As of now, I've opted to using http://oklch.com/ to convert between colour spaces.

Color modifier is a very powerful feature of the plugin, and more color spaces would certainly make it more robust. OKLCH and CIELAB specifically, are important to me.

This issue was created based on feedback from Github issues

• 1574

• 1608

• 1637

• 1914

• 2255

• 2459

I'd also like support for HSB and CIELAB color spaces

Well, today I need another plugin to manage OKLCH color space... Would be great to have it in Token Studio to smooth everything.

@Marco Christian Krenn added for you! Is it right?

@Sam - Tokens Studio Can I please add OKLAB to the list too please?

IMPORTANT FOR US — 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 en editor for the spec. One of the topics we're currently finalizing is the updated proposal for colour in design tokens.

I'm posting a comment here to collect feedback on the current state of the proposal. Early responses are highly appreciated 🚀🚀

This thread holds the context: https://github.com/design-tokens/community-group/issues/137

And this is the proposed format:

{
  "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 for future-proofing 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 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.