Skip to main content

LAB or LCH color models in the color picker

Daan_Brinkhuis

Hi designers!

Our perceived lightness does not correspond well with the lightness attribute used in HSL and HSV, despite those being the most user-friendly and imaginable color pickers currently around.

LCH is a color model that improves this perception while keeping the usability and imagination as a picker, and it’s currently being rolled out to browsers as we speak, and it completely solves the perceived brightness - for CSS.

I think LCH (or LAB, which is similar) is a game-changer for digital artists and designers, and adding it as a color model to the Figma color picker would save a lot of time discovering colors and iterating on them.

Is anyone else interested in this? Do you know about LCH/LAB? What do you think of it? I have found a LCH plugin that helps the issue but it’s obviously not as useful as adding LCH to the actual picker in Figma.

Very interested in your thoughts.

Cheers!

10 replies

A

Huge plus from my side 🙂 I usually open Affinity when I need precise colour tuning.

Acklyn_Admin
Daan_Brinkhuis
Tanner6
3 people like this
  • Acklyn_Admin
    Acklyn_Admin
  • Daan_Brinkhuis
    Daan_Brinkhuis
  • Tanner6
    Tanner6
zisest
  • zisest
  • 1 reply
  • May 5, 2021

That’s exactly what I was thinking, so I decided to cook up one more plugin to be able to pick colors using LCH. It is basically Lea Verou’s color picker wrapped in a Figma plugin. I think it’ll do the job until the official support is in. Any feedback would be super appreciated!

A
Daan_Brinkhuis
Aaron_Sleeper1
3 people like this
  • A
    anon80496618
  • Daan_Brinkhuis
    Daan_Brinkhuis
  • Aaron_Sleeper1
    Aaron_Sleeper1
Richard_Doyle

Browsers are starting to support this. Would be a great help for defining design system colors.

Acklyn_Admin
1 person likes this
  • Acklyn_Admin
    Acklyn_Admin
Matias3
  • Matias3
  • 1 reply
  • May 4, 2023

And don’t forget oklab and oklch on that list!

zachshea
Oliver_Williams
Charlotte_Johnson
3 people like this
  • zachshea
    zachshea
  • Oliver_Williams
    Oliver_Williams
  • Charlotte_Johnson
    Charlotte_Johnson
Oliver_Williams

All browsers now support lab, oklab, lch and oklch - Safari, Edge, Chrome, Firefox, and all Chromium-based browsers yet so far very few design tools. A rather sad state of affairs I hope get resolved soon!

zachshea
Pato
2 people like this
  • zachshea
    zachshea
  • Pato
    Pato
O

With oklch now being pretty widely supported, it’d be great if Figma could support it.
We’re trying to keep everything design-related in our file but can’t communicate colors to developers properly.

Peter_Coyne
1 person likes this
  • Peter_Coyne
    Peter_Coyne
Onur
  • Onur
  • New Member
  • 1 reply
  • December 13, 2023

If you need a plugin for Oklch, you can use this one: here.

I found this plugin while reading a blog by EvilMartians on the topic: here.

O
1 person likes this
  • O
    Olaf_Kappes
O

Thanks for the pointer. A plugin is fine for the design phase, but we rely on the Figma API to extract our design tokens from the file’s variables so we need native support.

Onur
1 person likes this
  • Onur
    Onur
Michael_Pinney1

I would love official support for oklch, we’ve created our colour palette with it and having to jump between oklch.com and Figma is just more painful than this needs to be, especially as it’s not supported across all major browsers.

I realise there are plug ins, but I found them more painful to use given they’re not native to Figma.

Pato
1 person likes this
  • Pato
    Pato
Tricia_Spoonts

Most browsers now support this with the addition of dev mode LCH colors should be supported natively in Figma.

Vincent_Filter
1 person likes this
  • Vincent_Filter
    Vincent_Filter

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings