Render preview of a color in a file

Feature requests
1

It would be very useful to implement a preview of a color that is defined in a .md file, similar to how it is done in VS Code in a .css file. This would allow us to store our favourite colors for future use and to quickly identify what they look like.

For example, if #34AB34 is typed, the matching color is displayed as a square before or after the hex code. Other color formats could also be supported.
Optionally, the color code could also be ==highlighted== in that color to preview it.

3 Likes
2

You’d have to look these up manually, but you could make a note with a list of items like

<span style="color: #34AB34;">â– </span>

or

<span style="background-color: #34AB34;">#34AB34</span>.

4 Likes
3

Yes, for working with web design projects, this would be very helpful.
This post seems to be related:

4

In lieu of a plugin, you can take @CawlinTeffid 's suggestion above and turn it into a hotkey for Templater or QuickAdd.

Run that hotkey on any file with hex colour codes, and it will turn them

image

Here’s the script in Templater form:

<%* 
// Get the text contents of the current file
const file = app.workspace.getActiveFile()
let contents = await app.vault.read(file)
// Replace HTML colour codes
contents = contents.replace(/#([a-f0-9]{6})/g, '<span style="color: #$1">â– </span><kbd><span>#</span>$1</kbd>')
// Save the new contents back to the current file
await app.vault.modify(file, contents)
-%>
2 Likes
5

My version
<div style="font-size:3em;color:#9632">â– </div>

Another option is the plugin color palette
A little tweak to make color palette a bit smaller:

/* color palette, compact */
.palette {
  width: 100px;
  margin-bottom: 1em;
}
6

I now also found a nice solution to this problem that someone shared on discord (I don’t remember the person’s name):
If you click on a color, the css automatically selects the texts inside to copy it.
By changing the callout name to > ![COLORS-X], where x is a number between 1-4, multiple color rows can also be displayed at the same line.

It looks like this:

grafik
grafik834Ă—465 16.5 KB

Raw text:


> [!COLORS-1]
<span style="background:#FF0038; color:white;"> FF0038 </span> <span style="background:#deb221; color:white;"> DEB221 </span> <span style="background:#fa90a7; color:white;"> fa90a7 </span> <span style="background:#B061FF; color:white;"> B061FF </span><span style="background:#005C59; color:white;"> 005C59 </span> <span style="background:#20b2aa; color:white;"> 20b2aa </span><span style="background:#00cc99; color:white;"> 00cc99 </span> <span style="background:#16d7d6; color:white;"> 16d7d6 </span><span style="background:#b1ebe1; color:white;"> b1ebe1 </span><span style="background:#d5f0ee; color:black;"> d5f0ee </span> <span style="background:#272B39; color:white;"> 272B39 </span>

CSS Snippet:
colored-span-hex.css (9.7 KB)

7

Hi Alan,

Thank you for your creative solution. It helps me greatly!

I made a small modification to the regular expression find string to include the following items:

  • find hex colour strings with capital letters
  • skip the converted strings (i.e., the script can be run multiple times to convert the new hex strings without affecting the ones already converted)

Hope this will be handy for others too.

<%* 
// Get the text contents of the current file
const file = app.workspace.getActiveFile()
let contents = await app.vault.read(file)
// Replace HTML colour codes
contents = contents.replace(/#([a-fA-F0-9]{6}(?!">â– <))/g, '<span style="color: #$1">â– </span><kbd><span>#</span>$1</kbd>')
// Save the new contents back to the current file
await app.vault.modify(file, contents)
-%>
2 Likes