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-colour@1.6.0

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

To activate the filter, add the following to your YAML front matter:

• Old (<1.8.21):

  filters:
    - quarto
    - preview-colour

• New (>=1.8.21):

  filters:
    - path: preview-colour
      at: post-quarto

- code: `#441100` or `rgb(10, 100, 200)`
- text: #441100 or rgb(10, 100, 200)

Configure which elements should show colour previews:

extensions:
  preview-colour:
    code: true # Enable previews for inline code
    text: false # Enable previews for regular text

Customise the glyph symbol used for colour previews:

# Simple: single glyph for all formats
extensions:
  preview-colour:
    glyph: "●"

# Advanced: per-format glyphs
extensions:
  preview-colour:
    glyph:
      default: "●"
      html: "■"
      latex: '\\textbullet' # Important: Single quotes and LaTeX escape
      typst: "◆"
      docx: "◉"
      pptx: "◉"

Default glyphs when not customised:

• ✅ Named colours (CSS Level 4):
  • ✅ code: red, rebeccapurple, cornflowerblue
  • ✅ text: red, rebeccapurple, cornflowerblue
  • ✅ Supports 140+ CSS named colours including British/American variants (gray/grey)
• ✅ hex codes:
  • ✅ code: #441100
  • ✅ text: #441100
• ✅ short hex codes:
  • ✅ code: #F03
  • ✅ text: #F03
• ✅ 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)
• ✅ 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%)
• ✅ hwb:
  • ✅ code: hwb(135 0% 40%)
  • ✅ text: hwb(135 0% 40%)
• ✅ 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%)
• ✅ rgba (alpha channel):
  • ✅ code: rgba(255, 0, 0, 0.5)
  • ✅ code (percent alpha): rgba(255, 0, 0, 50%)
  • ✅ text: rgba(255, 0, 0, 0.5)
• ✅ hsla (alpha channel):
  • ✅ code: hsla(120, 100%, 50%, 0.25)
  • ✅ text: hsla(120, 100%, 50%, 0.25)
• ✅ CSS keywords:
  • ✅ code: currentColor, transparent
  • ✅ text: currentColor, transparent

The extension can write every detected colour to a JSON file for downstream tooling (audits, palette extraction, design systems). Enable bulk export via extensions.preview-colour.json. Set the value to true to write preview-colour.json in the project root, or supply a custom path:

extensions:
  preview-colour:
    json: my-colours.json

The exported file has the following shape:

{
  "extension": "preview-colour",
  "count": 3,
  "colours": [
    {
      "original": "#FF0000",
      "hex": "#FF0000",
      "css": "#FF0000",
      "source": "code"
    },
    {
      "original": "rgba(255, 0, 0, 0.5)",
      "hex": "#FF0000",
      "alpha": "80",
      "css": "rgba(255, 0, 0, 0.5)",
      "source": "code"
    },
    {
      "original": "currentColor",
      "keyword": "currentColor",
      "css": "currentColor",
      "source": "text"
    }
  ]
}

The source field reports where the colour was detected:

• code for inline-code matches.
• text for single-token text matches.
• text-multitoken for function-style colours that span several Pandoc Str/Space tokens.

The filter scans every Str and Code inline element in the document. Cost is linear in the number of inline tokens; documents with thousands of paragraphs may add measurable overhead. Disable scanning where it is not needed by setting code: false or text: false.

The top-level preview-colour: configuration block is deprecated since v1.4.0 (2026-02-21) in favour of the namespaced extensions.preview-colour: block. The current behaviour is:

Here is the source code for a minimal example: example.qmd.

Output of example.qmd:

• HTML
• Typst/PDF
• LaTeX/PDF (XeLaTeX)
• LaTeX/PDF (LuaLaTeX)
• LaTeX/PDF (PDFLaTeX)
• Reveal.js
• Beamer/PDF
• Word/Docx
• PowerPoint/Pptx