Change default display of color values to HSL?

When picking colors I’m always working in the HSL color system. When I want to change a color it makes so much more sense for me to be able to adjust the hue, saturation, or/and lightness rather than thinking about how edits to RGB might work, or trying to mentally decode hex values.

Often I’ll want a color of a similar saturation & brightness but a different hue. Or a color of the same hue & saturation but different brightness.

But in the Figma UI it defaults to showing hex values in the sidebar (or a color style name where the values are completely hidden unless I drill down):

Screenshot 2021-02-18 at 12.11.22@2x

Hex values can be useful for developers (although lately we’ve just been using HSL in our CSS), but is not very useful to me when designing except for the rare case when I’m copy/pasting a hex value from somewhere else. It’s certainly not the primary way I want to see / work with colors.

I’d love it if that display of HEX values in the UI was instead HSL. And secondarily, I’d love it if when a color style was selected there it showed the underlying HSL values right in the sidebar.

13 Likes

I’m finding it much easier to develop accessible color palettes, lightness scales, and light/dark mode with HSL. Having HSL available in Figma would allow us to develop sensible color maps on the canvas rather than testing as we go or copy/pasting from another tool.

Auditing and refining our color palette in Figma is guesswork.

2 Likes

HSL has been available in Figma for ages, this suggestion is about being able to see and copy HSL values without opening the Inspect panel.

7 Likes

Ah, yes I see! Thank you—I’m brand new to Figma.

I still agree with the original idea. If HSL—or whichever system was last selected—displayed in the sidebar in place of Hexadecimal, it would be more useful.

2 Likes

+1 - Colours should display in the last selected colour system

1 Like

Agreed - I want to paste hsla values after changing the default color system to it.

+1 for this. Being able to quickly copy a colour as HSL(a) from the Design or Inspect panel would be really helpful

I have a similar pain point. I like switching to HSL to actually do colour work, but hex values for things like brand colours are what I have memorised, and are easier to memorise/type than HSL. So I’m always switching between the two in the colour picker dialog. It’d be cool if it always showed hex code alongside a selected format imo

Somewhat related - I think figma should always show at least two color fields instead of one, link

1 Like

In general, Figma’s workflow involves too many clicks, which is literally a physical pain point for those of us with carpal tunnel neuropathy—it’s getting to be a blocker. Having to re-select HSL, and then have the color palette go away with each selection gets to be too much work. It’s even more steps when dealing with styles.

Please display color using my last-used color system, as others have said. And while you’re at it, allow the palette to persist, like e.g. Adobe Illustrator. Thank you.

2 Likes

In general, Figma’s workflow involves too many clicks

I could not have said it better. It is ironic that Figma lacks UX in some very basic senses. Another example: Why are not keyboard shortcuts always shown on hover? Would make it so much easier to discover shortcuts and learn as you go.

Regarding this topic, yes everytime I am interacting with colors in Figma I have manually switch to hsl. I also want to nudge my team to think in terms of hsl but Figma is making this very difficult.

Default color mode. Please?