IroView

Preview HEX, HSL, and RGB colors directly in your Obsidian notes, just like VSCode's color preview.
Available on Obsidian!

Features

• Color preview: Instantly see color swatches for HEX, RGB(A), and HSL(A) values in your notes
• Live in editor and reading view: Works in both editing and preview modes
• Customizable: Toggle swatches, text colorization, and supported formats
• Contrast-aware: Only colorizes text if it remains readable
• Performance optimized: Efficiently processes large notes

Supported Formats

• HEX: #RGB, #RRGGBB, #RGBA, #RRGGBBAA
• RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
• HSL/HSLA: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)

Settings

• Show color swatch: Display a small colored square before color values
• Colorize text: Apply the color to the text itself (if contrast is good)
• Enable in reading view: Show previews in rendered Markdown
• Supported color formats: Toggle which color formats are recognized

Example

Type any of these in your note:

#ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

And see a color preview appear inline!

Installation

Direct (Recommended)

You can install IroView directly from Obsidian’s Community Plugins browser (or online here).

1. Open Settings -> Community Plugins
2. Make sure Restricted Mode is off
3. Click Browse
4. Search for “IroView”
5. Click Install, then Enable

Manual

If you prefer installing manually:

1. Download the latest release from the repo’s Releases page
   • You need:
     • main.js
     • manifest.json
     • styles.css (if present)
2. Create a folder in your vault:

   .obsidian/plugins/iroview
   

3. Place all downloaded files inside that folder
4. Restart Obsidian
5. Go to Settings -> Community Plugins and enable IroView

Technical Details

• Built with TypeScript and CodeMirror 6
• Uses Obsidian's popout-compatible activeDocument for DOM operations
• Efficient regex-based color detection

Star History

Contributors

Jhonny Rosa 🐛

Nameless 🐛