Display raw color values as HSLA format

[nathanacurtis]

Request

From Maiken van Vliet (@maiken), via Figma Community: Hey, I subscribed to the plugin because it really helps save time. I'm happy with the color feature that shows the variables. However, our library is HSLA based. Is there any way to instruct the plugin to use the HSLA values instead of the HEX values? (edited)

Solution

– Add premium-only setting in Format section for "Preferred raw color format", with dropdown for Hex, HSLA and any other supported options – Add ability to convert Figma's RGBA value to HSLA and other formats – Display for HARDCODED raw values as well as raw values appended to STYLE, VARIABLE and TOKENSTUDIO values

Format

Hex code, no alpha #FFFFFF Hex code, with alpha #FFFFFF, 80% HSLA hsla(0,0,100,100)

[Maikenvv]

Hey, thanks for your quick reply. I couldn't comment in the thread in Figma, which is why I'm replying here. The solution seems perfect for the problem that I have.

The only point I could bring up is the HSL annotation formatting. Figma uses hsla(19, 65%, 49%, 1) in dev mode, it might be good to stay aligned with that.

Or to use the modern notation according to the example on MDM Web Docs.

div.modern {
  background-color: hsl(90 80% 50%);
}

div.legacy {
  background-color: hsl(90, 80%, 50%);
}

div.modernWithAlpha {
  background-color: hsl(90 80% 50% / 50%);
}

div.modernHSLA {
  background-color: hsla(90 80% 50% / 50%);
}

div.legacyHSLA {
  background-color: hsla(90, 80%, 50%, 0.5);
}

[nathanacurtis]

Those are great examples! What would you prefer?

On Thu, Oct 17, 2024 at 11:23 AM Maiken @.***> wrote:

Hey, thanks for your quick reply. I couldn't comment in the thread in Figma, which is why I'm replying here.

The solution seems perfect for the problem that I have. The only point I could bring up is the HSL annotation formatting. Figma uses hsla(19, 65%, 49%, 1) in dev mode, it might be good to stay aligned with that. Or to use the modern notation according to the example on MDM Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl.

div.modern { background-color: hsl(90 80% 50%); } div.legacy { background-color: hsl(90, 80%, 50%); } div.modernWithAlpha { background-color: hsl(90 80% 50% / 50%); } div.modernHSLA { background-color: hsla(90 80% 50% / 50%); } div.legacyHSLA { background-color: hsla(90, 80%, 50%, 0.5); }

— Reply to this email directly, view it on GitHub https://github.com/DirectedEdges/specs-plugin/issues/187#issuecomment-2419852060, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI4UUCXKVJNZ3LG5647Q6LZ37JATAVCNFSM6AAAAABQD7H5YWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJZHA2TEMBWGA . You are receiving this because you authored the thread.Message ID: @.***>

[Maikenvv]

My preference would be into staying aligned with Figma would be best. That way, dev mode and the specs show the same and copy the same if anyone does that directly. So hsla(19, 65%, 49%, 1).