The forth talk from #SotB2025 @matuzo - Color in CSS: How I learned to disrespect Tennis.
Is now avaliable for your viewing pleasure.
https://2025.stateofthebrowser.com/speaker/manuel-matuzovic/
#CSS #Color #OKLAB #OKLCH #ColorSpaces

The forth talk from #SotB2025 @matuzo - Color in CSS: How I learned to disrespect Tennis.
Is now avaliable for your viewing pleasure.
https://2025.stateofthebrowser.com/speaker/manuel-matuzovic/
#CSS #Color #OKLAB #OKLCH #ColorSpaces
#Development #Techniques
CSS-only blurry image placeholders · A minimal technique with a sophisticated mechanism https://ilo.im/163247
_____
#Images #Placeholders #Colors #Gradients #OKLAB #WebDev #Frontend #CSS
Revolutionizing Color in Design: The Power of OKLCH
The introduction of the OKLCH color space marks a significant advancement in how designers and developers approach color accuracy and accessibility. By aligning closely with human perception, OKLCH of...
https://news.lavx.hu/article/revolutionizing-color-in-design-the-power-of-oklch
Released ImageColorPicker 1.05 - added CSS and SVG exports, automatic palette extraction, gradient save & load.
GitHub: https://github.com/LeStahL/ImageColorPicker/releases/tag/1.0.5
Discuss on Pouet: https://www.pouet.net/prod.php?which=95321
#tools #color #gradient #oklab #demoscene #python #github #shader #glsl #hlsl #css #svg
#Development #Interviews
Interview with Björn Ottosson · A talk with the creator of the popular Oklab color space https://ilo.im/160ana
_____
#Color #ColorSpace #Oklab #Okhsl #Browser #Design #UiDesign #WebDesign #WebDev #Frontend
#OpenData #OkLab
#SmartCity
Was macht eigentlich ein OK Lab?
Was passiert mit veröffentlichten offenen Daten?
Das und mehr beantwortet das @oklabflensburg in der
Nachts im Labor Podcast Folge:
https://open.spotify.com/episode/5WPd8EbafNJLvsFnT385HD
I wrote a shiney new pixel art conversion tool; now I have to practice using it :) #pixel #pixelart #demoscene #halftoning #ordered #dithering #cielab #oklab #90mbtooling
I went to Underground Conference 13 last week and released a PC-8k intro with the tech from Hue Bender and some new R3 folds. It won the 1st place!
Check it out: https://www.pouet.net/prod.php?which=97200
What a wonderful article on #ColorSpaces in #ColorTheory with handy interactive #visualizations:
"Okay, Color Spaces", Eric Portis (https://ericportis.com/posts/2024/okay-color-spaces/).
The latest release v4.8.0 of the open-source application Color Ramp Formulator adds experimental support for the new Oklab and Oklch color models.
https://codeberg.org/tonton-pixel/color-ramp-formulator
https://codeberg.org/tonton-pixel/color-ramp-formulator/releases/latest
#Development #Introductions
Okay, color spaces · A playful interactive introduction to color spaces https://ilo.im/15y1j4
_____
#Design #Color #ColorModel #ColorSpace #UiDesign #WebDesign #WebDev #CIEXYZ #OKLCH #Oklab
Color Ramp Formulator is an open-source desktop application used to generate algorithmically-defined color ramps, making use of formulas.
Repository: https://codeberg.org/tonton-pixel/color-ramp-formulator
if you have ever wanted to do photo editing or #dataBending from the command line give @gmic a look. its like image magic but the syntax is more intuitive. Also it supports the #oklab color space.
The deepest dive into the art and science of colour that you didn’t know you needed, including:
How light works
How vision works
Computer graphics
Colour Theory
Colour spaces
Non-Euclidean geometry
Gamuts
Palettes
RGB vs sRGB vs HSL
OKLAB
And somehow even more than that
Updated the gradient image generator example to use a custom pixel format (using Oklab color space) for the floating point pixel buffer.
Using Oklab instead of RGB combined with the bicubic image interpolation used to compute the gradient image means the colors will also be interpolated in the Oklab space which is perceptually better & more correct than RGB and leads to more pleasing results...
Demo & source links are updated (see OP)
#Design #Development #Visualizations
Color Playground · A fun way to interactively explore various color spaces https://ilo.im/128f09
_____
#UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #ColorSpace #RGB #OKLAB #OKLrAB #LAB #HSL #HSV #OKHSL #OKHSV #LRGB
It's time to put to rest #hex and #rgb() / #rgba() colours in #CSS and embrace the future: #oklch() and #oklab()
* oklch() model: https://caniuse.com/?search=oklch%28%29
* oklab(): https://caniuse.com/?search=oklab%28%29
I'm not sure why we still need to add/support lch() and lab() since the ‘okay’ version is the ‘fixed’ version… which is better. Then again, I'm not a #colour expert, hence I can't think of a reason. (Can someone enlighten us, mortals? Thank you!)
Since oklch(), oklab(), lch(), and lab() are still not widely supported (yet), and many end-users are still using an old version of browsers without support, there is #hwb().
As you can see from https://caniuse.com/?search=hwb%28%29 hwb() is widely supported already. The only browsers still without hwb() support are niche browsers, mainly from China (they don't even support rgb() according to #CanIUse).
* Base #color model: hwb()
* To be future proof: oklch() or oklab()
What I'm more excited about is the #RelativeColor feature from #CSSColor5, but that's for another day.
#ReleaseThursday This is actually the 2nd bunch of #ThingUmbrella releases since the weekend (which I completely forgot to notify about). The main highlights are:
https://thi.ng/color - added #Oklch support, update #Oklab conversion matrices (to latest spec), updated/improved/fixed CSS color parsing & serializations (more input formats, wider support for using percentages in more places), added serialization options for CSS Color Module Level 4, more docs
https://thi.ng/hiccup-markdown - major new version w/ completely new & extensible parser to transform #Markdown (with custom extensions[1]) into a proper abstract syntax tree and then transform elements via user defined handlers into arbitrary data structures. The default handlers generate a https://thi.ng/hiccup tree. More info in the package readme and the readme of this interactive parser & live preview demo: https://demo.thi.ng/umbrella/markdown/
[1] The syntax extensions include blocks of arbitrary metadata attached to _any_ blocklevel element (e.g. headings, paragraphs, tables, lists etc.) and custom typed blocks of content
As usual, please see changelogs for other updates:
https://github.com/thi-ng/umbrella/blob/develop/README.md#latest-updates
Happy Coding!