Background
Use the color palette defined in Colors. Apply these shades with bg--{token} for backgrounds. On 1-bit displays, grayscale uses dither patterns; on 2-bit and 4-bit+, solid colors render.
Grayscale
Grayscale background shades only, including the center spacer between 40 and 45.
Grayscale backgrounds
Base Colors
Full base palettes for background tokens: grayscale and all chromatic hues with every shade step.
Base background colors
Usage
Use the bg--{shade} utility
classes to apply these background patterns to any element. Grayscale: black, gray-10 through gray-75, and white.
Chromatic: bg--{hue} (pure color, e.g. bg--red, bg--green) or bg--{hue}-{step} (e.g. bg--red-50, bg--blue-40).
Semantic: bg--primary, bg--success, bg--error, etc. (see Colors).
<div class="bg--black">Black</div>
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-15">Gray 15</div>
<div class="bg--gray-20">Gray 20</div>
<div class="bg--gray-25">Gray 25</div>
<div class="bg--gray-30">Gray 30</div>
<div class="bg--gray-35">Gray 35</div>
<div class="bg--gray-40">Gray 40</div>
<div class="bg--gray-45">Gray 45</div>
<div class="bg--gray-50">Gray 50</div>
<div class="bg--gray-55">Gray 55</div>
<div class="bg--gray-60">Gray 60</div>
<div class="bg--gray-65">Gray 65</div>
<div class="bg--gray-70">Gray 70</div>
<div class="bg--gray-75">Gray 75</div>
<div class="bg--white">White</div>Chromatic tokens
Use bg--{hue}-{step} and text--{hue}-{step} for color backgrounds and text.
<div class="bg--red">Pure red</div>
<div class="bg--red-50">Red 50</div>
<div class="bg--blue-40">Blue 40</div>
<div class="bg--green-60">Green 60</div>
<div class="text--red-50">Red text</div>Semantic tokens
Use bg--{role} and text--{role} for intent-based colors. Roles: primary, success, error, warning. See Colors for the full mapping.
<div class="bg--primary text--white">Primary</div>
<div class="bg--success text--white">Success</div>
<div class="bg--error text--white">Error</div>
<div class="text--warning">Warning text</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 4/8/16-bit |
|---|---|---|---|
| Semantic | |||
--black
|
#000000 | — | — |
--color-error
|
var(--red) | — | — |
--color-primary
|
var(--blue) | — | — |
--color-success
|
var(--green) | — | — |
--color-warning
|
var(--orange) | — | — |
--white
|
#FFFFFF | — | — |
| Grayscale | |||
--gray-10
|
#111111 | — | — |
--gray-15
|
#222222 | — | — |
--gray-20
|
#333333 | — | — |
--gray-25
|
#444444 | — | — |
--gray-30
|
#555555 | — | — |
--gray-35
|
#666666 | — | — |
--gray-40
|
#777777 | — | — |
--gray-45
|
#888888 | — | — |
--gray-50
|
#999999 | — | — |
--gray-55
|
#AAAAAA | — | — |
--gray-60
|
#BBBBBB | — | — |
--gray-65
|
#CCCCCC | — | — |
--gray-70
|
#DDDDDD | — | — |
--gray-75
|
#EEEEEE | — | — |
| Legacy Grayscale | |||
--gray-1
|
#111111 | — | — |
--gray-2
|
#333333 | — | — |
--gray-3
|
#555555 | — | — |
--gray-4
|
#777777 | — | — |
--gray-5
|
#999999 | — | — |
--gray-6
|
#BBBBBB | — | — |
--gray-7
|
#DDDDDD | — | — |