Colors
The Colors system defines the complete palette for the framework: grayscale, chromatic hues, and semantic roles (primary, success, error, warning). Use these tokens with bg--, text--, and other utilities. See Background and Text Color for usage examples.
Grayscale Palette
The complete range of grayscale shades available in the framework, from pure black to pure white. These tokens use the same lightness scale as the chromatic palette.
Chromatic Palette
The framework offers 10 hues × 14 lightness steps (red, orange, yellow, lime, green, cyan, blue, violet, purple, pink), using the same steps as grayscale (10, 15, 20, …, 75). Select a color device (e.g. Inky Impression 7.3, Tidbyt) from the Device Preview above to see these colors in action. Use the Raw Colors / Preview Colors toggle to compare full-bright tokens vs device-representative rendering.
Semantic Colors
Semantic color roles map meaning to base hues: use bg--primary, text--success, and similar utilities for intent-based styling. These alias underlying tokens (e.g. primary → blue) and inherit all device/bit-depth behavior. Themes repaint these roles through the semantic channels
Theme Slots
Theme Slots
Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp
Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time.
(theme-slots.semantic-bg, theme-slots.semantic-text), never by setting --color-{role} directly.
| Role | Underlying Token | Use |
|---|---|---|
| primary | blue |
Main actions, accents |
| success | green |
Confirmations, positive states |
| error | red |
Errors, destructive actions |
| warning | orange |
Cautions, alerts |
Token Syntax
Apply these color tokens with utility prefixes. The Background page documents bg--{token}; the Text Color page documents text--{token}. Other utilities (border, outline, etc.) may use the same tokens where applicable.
| Utility | Example | Use |
|---|---|---|
| bg-- | bg--gray-50, bg--red-40 |
Background colors |
| text-- | text--gray-50, text--blue-60, text--success |
Text colors |
| bg-- / text-- (semantic) | bg--primary, text--error, text--success |
Semantic roles (primary, success, error, warning) |
Three naming schemes make up the token set. A fourth, the legacy gray-1 to gray-7 names, is covered under Backward Compatibility below.
-
Grayscale:
black,gray-10throughgray-75, andwhite. -
Chromatic:
{hue}for the pure color, or{hue}-{step}for a step on that hue's ladder (e.g. red-50, blue-40). -
Semantic:
primary,success,error, andwarningalias the base hues.
Backward Compatibility
For backward compatibility, the original shade names (gray-1 through gray-7) are still supported but deprecated. These map to equivalent extended shades:
<!-- Deprecated (but still works) -->
<div class="bg--gray-1">Gray 1</div>
<div class="bg--gray-2">Gray 2</div>
<!-- Preferred (new naming) -->
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-20">Gray 20</div>Resolved Color Manifest
Releases publish framework_colors.resolved.json,
this palette resolved to plain data. It ships with 3.2.0 and every release after it, plus 3.1.2. It carries the hex value of every chromatic token, the shade
steps, the limited color palettes, and the fallback maps that pick a gray for every color token.
The manifest is what the framework's own generators read: the Sass color tokens and the dither bitmaps are built from it, and the TRMNL server loads it for its palette definitions. Read it when you quantize colors outside the browser, so your renderer uses the framework's numbers instead of a copy.
Download it from the asset list on
Releases, at
/framework/colors/{version}/framework_colors.resolved.json.
The zip for those releases carries the same file at its root.
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| 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 | - | - | - |
Related APIs
Reading the palette 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
Resolve background, text, stroke, and semantic tokens from JavaScript as canonical Fill objects
The color resolvers read background, text, stroke, and semantic tokens from the live cascade and return canonical Fill objects. Use them when JavaScript needs the exact paint a CSS utility would produce.
for every resolver and the
Fill shape.
var fill = TRMNLPaint.bg("red-55", { el: "my-chart" });Remapping the palette from a theme
A theme can re-point the raw palette utilities
(bg--*,
text--*,
text-stroke--*) at its own hue, in bulk or one token
at a time, so plugin markup that names gray tokens follows the theme without edits. See
Theme Slots
Theme Slots
Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp
Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time.
for the remap mixins and the two shipped examples.
@include theme-slots.utility-remap-grayscale("red", $side: "bright");