Skip to main content

Tile Background Color Guide

This guide lists all available tile background color utility classes used on the site.

How to use

Add one of the classes below to a tile, social pill, or element that reads the --tile-bg custom property:

<article class="tile tile-tone-12">
  ...
</article>

{
  label: 'GitHub',
  colorClass: 'tile-tone-12'
}

All current tile tone classes use the same text color value (--tile-text: #f2f4f8).

Available colors

Class	Background (`--tile-bg`)	Text (`--tile-text`)
`tile-tone-01`	`#f6adb6`	`#f2f4f8`
`tile-tone-02`	`#f4c8d8`	`#f2f4f8`
`tile-tone-03`	`#ef9ab4`	`#f2f4f8`
`tile-tone-04`	`#e58aac`	`#f2f4f8`
`tile-tone-05`	`#d572a3`	`#f2f4f8`
`tile-tone-06`	`#c95a9a`	`#f2f4f8`
`tile-tone-07`	`#b94f93`	`#f2f4f8`
`tile-tone-08`	`#a847a8`	`#f2f4f8`
`tile-tone-09`	`#9645b6`	`#f2f4f8`
`tile-tone-10`	`#8250c9`	`#f2f4f8`
`tile-tone-11`	`#6f58d3`	`#f2f4f8`
`tile-tone-12`	`#5f67dc`	`#f2f4f8`
`tile-tone-13`	`#5576de`	`#f2f4f8`
`tile-tone-14`	`#4d85d8`	`#f2f4f8`
`tile-tone-15`	`#4f93cf`	`#f2f4f8`
`tile-tone-16`	`#5aa1c3`	`#f2f4f8`
`tile-tone-17`	`#66adc0`	`#f2f4f8`
`tile-tone-18`	`#74b8cc`	`#f2f4f8`
`tile-tone-19`	`#8ec1d6`	`#f2f4f8`
`tile-tone-20`	`#a7cae0`	`#f2f4f8`
`tile-tone-21`	`#d9b0f2`	`#f2f4f8`
`tile-tone-22`	`#c89ae7`	`#f2f4f8`
`tile-tone-23`	`#b682dc`	`#f2f4f8`
`tile-tone-24`	`#a26ad1`	`#f2f4f8`
`tile-tone-25`	`#8f56c2`	`#f2f4f8`
`tile-tone-26`	`#7f49b4`	`#f2f4f8`
`tile-tone-27`	`#f0b9a0`	`#f2f4f8`
`tile-tone-28`	`#e39b7f`	`#f2f4f8`
`tile-tone-29`	`#d48269`	`#f2f4f8`
`tile-tone-30`	`#c56d63`	`#f2f4f8`

How to use
Available colors