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. The shade comes from one of three schemes
(see Colors):
-
Grayscale:
bg--black,bg--gray-10throughbg--gray-75, andbg--white. -
Chromatic:
bg--{hue}for the pure color (e.g. bg--red, bg--green), orbg--{hue}-{step}for a step on that hue's ladder (e.g. bg--red-50, bg--blue-40). -
Semantic:
bg--primary,bg--success,bg--error, andbg--warning. -
Surface roles:
bg--canvas,bg--surface, andbg--backdroppaint the screen's own background roles.
The surface roles resolve through the theme slot chain, so a theme repaints them. Reach for them when a block should follow the screen instead of pinning a shade a theme cannot move. See Theme Slots Theme Slots Every part of a screen a theme can recolor, from whole-screen colors down to single components, utilities, borders, and chart series This page lists every slot: each part of a screen a theme can recolor, and the mixin that sets it. A slot takes a framework token, not a raw color, so whatever you map still renders correctly on every device. .
<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 APIs
Reading background paint from JavaScript
The bg(token, { el }) resolver returns
the exact paint a bg--{token} utility would apply,
as a canonical Fill read from the live cascade with bit depth, dark mode, and theme resolved. Apply it to
canvases, SVGs, or chart options. See
Painting Colors
Painting Colors
Read background, text, stroke, and semantic colors from JavaScript as Fill objects
These functions tell you the exact color a CSS class paints right now: a background, a text color, a stroke, or a semantic color like error. Use them when something you draw in JavaScript has to match.
for every resolver and the
Fill shape.
var fill = TRMNLPaint.bg("gray-30", { el: "my-node" });