Doko Zero

✌️UI Designer with UX and web development skills
🌈 OkColor Figma plugin
👇Writing and free book (available in English, French and Spanish)

[Doko Zero @dokozero]

OkColor v11 is here! 🎉
https://t.co/UEqtYVynKP

New square render for OkLCH, arrow keys and scroll wheel support in the color picker, Figma UI3 update, and more!

Let's dive in! 👇

[Doko Zero @dokozero]

@antiflasher Amazing! More OkLCH goodness coming to Figma 🎉

[Doko Zero @dokozero]

@m_camarota Indeed, I'll add a warning tooltip to alert about that and avoid confusion in the future.

[Doko Zero @dokozero]

OkColor v11 is here! 🎉
https://t.co/UEqtYVynKP

New square render for OkLCH, arrow keys and scroll wheel support in the color picker, Figma UI3 update, and more!

Let's dive in! 👇

[Doko Zero @dokozero]

@m_camarota Weird, working here.
If you use the browser, which one is it?
Do you have any errors in the console? (Cmd + Option + i or Ctrl + Shift + i).
Can you share the file (or a new one just with this frame)?
(You can contact me here if you prefer: https://t.co/wmCwX9waCG)
Thanks!

[Doko Zero @dokozero]

@_atilla1 You're welcome! 🙂

[Doko Zero @dokozero]

@m_camarota Thanks for your feedback! For the contrast to work, you need to select an element within a frame, both with a solid color.

For now, because of the complexity, OkColor doesn't detect for example a text on a rectangle shape.

[Doko Zero @dokozero]

Last but not least, OkColor now has:

- Automatic detection of the file color profile (sRGB or Display P3).
- Updated UI to Figma UI3.
- Support for math operation in inputs.

See the full changelog here: https://t.co/e3lR0e6wua

[Doko Zero @dokozero]

You can also use the scroll wheel or trackpad to change the hue.

With the arrow keys, it enables faster color picking and staying in the flow.

https://t.co/lmyx4AOBMM

[Doko Zero @dokozero]

@ilyamiskov https://t.co/UEqtYVynKP

[Doko Zero @dokozero]

@romanshamin_en @figma It seems that OkLCH Figma converter don't take the file profile into account.

For me, it comes from CSS HEX being always relative to sRGB, where in Figma, HEX are relatives to the file profile (in a P3 file, #00FF00 = color(display-p3 0 1 0), which can be confusing at first).

[Doko Zero @dokozero]

@romanshamin_en @figma 👍 Nice, however on an P3 file, the HEX color seems to be wrong. oklch(84% 0.08 17) falls into sRGB gamut, but in Figma, it converts to #FAB6B8, where it should be in fact #F0B9B9.

These are the values I get from https://t.co/4v6sVaL16P and OkColor plugin.

[Doko Zero @dokozero]

@figmanewsletter @builderio @DavidWilliames Thanks for talking about OkColor! 😊

[Roman Shamin @romanshamin_en]

Friends, we are about to launch Harmony on Product Hunt next Wednesday, October 18th.

We’d love to hear from you!

1️⃣ RT this tweet
2️⃣ Click “Follow” on this pre-launch page to not miss the launch: https://t.co/TFwljFC5P1

🙌

[Doko Zero @dokozero]

When to use absolute chroma?

This param is very useful for example when you need close colors with neither more visible than the other.

In this case, you simply have to give them the same lightness and absolute chroma value:

[Doko Zero @dokozero]

Last OkColor update 🌈 you can now use relative chroma in OkLCH: https://t.co/ZUhIw7cojP

It does not replace OkLCH's absolute chroma which is important, but it brings the advantage of OkHSL's saturation while keeping the features of OkLCH.

More infos 🧵↓

[Doko Zero @dokozero]

We could use the same absolute chroma value, but we would lose the linear progression of chroma and have the same color on light and dark variants.

Also in browsers, colors with a chroma out of the gamut will frequently fall back to a color with a slightly different H and L.