Skip to main content
Daan_Brinkhuis
Daan_Brinkhuis
April 15, 2021

LAB or LCH color models in the color picker

  • April 15, 2021
  • 10 replies
  • 2909 views

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

    anon80496618
    April 19, 2021

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

      zisest
      zisest
      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!

        Richard_Doyle
        Richard_Doyle
        May 20, 2022

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

          Matias3
          Matias3
          May 4, 2023

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

            Oliver_Williams
            Oliver_Williams
            New Member
            May 17, 2023

            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!

              Olaf_Kappes
              August 18, 2023

              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.

                Onur
                Onur
                New Member
                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.

                  Olaf_Kappes
                  December 19, 2023

                  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.

                    Michael_Pinney1
                    Michael_Pinney1
                    February 8, 2024

                    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.

                      Tricia_Spoonts
                      Tricia_Spoonts
                      March 14, 2024

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

                        Terms & ConditionsAccessibility statement