TiddlyWiki Color Codes in Palettes

#1

Is it backward compatible to change all core palette color code to 6 digit hex?
Right now it is quite difficult to work with colors as some are 3 some are 6 and even macrocall!

#2

6 digit colour codes are fine and compatible

#3

Thank you Mario! I would be happy to submit some PRs to change the current 3 digits to 6 digits.
The reason is some are 3 and some are 6 digits now.
I like to use something like css like color: <<colour tag-forground>>a9;

#4

Certainly expanding all 3-digit codes to 6-digit will be helpful; the “benefit” to the 3-digit code is a tiny difference in length, and being able to expand to 8-digit alpha-inclusive value would be fantastic!

However, some palettes may already directly specify rgba (or 8-digit) values… In those cases, adding 2 digits will not yield add transparency, but will revert to some overall default (like black).

Are we thinking that any official palettes should stick to 6-digit colors, and that alpha values (if desired) should always be added by some further css, rather than being built into the palette?

That might be a good community “best practice” — although perhaps some people would have good reasons to include alpha-values directly within their palettes.

(For fun, when I expand 6-digit color codes to 8-digit slightly-transparent versions, I like a1 because it looks so close to lower-case AL (for alpha) :wink: )

1 Like
#5

Hi @springer
Please see GitHub and the discussions there (https://github.com/TiddlyWiki/TiddlyWiki5/pull/8665#issuecomment-2395446871) .
It seems there are some plans underway to improve the color operations in TiddlyWiki by adopting new libraries.

My proposal here is to have consistent value in the palettes, so plugin developers will have less difficulty in manipulating colors.
Right now TW allows any form of color value (hex, rgb, rgba,…), while I appreciate the flexibility, but I prefer simplicity and consistency here.

1 Like
#6

It may be interesting for you, if you examine the color palette for example here for color of tags.

Open https://tiddlerwiki.com
Create a new tiddler with below script


<$list filter="[all[tiddlers+shadows]tag[$:/tags/Palette]]">

; <$text text={{{ [<currentTiddler>] }}} />
: <$text text={{{ [<currentTiddler>get[color-scheme]] }}} />
: <$text text={{{ [<currentTiddler>getindex[tag-foreground]] }}} />
: <$text text={{{ [<currentTiddler>getindex[tag-background]] }}} />

</$list>

You will get the below result.

$:/palettes/Blanca
light
#000
#ffeedd
$:/palettes/Blue
light
#000
#eeeeff
$:/palettes/ContrastDark
dark
#000
#fff
$:/palettes/ContrastLight
light
#fff
#000
$:/palettes/CupertinoDark
dark
#323232
#48484A
$:/palettes/DarkPhotos
light
#ffffff
#ec6
$:/palettes/DesertSand
light
#E3D7B7
#706A58
$:/palettes/GruvboxDark
dark
#282828
#d3869b
$:/palettes/Muted
light
#ffffff
#d5ad34
$:/palettes/Nord
dark
#4C566A
#A3BE8C
$:/palettes/Rocker
dark
#000
#ffbb99
$:/palettes/SolarFlare
light
<>
<>
$:/palettes/SolarizedDark
dark
#002b36
#b58900
$:/palettes/SolarizedLight
light
#fdf6e3
#b58900
$:/palettes/SpartanDay
light
<>
#ec6
$:/palettes/SpartanNight
dark
<>
#ec6
$:/palettes/Twilight
dark
rgb(25, 25, 25)
rgb(255, 201, 102)
$:/palettes/Vanilla
light
#ffffff
#ec6
#7

It should be backwardly compatible to change any 3-digit numbers to their equivalent 6-digit ones. In some theoretic sense, we could convert from the other color spaces to the best-match in RGB, but we would lose the advantages of these other color spaces.

Standardizing on 6-digit numbers, disallowing 8-digit ones, though, sounds over-restrictive. And at least some of the macrocalls are themselves intended to keep it simple to remain consistent. So it’s hard to get this down to a few simple rules.

#8

… not least because the CSS color space is forever ← → evolving.

#9

Standard CSS allows:

  • 3-digit, 6-digit, 8-digit hex
  • rgb() and rgba() decimal
  • X11 color names
    (see TiddlyTools/Settings/Colors/X11 for a convenient “dictionary tiddler” with color name to 6-digit-hex mappings)

Plus, TiddlyWiki allows ANY wikitext (not just the <<colour>> macro) that evaluates to any of the CSS color values listed above.

In TiddlyTools/Palettes/Manager – an add-on enhancement to the TWCore $:/PaletteManager – I have written wikitext code that converts ANY palette entry to a 6-digit hex code so it can be properly used by an <$edit-text type=color> widget. (The HTML type=color input control only recognizes 6-digit hex codes).

see palette-manager-colour-row-pick(): (updated to handle 4-digit #RGBA codes)

\define X11Colors()	TiddlyTools/Settings/Colors/X11
...
\define hex(n) ^#[A-Fa-f0-9]{$n$}$
...
<$let colourValue={{{ [<currentTiddler>getindex<colourName>] }}}>
<!-- GET #RRGGBB: RESOLVE MACRO/WIDGET, MATCH X11 NAMES, EXPAND #RGB/#RGBA, TRUNCATE #RRGGBBAA, CONVERT RGB()/RGBA() -->
<$wikify name=resolvedValue text=<<colourValue>>> <$let colourValue={{{ [<colourValue>prefix[#]then<colourValue>else<resolvedValue>] }}}>
<$let lower={{{ [<colourValue>lowercase[]] }}} colourValue={{{ [<X11Colors>indexes[]] :filter[lowercase[]match<lower>] :map[<X11Colors>getindex<currentTiddler>] +[!match[]else<colourValue>] }}}>
<$let colourValue={{{ [<colourValue>regexp<hex 3,4>split[]!match[#]] :map[<currentTiddler>addsuffix<currentTiddler>] +[join[]!match[]addprefix[#]else<colourValue>] }}}>
<$let colourValue={{{ [<colourValue>regexp<hex 8>split[]first[7]join[]] ~[<colourValue>] }}}>
<$let	dec={{{ [<colourValue>lowercase[]prefix[rgb]split[(]nth[2]trim[)]split[,]first[3]join[ ]] }}}
		 hi={{{ [enlist:raw<dec>divide[16]]    :map[[0123456789ABCDEF]split[]zth<currentTiddler>] +[join[ ]] }}}
		 lo={{{ [enlist:raw<dec>remainder[16]] :map[[0123456789ABCDEF]split[]zth<currentTiddler>] +[join[ ]] }}}
		  r={{{ [enlist:raw<hi>nth[1]] =[enlist:raw<lo>nth[1]] +[join[]] }}}
		  g={{{ [enlist:raw<hi>nth[2]] =[enlist:raw<lo>nth[2]] +[join[]] }}}
		  b={{{ [enlist:raw<hi>nth[3]] =[enlist:raw<lo>nth[3]] +[join[]] }}}
	colourValue={{{ [<r>] =[<g>] =[<b>] +[join[]!match[]addprefix[#]else<colourValue>] }}}>

Perhaps this conversion code can be re-used by @Mohammad to help with his 8-digit hex color+alpha objectives.

-e

1 Like
#10

and 4-digit: #123<alpha-digit>.

#11

TiddlyTools/Palettes/Manager has been updated:

palette-manager-colour-row-pick() now handles 4-digit #RGBA

-e

1 Like
#12

I support using modern color specifications like OKLCH. But as a matter of backward compatibility I know it is hard to have a radical change!
So, I thought by keeping the present design, we can improve the consistency. One area is to change 3 digits hex code to 6, keep 8 digits incontact.
And if possible change hardcoded rgb/rgba to 6/8 digit hex! This will make life easier when dealing with color manipulation :slight_smile:

#13

Keep in mind, when you ask the DOM what color is being used, it will return the CSS color function, rgb(). However you set it, that’s what you get back.

Try it - right click and inspect an element, then in the console, type:

getComputedStyle($0).color  ==>  rgb(...)

I don’t know why or what went into the decision to have the DOM behave that way, I just know it’s quite annoying (if not completely myopic).

#14

This is wonderful! Thank you @EricShulman.

#15

I see how simply I can clone and create new Palette and adjust the colors!

#16

Among others, right?

and probably others.

#17

They are all listed here: CSS color values - CSS: Cascading Style Sheets | MDN

1 Like
#18

Out of curiousity, is it best practice to use 6 digit hexcodes in general?

Also, whats the recommended way of using opacity? Should you use it for muted background or muted foreground ? Should it be avoided in a palette but used elsewhere is fine?

Typically i use 8 digit hex for setting opacity just for general reference.

#19

TiddlyTools/Palettes/Manager has been updated (again):
palette-manager-colour-row-pick() now retains alpha channel (opacity) hex values.

In other words, when a palette entry is using #RBGA, #RRGGBBAA, or rgba(rrr,ggg,bbb,aaa) syntax and you pick a new color value via the native HTML color picker popup interface (which uses <input type=color ...>) , the result will be an #RRGGBBAA hex value.

-e

1 Like
#20

No. That’s to say, they’re all equally valid in general.

And by the way, keep a tight rein on so-called best practice. Only following best practice means you’ll likely miss opportunities for innovation and creativity.