How to generate color samples?

#1

I’m using TW to keep reference for differents color palettes that are not really meant to be used in TW.
I use a data tiddler to stores those colors like this

--neutral--

neutral-pale-3: #f8f9fa
neutral-pale-2: #e2e7ec
neutral-pale-1: #d1d6dd
neutral: #bac4cd
neutral-dark-1: #8b95a6
neutral-dark-2: #626b79
neutral-dark-3: #232933

Those codes are great to keep but are useless unlees I could see samples of those colors.
I need to ask our TW gurus here to help with this.

My question is how to proceed to create a template tiddler (or any other way) to see samples of the color definition from any data tiddler ?

#2

Try this:

<$let colors="MyColors">
<$list filter="[<colors>indexes[]]" variable=thisindex>
<$let thiscolor={{{ [<colors>getindex<thisindex>] }}}>
<span style="display:inline-block;width:1em;height:1em;border:1px solid;" style.background=<<thiscolor>>></span>
<<thisindex>> = <<thiscolor>><br>
</$let>
</$list>
</$let>

Notes:

  • Set the value of colors to the title of your data tiddler.

enjoy,
-e

1 Like
#3

To extend Eric’s idea a bit, you can wrap this in a body template.

PaletteView.json (1.7 KB)

tiddlywiki.com_ (2)
tiddlywiki.com_ (2)1903×1079 154 KB

1 Like
#4

very nice solution from both of you @Scott_Sauyet and @EricShulman. thank you for your help.