Inline Color Swatch

pending

by Suika

Show color swatches for CSS color values in inline code.

★ 2 starsUpdated 22d agoMITDiscovered via Obsidian Unofficial Plugins
View 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.