preview-colour is a Quarto extension that automatically renders colour previews for inline colour codes in both inline code blocks and regular text.
It supports multiple colour formats including hex, RGB, HSL, and HWB values.
It supports rendering in various output formats such as HTML, Reveal.js, PDF (via LaTeX), Beamer (LaTeX), Typst, Word, and PowerPoint.
You can install this extension using the Quarto CLI:
quarto add mcanouil/quarto-preview-colourThis will install the extension under the _extensions subdirectory.
If you're using version control, you will want to check in this directory.
Add the extension to your document's YAML front matter:
filters:
- preview-colour- code: `#441100` or `rgb(10, 100, 200)`
- text: #441100 or rgb(10,100,200)Note
Colour codes should be placed in inline code blocks (alone) or regular text.
❌ Invalid:
`"My colour is #441100"``["#441100", "#114400"]`
✅ Valid:
`#441100`
Configure which elements should show colour previews:
extensions:
preview-colour:
code: true # Enable previews for inline code
text: false # Enable previews for regular text- ❌ Names one:
orange(will probably never be supported) - ✅ hex codes:
- ✅ code:
#441100 - ✅ text: #441100
- ✅ code:
- ✅ short hex codes:
- ✅ code:
#F03 - ✅ text: #F03
- ✅ code:
- 🔶 rgb:
- ✅ code:
rgb(10, 100, 200) - ✅ code (no space):
rgb(10,100,200) - ❌ text: rgb(10, 100, 200)
- ✅ text (no space): rgb(10,100,200)
- ✅ code:
- 🔶 rgb with %:
- ✅ code:
rgb(100%, 20%, 100%) - ✅ code (no space):
rgb(100%,20%,100%) - ❌ text: rgb(100%, 20%, 100%)
- ✅ text (no space): rgb(100%,20%,100%)
- ✅ code:
- 🔶 hwb:
- ✅ code:
hwb(135 0% 40%) - ❌ text: hwb(135 0% 40%)
- ✅ code:
- 🔶 hsl:
- ✅ code:
hsl(240, 100%, 50%) - ✅ code (no space):
hsl(240,100%,50%) - ❌ text: hsl(240, 100%, 50%)
- ✅ text (no space): hsl(240,100%,50%)
- ✅ code:
Here is the source code for a minimal example: example.qmd.
Outputs of example.qmd: