Render preview of a color in a file

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.

5 Likes

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>.

5 Likes

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

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)
-%>
4 Likes

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;
}

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:

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)

2 Likes

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)
-%>
3 Likes

Hi folks, thanks for the previous work - life saver. I’ve added porting one of the VSCode extensions for this functionality to my maybe-todo-list, in the meantime…

I found that for whatever reason my hex codes were being displayed as tags, to avoid this it seems I can either add a leading # or use inline code #<hex>.

So I’ve extended the regex to deal with either of these cases.

As a bonus, this will also support RGB(A) with {6} → {6,8}.

  • I opted not to recognise 3-digit hex codes (e.g. #A90) as these are less common and are more likely to collide with real body text
<%* 
// wrap 6/8-digit RGB(A) hex codes in span-color & trailling kbd-styled hex code text
// replaces optional leading backslash or surrounding inline code ticks
// 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(/`*\\{0,1}#([a-fA-F0-9]{6,8}(?!">■<))`*/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)
-%>

Before

Note the 1st, 3rd line use inline code ticks, 2nd line has a leading backslash and 4th line didn’t autocomplete to a tag for reasons? so uses neither.

Screenshot 2024-01-14 at 17.36.33

After

RGBA support is visible with the varying transparency of the preview colour.

Screenshot 2024-01-14 at 17.36.21