Altering the color of an element typically requires adherence to palette harmony. This entails utilizing a color function or procedure to select an appropriate color from the palette and then creating a new color by modifying its RGB or HSL values.
In simple words, a procedure to create shades or tint from a given color. This way users can generate many colors by calling the procedure on a palette color.
The below is a good article for using modern color system (e.g. in TiddlyWiki).
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
I strongly agree. There has been some discussion about this over the years on GitHub, but the new opportunity that has arisen over the last couple of years is the OKLCH colour space, which makes it much easier to generate shades, tints and gradients. This article is definitive but quite technical:
The immediate task would be to choose a third party CSS color library with support for OKLCH. Then we would need to design some primitives, ideally that could be used as either procedures or functions.
IMO https://colorjs.io would be the right library. I’m following the development since 2022 and it supports conversions from and to many colour spaces, including OKLCh
Thank you for sharing this great article and looking forward to having the new feature in TiddlyWiki.
If a draft of PR is created I would be happy to help and I sure interested people will participate
Powerful library for conversion! I assume the size of the library is less than 100kB.
It seems it has modules and one can import those are required (so it may be much smaller)
hihi, You know me well. The base stuff should be about 60k minified as far as I can see.
But we would need to make a custom build, since I think it is built with “> 0.5% usage and not dead” browsers in mind. This only goes back to ES2022 compatibility. eg: Safari iOS 15.6, FF 125, Edge 124 and so on.
So our version may be significantly bigger we may need “> 0.2% usage and not dead” or a fixed setting ES2020 compatibility.
TW still uses ES2015 atm. There have been some discussions about backwards compatibility at GitHub, but we did not come to a conclusion yet. This is: “fully supports es6-module” – Not sure about that size.
If we’re patient, CSS will provide enhanced color technology “soon”.
See CSS Level 4 New functions, gradients, and hues in CSS colors (Level 4) | MDN Blog
And color-mx() in CSS Color Module Level 5
Browser compatibility: <color> - CSS: Cascading Style Sheets | MDN
The other thing that I would very much like to do is to make a contrast checker for the TW palettes. We would make a list of pairs of palette entries that require readable contrast, and then run a check to verify them.
We would want to be able to run it interactively so that users editing their own palettes get immediate feedback of any problems, and run it on the command line as part of our test suite.
That would be a great tool.
In ColorPlay (A TiddlyWiki tool to create palettes interactively) I used a similar tool.
When two colors are given it checkers readability using WCAG Levels for Readability
As an example see
Color Play — playing with colors and palettes in TW (tiddlyhost.com)
As in similar threads over time, I’d be excited to have TiddlyWiki offer some palette alternatives that exempliify not only intuitive color variation and reading-contrast confidence (as clearly oklch does, very cool), but also accessibility across color-vision differences.
Here’s one site that enables folks to see how well the contrast in an oklch palette comes across for people with common color-perception variations: