Use RGB with Alpha Channel in TiddlyWiki: A Notebox Example

Ref: rgb() - CSS: Cascading Style Sheets | MDN

The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color’s transparency.

The alpha channel now is supported by all major browsers. Lets use it to create a note box.

padding:10px 12px;
background:rgb(229 243 254 / 0.3);
border:1px solid rgb(205 205 205 / 1);
border-left:5px solid rgb(0 133 242 / 0.5);

In another tiddler create your note box

<div class=note>
Hello There!

Will produces

Lets play with alpha channel for example


background:rgb(229 243 254 / 0.8);

border-left:5px solid rgb(0 133 242 / 1);

You will get

  • The alpha value can be set as fractional number 0, 0.1, 0.2,… 1
  • The alpha value can be set as percent like 5%, 100%

Lets create a macro called note

  • Create a tiddler and tag it with $:/tags/Macro
  • Put the below wikitext as body of macro tiddler
\define note(src)
<div class="note">

Now use it like this

<<note "''NOTE'': I am a very important message ✨">>

Which will produce

Play and use in your own wiki

Just download notes.json (650 Bytes) and drop into your wiki



You are right in recognizing this as a really neat feature now that it is supported by more browsers.

Your post showing how to use it and even exploit it as a macro was remarkably easy to follow, too.

Thanks for sharing and teaching!


1 Like

Nice little tutorial, @Mohammad.

It’s worth pointing out you can use css colors the same way in TW UI settings (note my preference is the hex representation).

It’s a shame the HTML <input type=color ...> element doesn’t display it correctly :frowning:

1 Like