Text color
Set text color from configured color values or a validated arbitrary color.
Set the foreground color of text while leaving its background and surrounding layout alone.
Quick reference
| Example class | Expected declarations |
|---|---|
text-ink | color: var(--zw-color-ink); |
text-[#8b1e3f]/90 | color: color-mix(in oklab, #8b1e3f 90%, transparent); |
Example setup
The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.
Examples in use
Use configured text colors
text-ink and text-accent resolve through this example’s explicit color tokens; /85 adjusts only the accent color.
<div class="wind-demo-copy"><p><span class="text-ink">Primary text</span> uses a configured dark ink color.</p><p><span class="text-accent/85">Accent text at 85 percent</span> stays legible on the light page.</p></div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-copy {
max-width: 34rem;
color: #243447;
font: 16px / 1.7 system-ui, sans-serif;
}
.wind-demo-copy p {
margin: 0 0 .6rem;
}
.text-accent\/85 {
color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent);
}
.text-ink {
color: var(--zw-color-ink);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-copy": true
},
"safelist": {
"docs-preview": [
"text-accent/85",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-copy { max-width: 34rem; color: #243447; font: 16px/1.7 system-ui, sans-serif; }
.wind-demo-copy p { margin: 0 0 0.6rem; }Add a one-off color
The bracket value is a validated CSS color, and /90 applies the supported color-opacity modifier.
<p class="wind-demo-copy">A validated custom color: <span class="text-[#8b1e3f]/90">deep berry at 90 percent</span>.</p>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-copy {
max-width: 34rem;
color: #243447;
font: 16px / 1.7 system-ui, sans-serif;
}
.text-\[\#8b1e3f\]\/90 {
color: color-mix(in oklab, #8b1e3f 90%, transparent);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-copy": true
},
"safelist": {
"docs-preview": [
"text-[#8b1e3f]/90"
]
}
}
}Authored demonstration CSS
.wind-demo-copy { max-width: 34rem; color: #243447; font: 16px/1.7 system-ui, sans-serif; }Custom and named values
Names such as text-ink resolve only through tokens.colors. The literal keywords text-current and text-transparent are also accepted. Bracket values such as text-[#8b1e3f] are parsed as CSS colors. A slash modifier accepts an integer from 0 to 100 and mixes that color with transparent in Oklab; text-accent/85 therefore fades the color itself. This family has no built-in palette.
Related guides: Utility grammar · Variants
Catalog details
text
| Field | Value |
|---|---|
| Catalog identifier | v1.text.color |
| Class pattern | text-<suffix> |
| Grammar | {"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"color","allowsFractionSlash":false,"allowsColorOpacity":true} |
| Accepted values | 2 |
| Token categories | colors |
| Negative-value policy | forbidden |
| Conflict group and rank | color (22) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | color |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "transparent" | "transparent" |
keyword | "current" | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
color | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
text-[red]/40 | color: color-mix(in oklab, red 40%, transparent) |