# Text Color Set text color with the text--{token} utilities, on the same scale as the [Colors](/framework/docs/3.4/colors) palette. On 1-bit displays a grayscale token renders as a dither pattern of black and white pixels, so text can read as any shade of gray. ### Usage Use the `text--{shade}` utility classes to apply text color patterns to any element. The shade comes from one of these schemes (see [Colors](/framework/docs/3.4/colors)): - **Grayscale:** `text--black`, `text--gray-10` through `text--gray-75`, and `text--white`. - **Chromatic:** `text--{hue}` for the pure color, or `text--{hue}-{step}` for a step on that hue's ladder (e.g. text--red-50, text--blue-40). - **Semantic:** `text--primary`, `text--success`, `text--error`, and `text--warning`. See [Colors](/framework/docs/3.4/colors) for how each role resolves per device. - **Ink roles:** `text--default`, `text--muted`, and `text--inverse` paint the text colors the screen itself uses. A theme recolors them, and they mirror `bg--canvas` and its siblings on [Background](/framework/docs/3.4/background) . See the [Responsive Features](#responsive-text-color) section for responsive variants. ### Grayscale Sixteen grayscale values: black, gray-10 through gray-75, and white. Aa black Aa gray-10 Aa gray-15 Aa gray-20 Aa gray-25 Aa gray-30 Aa gray-35 Aa gray-40 Aa gray-45 Aa gray-50 Aa gray-55 Aa gray-60 Aa gray-65 Aa gray-70 Aa gray-75 Aa white Aa black Aa gray-10 Aa gray-15 Aa gray-20 Aa gray-25 Aa gray-30 Aa gray-35 Aa gray-40 Aa gray-45 Aa gray-50 Aa gray-55 Aa gray-60 Aa gray-65 Aa gray-70 Aa gray-75 Aa white ![TRMNL Logo](/images/plugins/trmnl--render.svg)Text color shades **Dark Mode Notice:** The palette appears inverted because dark mode swaps black and white and mirrors the gray and color ladders. Images are not affected unless they opt in via `image--adaptive`. Themed screens ignore dark mode entirely. ```
Black text
Gray 10 text
Gray 15 text
Gray 20 text
Gray 25 text
Gray 30 text
Gray 35 text
Gray 40 text
Gray 45 text
Gray 50 text
Gray 55 text
Gray 60 text
Gray 65 text
Gray 70 text
Gray 75 text
White text
``` Switch the screen picker (top right) to a color device (e.g. Inky Impression 7.3, Tidbyt) to see the hue sections below in color. ### Red Two classes write red text: - `text--red`: the pure red. - `text--red-{step}`: a step on the red ladder (e.g. text--red-50), on the same 10 to 75 scale as grayscale. Aa red-10 Aa red-15 Aa red-20 Aa red-25 Aa red-30 Aa red-35 Aa red-40 Aa red Aa red-45 Aa red-50 Aa red-55 Aa red-60 Aa red-65 Aa red-70 Aa red-75 Aa red-10 Aa red-15 Aa red-20 Aa red-25 Aa red-30 Aa red-35 Aa red-40 Aa red Aa red-45 Aa red-50 Aa red-55 Aa red-60 Aa red-65 Aa red-70 Aa red-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextRed ```
Red-10 text
Red-15 text
Red-20 text
Red-25 text
Red-30 text
Red-35 text
Red-40 text
Red text
Red-45 text
Red-50 text
Red-55 text
Red-60 text
Red-65 text
Red-70 text
Red-75 text
``` ### Orange Two classes write orange text: - `text--orange`: the pure orange. - `text--orange-{step}`: a step on the orange ladder (e.g. text--orange-50), on the same 10 to 75 scale as grayscale. Aa orange-10 Aa orange-15 Aa orange-20 Aa orange-25 Aa orange-30 Aa orange-35 Aa orange-40 Aa orange Aa orange-45 Aa orange-50 Aa orange-55 Aa orange-60 Aa orange-65 Aa orange-70 Aa orange-75 Aa orange-10 Aa orange-15 Aa orange-20 Aa orange-25 Aa orange-30 Aa orange-35 Aa orange-40 Aa orange Aa orange-45 Aa orange-50 Aa orange-55 Aa orange-60 Aa orange-65 Aa orange-70 Aa orange-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextOrange ```
Orange-10 text
Orange-15 text
Orange-20 text
Orange-25 text
Orange-30 text
Orange-35 text
Orange-40 text
Orange text
Orange-45 text
Orange-50 text
Orange-55 text
Orange-60 text
Orange-65 text
Orange-70 text
Orange-75 text
``` ### Yellow Two classes write yellow text: - `text--yellow`: the pure yellow. - `text--yellow-{step}`: a step on the yellow ladder (e.g. text--yellow-50), on the same 10 to 75 scale as grayscale. Aa yellow-10 Aa yellow-15 Aa yellow-20 Aa yellow-25 Aa yellow-30 Aa yellow-35 Aa yellow-40 Aa yellow Aa yellow-45 Aa yellow-50 Aa yellow-55 Aa yellow-60 Aa yellow-65 Aa yellow-70 Aa yellow-75 Aa yellow-10 Aa yellow-15 Aa yellow-20 Aa yellow-25 Aa yellow-30 Aa yellow-35 Aa yellow-40 Aa yellow Aa yellow-45 Aa yellow-50 Aa yellow-55 Aa yellow-60 Aa yellow-65 Aa yellow-70 Aa yellow-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextYellow ```
Yellow-10 text
Yellow-15 text
Yellow-20 text
Yellow-25 text
Yellow-30 text
Yellow-35 text
Yellow-40 text
Yellow text
Yellow-45 text
Yellow-50 text
Yellow-55 text
Yellow-60 text
Yellow-65 text
Yellow-70 text
Yellow-75 text
``` ### Lime Two classes write lime text: - `text--lime`: the pure lime. - `text--lime-{step}`: a step on the lime ladder (e.g. text--lime-50), on the same 10 to 75 scale as grayscale. Aa lime-10 Aa lime-15 Aa lime-20 Aa lime-25 Aa lime-30 Aa lime-35 Aa lime-40 Aa lime Aa lime-45 Aa lime-50 Aa lime-55 Aa lime-60 Aa lime-65 Aa lime-70 Aa lime-75 Aa lime-10 Aa lime-15 Aa lime-20 Aa lime-25 Aa lime-30 Aa lime-35 Aa lime-40 Aa lime Aa lime-45 Aa lime-50 Aa lime-55 Aa lime-60 Aa lime-65 Aa lime-70 Aa lime-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextLime ```
Lime-10 text
Lime-15 text
Lime-20 text
Lime-25 text
Lime-30 text
Lime-35 text
Lime-40 text
Lime text
Lime-45 text
Lime-50 text
Lime-55 text
Lime-60 text
Lime-65 text
Lime-70 text
Lime-75 text
``` ### Green Two classes write green text: - `text--green`: the pure green. - `text--green-{step}`: a step on the green ladder (e.g. text--green-50), on the same 10 to 75 scale as grayscale. Aa green-10 Aa green-15 Aa green-20 Aa green-25 Aa green-30 Aa green-35 Aa green-40 Aa green Aa green-45 Aa green-50 Aa green-55 Aa green-60 Aa green-65 Aa green-70 Aa green-75 Aa green-10 Aa green-15 Aa green-20 Aa green-25 Aa green-30 Aa green-35 Aa green-40 Aa green Aa green-45 Aa green-50 Aa green-55 Aa green-60 Aa green-65 Aa green-70 Aa green-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextGreen ```
Green-10 text
Green-15 text
Green-20 text
Green-25 text
Green-30 text
Green-35 text
Green-40 text
Green text
Green-45 text
Green-50 text
Green-55 text
Green-60 text
Green-65 text
Green-70 text
Green-75 text
``` ### Cyan Two classes write cyan text: - `text--cyan`: the pure cyan. - `text--cyan-{step}`: a step on the cyan ladder (e.g. text--cyan-50), on the same 10 to 75 scale as grayscale. Aa cyan-10 Aa cyan-15 Aa cyan-20 Aa cyan-25 Aa cyan-30 Aa cyan-35 Aa cyan-40 Aa cyan Aa cyan-45 Aa cyan-50 Aa cyan-55 Aa cyan-60 Aa cyan-65 Aa cyan-70 Aa cyan-75 Aa cyan-10 Aa cyan-15 Aa cyan-20 Aa cyan-25 Aa cyan-30 Aa cyan-35 Aa cyan-40 Aa cyan Aa cyan-45 Aa cyan-50 Aa cyan-55 Aa cyan-60 Aa cyan-65 Aa cyan-70 Aa cyan-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextCyan ```
Cyan-10 text
Cyan-15 text
Cyan-20 text
Cyan-25 text
Cyan-30 text
Cyan-35 text
Cyan-40 text
Cyan text
Cyan-45 text
Cyan-50 text
Cyan-55 text
Cyan-60 text
Cyan-65 text
Cyan-70 text
Cyan-75 text
``` ### Blue Two classes write blue text: - `text--blue`: the pure blue. - `text--blue-{step}`: a step on the blue ladder (e.g. text--blue-50), on the same 10 to 75 scale as grayscale. Aa blue-10 Aa blue-15 Aa blue-20 Aa blue-25 Aa blue-30 Aa blue-35 Aa blue-40 Aa blue Aa blue-45 Aa blue-50 Aa blue-55 Aa blue-60 Aa blue-65 Aa blue-70 Aa blue-75 Aa blue-10 Aa blue-15 Aa blue-20 Aa blue-25 Aa blue-30 Aa blue-35 Aa blue-40 Aa blue Aa blue-45 Aa blue-50 Aa blue-55 Aa blue-60 Aa blue-65 Aa blue-70 Aa blue-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextBlue ```
Blue-10 text
Blue-15 text
Blue-20 text
Blue-25 text
Blue-30 text
Blue-35 text
Blue-40 text
Blue text
Blue-45 text
Blue-50 text
Blue-55 text
Blue-60 text
Blue-65 text
Blue-70 text
Blue-75 text
``` ### Violet Two classes write violet text: - `text--violet`: the pure violet. - `text--violet-{step}`: a step on the violet ladder (e.g. text--violet-50), on the same 10 to 75 scale as grayscale. Aa violet-10 Aa violet-15 Aa violet-20 Aa violet-25 Aa violet-30 Aa violet-35 Aa violet-40 Aa violet Aa violet-45 Aa violet-50 Aa violet-55 Aa violet-60 Aa violet-65 Aa violet-70 Aa violet-75 Aa violet-10 Aa violet-15 Aa violet-20 Aa violet-25 Aa violet-30 Aa violet-35 Aa violet-40 Aa violet Aa violet-45 Aa violet-50 Aa violet-55 Aa violet-60 Aa violet-65 Aa violet-70 Aa violet-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextViolet ```
Violet-10 text
Violet-15 text
Violet-20 text
Violet-25 text
Violet-30 text
Violet-35 text
Violet-40 text
Violet text
Violet-45 text
Violet-50 text
Violet-55 text
Violet-60 text
Violet-65 text
Violet-70 text
Violet-75 text
``` ### Purple Two classes write purple text: - `text--purple`: the pure purple. - `text--purple-{step}`: a step on the purple ladder (e.g. text--purple-50), on the same 10 to 75 scale as grayscale. Aa purple-10 Aa purple-15 Aa purple-20 Aa purple-25 Aa purple-30 Aa purple-35 Aa purple-40 Aa purple Aa purple-45 Aa purple-50 Aa purple-55 Aa purple-60 Aa purple-65 Aa purple-70 Aa purple-75 Aa purple-10 Aa purple-15 Aa purple-20 Aa purple-25 Aa purple-30 Aa purple-35 Aa purple-40 Aa purple Aa purple-45 Aa purple-50 Aa purple-55 Aa purple-60 Aa purple-65 Aa purple-70 Aa purple-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextPurple ```
Purple-10 text
Purple-15 text
Purple-20 text
Purple-25 text
Purple-30 text
Purple-35 text
Purple-40 text
Purple text
Purple-45 text
Purple-50 text
Purple-55 text
Purple-60 text
Purple-65 text
Purple-70 text
Purple-75 text
``` ### Pink Two classes write pink text: - `text--pink`: the pure pink. - `text--pink-{step}`: a step on the pink ladder (e.g. text--pink-50), on the same 10 to 75 scale as grayscale. Aa pink-10 Aa pink-15 Aa pink-20 Aa pink-25 Aa pink-30 Aa pink-35 Aa pink-40 Aa pink Aa pink-45 Aa pink-50 Aa pink-55 Aa pink-60 Aa pink-65 Aa pink-70 Aa pink-75 Aa pink-10 Aa pink-15 Aa pink-20 Aa pink-25 Aa pink-30 Aa pink-35 Aa pink-40 Aa pink Aa pink-45 Aa pink-50 Aa pink-55 Aa pink-60 Aa pink-65 Aa pink-70 Aa pink-75 ![TRMNL Logo](/images/plugins/trmnl--render.svg)TextPink ```
Pink-10 text
Pink-15 text
Pink-20 text
Pink-25 text
Pink-30 text
Pink-35 text
Pink-40 text
Pink text
Pink-45 text
Pink-50 text
Pink-55 text
Pink-60 text
Pink-65 text
Pink-70 text
Pink-75 text
``` ### Backward Compatibility For backward compatibility, the original shade names (`gray-1` through `gray-7`) are still supported but deprecated. Each maps to one of the new shade names: ```
Gray 1 text (deprecated)
Gray 2 text (deprecated)
Gray 10 text (preferred)
Gray 20 text (preferred)
``` ### Responsive Features Text color classes support size, orientation, and bit-depth variants. Bit-depth prefixes like `1bit:`, `2bit:`, and `4bit:` set the shade for a specific device color depth. The demos above use them together, for example `1bit:text--black 2bit:text--gray-55 4bit:text--gray-60`. #### Breakpoint Prefixes Use breakpoint prefixes like `sm:`, `md:`, `lg:` to apply different colors per device size class. Responsive color Gray 50 by default, gray 30 on md+ ![TRMNL Logo](/images/plugins/trmnl--render.svg)Text ColorResponsive ``` Responsive color Progressive color Responsive chromatic color ``` #### Orientation and Size+Orientation Text colors can adapt to orientation with `portrait:` and `landscape:`, and can be combined with size breakpoints (e.g., `md:portrait:`). ``` Orientation color variant Color on md+ portrait ``` ### Patterned Ink on a Filled Element On a screen with no true gray, a gray shade is painted as a pattern clipped to the letters. That pattern uses the element's one background, so a patterned text color and a `bg--{shade}` fill cannot sit on the same element. Put the fill on the box and the text color on an element inside it; black and white never need this, because they are real colors. ```
Mon 8/3
Mon 8/3
``` ### Related APIs #### Reading text paint from JavaScript The `text(token, { el })` resolver returns the exact paint a `text--{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](/framework/docs/3.4/paint_colors) for every resolver and the Fill shape. ``` var fill = TRMNLPaint.text("gray-45", { el: "my-node" }); ``` Previous [ ## Text Alignment Control text alignment with responsive breakpoint, orientation, and bit-depth variants ](/framework/docs/3.4/text_alignment) Next [ ## Text Stroke Legible text when displayed on shaded backgrounds ](/framework/docs/3.4/text_stroke)