R Colors in CSS for R Markdown HTML Documents

A modular collection of CSS stylesheets that lets you use any of R’s named colors in your xaringan slides, blogdown pages, Shiny apps… in short in any R Markdown HTML documents.

pkg.garrickadenbuie.com/r-colors-css

R’s Named Colors

R ships with a list of colors with wonderful names, like lightgoldenrod3 and firebrick2. I don’t know all of the names and used to turn to an online list of colors so often that I put it on a mug.

In R, you can reference the color by name in nearly any function that applies to colors. They’re particularly easy to use in visualizations, like those made with ggplot2, because there are 657 colors and many have 4 variations on the same color hue, indexed by suffixes 1 to 4. For example, there are 4 variations of palevioletred that I’m using in the following plot for each of 4 years of Austin housing sales data.

g_austin_housing +
  ## A basic ggplot of home sale prices in Austin
  ## over 4 years, using the ggplot2::txhousing data
  scale_color_manual(
    values = c(
      "palevioletred1",
      "palevioletred2",
      "palevioletred3",
      "palevioletred4",
    )
  )

Utility CSS

If you’re used to working with R’s color names, they unfortunately don’t align with HTML’s named colors, which means that you can’t write a CSS rule like

h3.plot-title {
  color: palevioletred1;
}

because palevioletred1 isn’t a valid HTML color. This causes problems if you use an R color name in a function that write CSS files.

I’ve also been interested lately in utility CSS frameworks, like Tailwinds CSS and Tachyons. What’s awesome about these frameworks is that they use small, single-purpose CSS classes — called utility classes — that can be flexibly applied to your HTML elements. I do most, if not all, of my writing in some variant of markdown, and utility classes let me build small components or slightly adjust appearances without having to write a whole lot of CSS.

Tailwinds looks amazing, but it requires a moderately complicated build setup, so I’ve settled on using Tachyons. In particular, it integrates nicely with xaringan and other R Markdown outputs where a complete CSS framework is in use (like R Markdown with bootstrap). For that reason, I’ve included it in xaringanExtra, and you can add Tachyons to any R Markdown document with xaringanExtra::use_tachyons().

Here’s an example of what you can do with utility CSS. If I want to create a simple box with…

a border
- on all sides (.ba)
- that’s gray (.b--gray)
- with a medium line width (.bw2),
medium exterior margin (.ma2),
large interior padding (.pa4),
and a box shadow (.shadow-1)

…I can use those classes on the same element. Here are four markdown syntax variations that use those classes.

xaringan

.b--gray.ba.bw2.ma2.pa4.shadow-1[
Talent is a pursued interest.
Anything that you're willing to practice, you can do.

—Bob Ross
]

R Markdown

::: {.b--gray .ba .bw2 .ma2 .pa4 .shadow-1}
Talent is a pursued interest.
Anything that you're willing to practice, you can do.

—Bob Ross
:::

HTML

<div class="b--gray ba bw2 ma2 pa4 shadow-1">
<p>Talent is a pursued interest.
Anything that you're willing to practice, you can do.
</p>
<p>—Bob Ross</p>
</div>

htmltools (R)

htmltools::div(
  class = "b--gray ba bw2 ma2 pa4 shadow-1",
  htmltools::p(
    "Talent is a pursued interest.",
    "Anything that you're willing to practice, you can do.",
  ),
  htmltools::p("—Bob Ross")
)

CSS

Note: this isn’t the exact CSS from Tachyons, but it’s very similar.

.b--gray {
  border-color: #888888;
}
.ba {
  border-style: solid;
}
.bw2 {
  border-width: .25em;
}
.ma2 {
  margin: 1.5em;
}
.pa4 {
  padding: 2em;
}
.shadow-1 {
  box-shadow: 4px 4px 8px 0 rgba(0,0,0,.2);
}

Talent is a pursued interest. Anything that you’re willing to practice, you can do.

—Bob Ross

R Colors in CSS

Wouldn’t it be great to have utility CSS classes that you could use in xaringan slides and other R Markdown outputs?

@grrrck First of all, I 😻 `xaringanExtra`!

I am looking at the tachyons colors and can't help but think that the palette is rather limited. https://t.co/0BUPGnkrb4

Is there a way to intercept a tachyon with a named R color and generate a proper css with the correct hex code?

— Deemah 🇺🇦 🇳🇴 🇸🇪 (@dmi3k) September 10, 2020

I thought this was a great idea, so I put together a set of stylesheets with all of R’s named colors as CSS classes. You can choose any or all of the three stylesheets, depending on your needs, they each work independently.

r-colors.css Classes for setting foreground and background colors
- .palevioletred1 sets the foreground color
- .bg-palevioletred1 sets the background color
r-colors.hover.css Classes for setting foreground and background colors on hover
- .palevioletred1-hover sets the foreground color on hover
- .bg-palevioletred1-hover sets the background color on hover
r-colors.vars.css CSS variables for each color name
- var(--palevioletred1) for use in other CSS properties

For more on how to use the stylesheets, including a searchable table with all of the colors and an interactive color preview, check out the documentation page.

As an example, let’s update the box example above with some color from R. I used the color picker table in the documentation to pick out an interesting color combination.

CSS

I used the CSS variables stylesheet to add a new CSS rule in addition to the CSS in the example above. This class sets the border color for the box to paleturquoise4.

.b--paleturquoise4 {
  border-color: var(--paleturquoise4);
}

The other colors used are steelblue4 (text), mintcream (background), and mediumvioletred (text on hover, from the hover classes stylesheet).