# Inline Color Swatches
<p align="center">
    <a href="https://github.com/Suika225/inline-color-swatch/releases/latest">
		<img src="https://img.shields.io/github/release/Suika225/inline-color-swatch?label=Version">
	</a>
	<a href="https://obsidian.md">
		<img src="https://img.shields.io/badge/Obsidian-Download-8a5cf5?logo=obsidian">
	</a>
	<a href="https://github.com/Suika225/inline-color-swatch">
		<img src="https://img.shields.io/badge/GitHub-Repository-25292e?logo=github">
	</a><br>
	<a href="https://github.com/Suika225/inline-color-swatch/blob/main/LICENSE">
		<img src="https://img.shields.io/github/license/Suika225/inline-color-swatch">
	</a>
	<a href="https://github.com/Suika225/inline-color-swatch/issues">
		<img src="https://img.shields.io/github/issues/Suika225/inline-color-swatch">
	</a>
	<!-- <img src="https://img.shields.io/github/downloads/Suika225/inline-color-swatch/total"> -->
</p>

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

| Theme   | Light mode                         | Dark mode                         |
| ------- | ---------------------------------- | --------------------------------- |
| Default | ![Default Theme(Light mode)](image/Default-Theme(Light-mode).png) | ![Default Theme(Dark mode)](image/Default-Theme(Dark-mode).png) |
| [Minimal](https://github.com/kepano/obsidian-minimal) | ![Minimal Theme(Light mode)](image/Minimal-Theme(Light-mode).png) | ![Minimal Theme(Dark mode)](image/Minimal-Theme(Dark-mode).png) |
| [Things](https://github.com/colineckert/obsidian-things) | ![Things Theme(Light mode)](image/Things-Theme(Light-mode).png)   | ![Things Theme(Dark mode)](image/Things-Theme(Dark-mode).png)   |