Render preview of a color in a file

[Ozen]

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.

[CawlinTeffid]

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

[heystenner]

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

Don't treat hexadecimal numbers as tags

Use case or problem I you like a color from some css file and enter #00FFFF or some such hex number it is turned into a tag. You have to remember to put it into some “code” block or such. But if you are downloading a page from the browser with markdownload that has a lot of hex numbers, it is a huge pain to clean up… Proposed solution Add an option to recognize hexadecimal numbers and not treat as tags. Current workaround (optional) make them code blocks

[AlanG]

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

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

[Jopp]

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

[Ozen]

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)

[nqbao1234]

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

[SomeGuy]

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.

After

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