Obsidian Stats logoObsidian Stats

IroView

by nellowtcs
5
4
3
2
1
Score: 35/100
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. A color preview for HEX, HSL, RGB values in your notes, similar to VSCode's color preview.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
1
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Obsidian-IroView

All Contributors GitHub Actions Workflow Status GitHub License

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

Sponsors