Preview Colour Example

Quarto Extension

Mickaël CANOUIL, Ph.D.

Supported Colour Formats

✅ Named Colours

  • ✅ code: red◉
  • ✅ code: rebeccapurple◉
  • ✅ code: cornflowerblue◉
  • ✅ text: red◉
  • ✅ text: rebeccapurple◉
  • ✅ text: cornflowerblue◉
  • ✅ British/American: 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 (%)

  • ✅ 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)◉

✅ Keyword colours

  • ✅ code: currentColor◉
  • ✅ code: transparent◉
  • ✅ text: currentColor◉
  • ✅ text: transparent◉

Note

Alpha-bearing colours render faithfully in HTML. In LaTeX, Typst, DOCX, and PPTX, the opaque colour is shown and a one-time warning is emitted. The currentColor◉ and transparent◉ keywords render only in HTML; other formats skip the preview with a one-time warning.

Multiple and Embedded Colours

✅ Multiple Colours (Inline)

  • ✅ code: ["#FF0000◉", "#00FF00◉", "#0000FF◉"]
  • ✅ code: #FF0000◉ #00FF00◉ #0000FF◉
  • ✅ code: colors: ["#E74C3C◉", "#3498DB◉", "#2ECC71◉", "#F39C12◉"]

✅ Embedded Colours (in Code)

  • ✅ code: my_scale <- list(scale_colour_manual(values = c("Adelie" = "#0A64C8◉")))
  • ✅ code: color1 = "#FF5733◉"; color2 = "#33FF57◉"
  • ✅ code: background-color: #282c34◉;

✅ Mixed Formats

  • ✅ code: ["#FF0000◉", "rgb(0, 255, 0)◉"]