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


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("hex-color-preview");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/hex-color-preview.js";
  extension.id = "hex-color-preview";
  extension.async = true;
  extension.type = "text/javascript";


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


Other Extensions