OKLAB is a color space [published](https://bottosson.github.io/posts/oklab/) in December 2020 by Björn Ottosson on his blog. It has been taking over and is being used in place of the traditional SRGB, HSL, and HSV color pickers. > the Oklab color space, a perceptual color space for image processing. Oklab is able to predict perceived lightness, chroma and hue well, while being simple and well-behaved numerically and easy to adopt. # Notability I want tools to make choosing colors more predictable, easier, and less stupid. ## OKLAB Makes for much improved color transitions, particularly between distant or contrasting colors. ### L - Lightness ### A - Green/Red ### B - Blue/Yellow ## OKLCH OKLCH is an attempt to fix the LCH color space using some of the perceptual learnings from OKLAB. From what I have looked at, it does some weird things, and colors do not transition smoothly when saturated. ### L - Lightness ### C - Chroma ### H - Hue # Feature Requests Implement OKLAB/OKLCH Color Space: color picker, gradients, blending modes This has been discussed on Krita Artists a few times and so I wanted to make a bug to track it as I couldn't find an existing bug for it. Please let me know if there is a better place or way to track this feature request. OKLAB and OKLCH make for more dynamic and less grey results when mixing digital paints and make selecting colors at the same perceptual lightness and chroma much easier from color pickers. They are also supported by the W3 CSS standard, Godot (and many other game engines), G'MIC, as well other paint and image editors. There have been some efforts to modify Krita's source code, add icc files, and make plugins which support OKLAB colors but an official form of these changes I think would be beneficial. IMPLEMENTATIONS - https://krita-artists.org/t/oklab-support/75285 - https://krita-artists.org/t/add-oklab-color-space-i-experimented-with-some-things/32285 # Resources - https://bottosson.github.io/posts/oklab/ - https://raphlinus.github.io/color/2021/01/18/oklab-critique.html - https://en.wikipedia.org/wiki/Oklab_color_space - https://krita-artists.org/t/the-best-color-selector/31990 - https://krita-artists.org/t/half-tone-selector-plugin-for-painting/88377/21 - https://krita-artists.org/t/hcl-sliders/88250 ## Implementing - https://blog.pkh.me/p/38-porting-oklab-colorspace-to-integer-arithmetic.html ### Shaders - [[Shaders]] # References See also this video by [[Acerola]] on color spaces, XYZ color space, and OKLAB colorspace: ```cardlink url: https://youtu.be/fv-wlo8yVhk title: "Your Colors Suck (it's not your fault)" description: "The first 100 people to use code ACEROLA at the link below will get 60% off of Incogni:https://incogni.com/acerola ! #adDigital color theory is a mysterious ..." host: youtu.be favicon: https://www.youtube.com/s/desktop/fb317ea9/img/logos/favicon_32x32.png image: https://i.ytimg.com/vi/fv-wlo8yVhk/maxresdefault.jpg ``` ```cardlink url: https://bottosson.github.io/posts/colorwrong/ title: "How software gets color wrong" description: "How software gets color wrong Most software around us today are decent at accurately displaying colors. Processing of colors is another..." host: bottosson.github.io favicon: https://bottosson.github.io/img/favicon/favicon-32x32.png?hash=d763fc1b07 ``` ```cardlink url: https://bottosson.github.io/posts/oklab/ title: "A perceptual color space for image processing" description: "A perceptual color space for image processing A perceptual color space is desirable when doing many kinds of image processing. It is useful..." host: bottosson.github.io favicon: https://bottosson.github.io/img/favicon/favicon-32x32.png?hash=d763fc1b07 ``` ```cardlink url: https://bottosson.github.io/posts/colorpicker/ title: "Two new color spaces for color picking - Okhsv and Okhsl" description: "Okhsv and Okhsl Two new color spaces for color picking This post has an accompanying interactive comparison of color pickers. I would..." host: bottosson.github.io favicon: https://bottosson.github.io/img/favicon/favicon-32x32.png?hash=d763fc1b07 ``` ```cardlink url: https://atmos.style/blog/lch-vs-oklch title: "LCH vs OKLCH: what is the difference?" description: "Discover the advantages of LCH and OKLCH color spaces for UI design and color palettes. Learn about their differences and why OKLCH is the better choice." host: atmos.style favicon: https://atmos.style/favicon-32x32.png image: https://atmos.style/images/blog/lch-vs-oklch/cover.png ``` ```cardlink url: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html title: "An interactive review of Oklab" description: "Blog of Raph Levien." host: raphlinus.github.io ``` ```cardlink url: https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley title: "Better than Lab? Gamut reduction CIE Lab & OKLab by Chris Lilley (W3C), 2021 W3C Workshop on Wide Color Gamut and High Dynamic Range for the Web" description: "Chris Lilley (W3C)'s presentation given at the W3C Workshop on Wide Color Gamut and High Dynamic Range for the Web" host: www.w3.org ``` ## Code ```cardlink url: https://github.com/evilmartians/oklch-picker title: "GitHub - evilmartians/oklch-picker: Color Picker for LCH" description: "Color Picker for LCH. Contribute to evilmartians/oklch-picker development by creating an account on GitHub." host: github.com favicon: https://github.githubassets.com/favicons/favicon.svg image: https://opengraph.githubassets.com/7635f5e82445a0a6a177415450249e0f11ed441760f592542bfc4de86fd12984/evilmartians/oklch-picker ``` ```cardlink url: https://github.com/coloria-dev/coloria title: "GitHub - coloria-dev/coloria: :rainbow: Tools for color research" description: ":rainbow: Tools for color research. Contribute to coloria-dev/coloria development by creating an account on GitHub." host: github.com favicon: https://github.githubassets.com/favicons/favicon.svg image: https://opengraph.githubassets.com/6513b75436a7fd9d65521cfadcfd9d551e9cc381565adf4ffc3d40ab4662db5f/coloria-dev/coloria ``` ```cardlink url: https://observablehq.com/@shan/oklab-color-wheel title: "OKLAB color wheel" description: "“Oklab is able to predict perceived lightness, chroma and hue well, while being simple and well-behaved numerically and easy to adopt.” This is a fork of @fil’s oklab port." host: observablehq.com favicon: https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png image: https://static.observableusercontent.com/thumbnail/efacb1869a6db46442b8e0e18985727d5b0d906eaa01e40d2ab513814add9387.jpg ``` ## Image Editors ### Krita Plugins - https://github.com/lucifer9683/HCLSliders - https://github.com/evnlme/half_tone_selector ## Game Engines ```cardlink url: https://evenzhang.gumroad.com/l/oklab title: "Oklab Color Space Interpolation In Unreal Engine" description: "I made an HLSL version of Oklab color space interpolation to used in UE material nodes. I pack the code in a Material Function for convenient usage.You can donwload either a UE4.27 version or a UE5 version for free.What is Oklab color spacehttps://bottosson.github.io/posts/oklab/Oklab can create smooth and uniform looking transitions between colors.As shown in the first cover image, in normal RGB space, interpolation from blue to orange will cause pinkish transition. But in Oklab space, there is no pinkish color, it's much more natural and smoother.How to use? Put the three assets files in unreal project's Content folder. The file path should be like: Content / OKLabColorSpace / MF_OkLabMix.uassetContent / OKLabColorSpace / M_OKLab.uassetContent / OKLabColorSpace / L_Demo.umapThe MF_OKLabMix is the material function file. The other two are just for demonstration.Use this material function just like a normal lerp node.ReferenceThe HLSL codes is converted from GLSL code which made on shadertoy by iq. The GLSL code is from shadertoy by iq." host: evenzhang.gumroad.com image: https://public-files.gumroad.com/eq920m0fcjcvz6cmlwg41canqbme ``` ## Web ```cardlink url: https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/ title: "Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS — Smashing Magazine" description: "The CSS Color Module Level 4 specification defined a slew of new color features when it became a candidate recommendation in 2022, including Oklab and Oklch, which have widened the field of color we have to work with. Explore the Oklch color space and how to start using it in CSS today." host: www.smashingmagazine.com favicon: https://www.smashingmagazine.com/images/favicon/favicon.ico image: https://files.smashing.media/articles/oklch-color-spaces-gamuts-css/oklch-color-spaces-gamuts-css.jpg ``` ## Examples ```cardlink url: https://youtu.be/nJlZT5AE9zY title: "A perceptual color space in Minecraft (Oklab)" description: "What is a perceptual uniform color space and how can we use it in Minecraft.Link to Oklab posthttps://bottosson.github.io/posts/oklab/World Downloadhttps://d..." host: youtu.be favicon: https://www.youtube.com/s/desktop/c21d783a/img/favicon_32x32.png image: https://i.ytimg.com/vi/nJlZT5AE9zY/maxresdefault.jpg ```