HEX COLOR PREVIEW

The Hex Color Preview extension renders a preview square of the color next to valid tagged hex codes.

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

var existing = document.getElementById("roamjs-hex-color-preview");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/hex-color-preview.js";
  extension.id = "roamjs-hex-color-preview";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Usage

All you have to do is have the extension installed. Anytime you create a valid hex color tag, it will render a colored preview next to the tag.

To change the CSS styling of the preview, you'll want to change the CSS associated with the roamjs-hex-color-preview class.

By default, this extension accepts hexes of all lengths. To configure only accepting specific lengths, create a block in the roam/js/hex-color-preview page with the text "Include Lengths". For every length you'd like supported, create a child with that number. So if you only want hex codes with length 6 to be rendered, your blocks should be:

  • Include Lengths
    • 6

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right. If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

ROAMJS DIGEST

Add your email below to stay up to date on all RoamJS features, fixes, and news!

Other Extensions