Preview Colour

A swatch beside every colour code.

What the preview-colour extension does, how to enable it, and the colour formats it recognises.
Author

Mickaël CANOUIL, Ph.D.

A document about colour is full of values nobody can read. #441100◉ says nothing; rgb(10, 100, 200)◉ says a little less.

preview-colour draws the colour next to the code that names it, so a palette, a theme file, or a style guide can be read rather than decoded.

Installation

quarto add mcanouil/quarto-preview-colour@2.0.0

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

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

Enable the filter:

filters:
  - preview-colour

Then write colours as you would anyway:

The brand colour is `#b22222`, with `rgb(10, 100, 200)` for links.

The brand colour is #b22222◉, with rgb(10, 100, 200)◉ for links.

Inline code is scanned by default; prose is not, until you ask:

extensions:
  preview-colour:
    code: true
    text: true

This site enables both, so rebeccapurple◉ in ordinary prose is marked too.

Note

A colour is recognised wherever it sits inside inline code. `#441100◉` is marked, and so is each colour in `["#441100◉", "#114400◉"]`.

See the Reference for every format and option, and the Examples for each of them rendered.

Where it works

HTML, RevealJS, LaTeX, Beamer, Typst, Word, and PowerPoint.

Each gets a glyph appropriate to it, and the Reference records which formats can show transparency and which fall back to the opaque colour.

Back to top