Skip to main content
Daan_Brinkhuis
Daan_Brinkhuis
Apr 15, 2021 9:00 AM UTC

LAB or LCH color models in the color picker

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
    Apr 19, 2021 9:51 AM UTC

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

      zisest
      zisest
      May 5, 2021 11:45 PM UTC

      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 3:05 AM UTC

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

          Matias3
          Matias3
          May 4, 2023 11:25 AM UTC

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

            Oliver_Williams
            Oliver_Williams
            New Member
            May 17, 2023 7:39 PM UTC

            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
              Aug 18, 2023 9:24 AM UTC

              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
                Dec 13, 2023 8:48 PM UTC

                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
                  Dec 19, 2023 1:21 PM UTC

                  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
                    Feb 8, 2024 10:48 AM UTC

                    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
                      Mar 14, 2024 11:57 PM UTC

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

                        Terms & ConditionsAccessibility statement