Inline Color Swatch

approved

by suika225

This plugin has not been manually reviewed by Obsidian staff. Show color swatches for CSS color values in inline code.

★ 2 stars↓ 32 downloadsUpdated 2mo agoMIT
Install in ObsidianView on GitHub

Inline Color Swatches


Inline Color Swatches shows a small color preview next to supported CSS color values written in inline code spans.

This plugin follows GitHub Flavored Markdown behavior:

  • ✅ Inline code spans (`...`) are supported
  • ❌ Code blocks (```...```) are intentionally excluded

Supported formats

  • Hex: #RRGGBB, #RGB, #RRGGBBAA, #RGBA
  • RGB(A): rgb(R,G,B), rgb(R,G,B,A) (case-insensitive)
  • HSL(A): hsl(H,S,L), hsl(H,S,L,A) (case-insensitive)

[!note]

  • Uppercase and lowercase letters are not distinguished.
  • Supported color models cannot use any characters that contain leading or trailing whitespace within backquotes.

Syntax & examples

#RRGGBB #RGB #RRGGBBAA #RGBA
#0080ff #0fa #ff008080 #ff0f

rgb(R,G,B) rgb(R,G,B,A)
RGB(128,128,128) rgb(0,255,255,100)

hsl(H,S,L) hsl(H,S,L,A)
HSL(150,50%,90%) hsl(32,100%,50%,100)

Theme previews

ThemeLight modeDark mode
DefaultDefault Theme(Light mode)Default Theme(Dark mode)
MinimalMinimal Theme(Light mode)Minimal Theme(Dark mode)
ThingsThings Theme(Light mode)Things Theme(Dark mode)

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.