Text Colors
This page lists all Text Colors CSS custom properties and utility classes available in the OxyProps Framework
Responsive Text Colors
link Responsive Text ColorsChromatic Responsive Colors
link Chromatic Responsive Colors| Description | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| Brand responsive color. | --o-brand | o-text-brand | Sample Text |
| Accent responsive color. | --o-accent | o-text-accent | Sample Text |
| Links responsive color. | --o-links | o-text-links | Sample Text |
| Visited responsive color. | --o-visited | o-text-visited | Sample Text |
Neutral Responsive Colors
link Neutral Responsive Colors| Description | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| Text 1 responsive color. | --o-text-1 | o-text-1 | Sample Text |
| Text 2 responsive color. | --o-text-2 | o-text-2 | Sample Text |
Fixed Text Colors
link Fixed Text ColorsCanvas (Neutral)
link Canvas (Neutral)| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-canvas-000 | o-text-canvas-000 | Sample Text |
| 015 | --o-canvas-015 | o-text-canvas-015 | Sample Text |
| 025 | --o-canvas-025 | o-text-canvas-025 | Sample Text |
| 050 | --o-canvas-050 | o-text-canvas-050 | Sample Text |
| 075 | --o-canvas-075 | o-text-canvas-075 | Sample Text |
| 085 | --o-canvas-085 | o-text-canvas-085 | Sample Text |
| 100 | --o-canvas-100 | o-text-canvas-100 | Sample Text |
| 200 | --o-canvas-200 | o-text-canvas-200 | Sample Text |
| 300 | --o-canvas-300 | o-text-canvas-300 | Sample Text |
| 400 | --o-canvas-400 | o-text-canvas-400 | Sample Text |
| 500 | --o-canvas-500 | o-text-canvas-500 | Sample Text |
| 600 | --o-canvas-600 | o-text-canvas-600 | Sample Text |
| 700 | --o-canvas-700 | o-text-canvas-700 | Sample Text |
| 800 | --o-canvas-800 | o-text-canvas-800 | Sample Text |
| 900 | --o-canvas-900 | o-text-canvas-900 | Sample Text |
| 1000 | --o-canvas-1000 | o-text-canvas-1000 | Sample Text |
Brand
link Brand| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-brand-000 | o-text-brand-000 | Sample Text |
| 015 | --o-brand-015 | o-text-brand-015 | Sample Text |
| 025 | --o-brand-025 | o-text-brand-025 | Sample Text |
| 050 | --o-brand-050 | o-text-brand-050 | Sample Text |
| 075 | --o-brand-075 | o-text-brand-075 | Sample Text |
| 085 | --o-brand-085 | o-text-brand-085 | Sample Text |
| 100 | --o-brand-100 | o-text-brand-100 | Sample Text |
| 200 | --o-brand-200 | o-text-brand-200 | Sample Text |
| 300 | --o-brand-300 | o-text-brand-300 | Sample Text |
| 400 | --o-brand-400 | o-text-brand-400 | Sample Text |
| 500 | --o-brand-500 | o-text-brand-500 | Sample Text |
| 600 | --o-brand-600 | o-text-brand-600 | Sample Text |
| 700 | --o-brand-700 | o-text-brand-700 | Sample Text |
| 800 | --o-brand-800 | o-text-brand-800 | Sample Text |
| 900 | --o-brand-900 | o-text-brand-900 | Sample Text |
| 1000 | --o-brand-1000 | o-text-brand-1000 | Sample Text |
Accent
link Accent| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-accent-000 | o-text-accent-000 | Sample Text |
| 015 | --o-accent-015 | o-text-accent-015 | Sample Text |
| 025 | --o-accent-025 | o-text-accent-025 | Sample Text |
| 050 | --o-accent-050 | o-text-accent-050 | Sample Text |
| 075 | --o-accent-075 | o-text-accent-075 | Sample Text |
| 085 | --o-accent-085 | o-text-accent-085 | Sample Text |
| 100 | --o-accent-100 | o-text-accent-100 | Sample Text |
| 200 | --o-accent-200 | o-text-accent-200 | Sample Text |
| 300 | --o-accent-300 | o-text-accent-300 | Sample Text |
| 400 | --o-accent-400 | o-text-accent-400 | Sample Text |
| 500 | --o-accent-500 | o-text-accent-500 | Sample Text |
| 600 | --o-accent-600 | o-text-accent-600 | Sample Text |
| 700 | --o-accent-700 | o-text-accent-700 | Sample Text |
| 800 | --o-accent-800 | o-text-accent-800 | Sample Text |
| 900 | --o-accent-900 | o-text-accent-900 | Sample Text |
| 1000 | --o-accent-1000 | o-text-accent-1000 | Sample Text |
Links
link Links| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-links-000 | o-text-links-000 | Sample Text |
| 015 | --o-links-015 | o-text-links-015 | Sample Text |
| 025 | --o-links-025 | o-text-links-025 | Sample Text |
| 050 | --o-links-050 | o-text-links-050 | Sample Text |
| 075 | --o-links-075 | o-text-links-075 | Sample Text |
| 085 | --o-links-085 | o-text-links-085 | Sample Text |
| 100 | --o-links-100 | o-text-links-100 | Sample Text |
| 200 | --o-links-200 | o-text-links-200 | Sample Text |
| 300 | --o-links-300 | o-text-links-300 | Sample Text |
| 400 | --o-links-400 | o-text-links-400 | Sample Text |
| 500 | --o-links-500 | o-text-links-500 | Sample Text |
| 600 | --o-links-600 | o-text-links-600 | Sample Text |
| 700 | --o-links-700 | o-text-links-700 | Sample Text |
| 800 | --o-links-800 | o-text-links-800 | Sample Text |
| 900 | --o-links-900 | o-text-links-900 | Sample Text |
| 1000 | --o-links-1000 | o-text-links-1000 | Sample Text |
Visited
link Visited| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-visited-000 | o-text-visited-000 | Sample Text |
| 015 | --o-visited-015 | o-text-visited-015 | Sample Text |
| 025 | --o-visited-025 | o-text-visited-025 | Sample Text |
| 050 | --o-visited-050 | o-text-visited-050 | Sample Text |
| 075 | --o-visited-075 | o-text-visited-075 | Sample Text |
| 085 | --o-visited-085 | o-text-visited-085 | Sample Text |
| 100 | --o-visited-100 | o-text-visited-100 | Sample Text |
| 200 | --o-visited-200 | o-text-visited-200 | Sample Text |
| 300 | --o-visited-300 | o-text-visited-300 | Sample Text |
| 400 | --o-visited-400 | o-text-visited-400 | Sample Text |
| 500 | --o-visited-500 | o-text-visited-500 | Sample Text |
| 600 | --o-visited-600 | o-text-visited-600 | Sample Text |
| 700 | --o-visited-700 | o-text-visited-700 | Sample Text |
| 800 | --o-visited-800 | o-text-visited-800 | Sample Text |
| 900 | --o-visited-900 | o-text-visited-900 | Sample Text |
| 1000 | --o-visited-1000 | o-text-visited-1000 | Sample Text |
Mole
link Mole| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-mole-000 | o-text-mole-000 | Sample Text |
| 015 | --o-mole-015 | o-text-mole-015 | Sample Text |
| 025 | --o-mole-025 | o-text-mole-025 | Sample Text |
| 050 | --o-mole-050 | o-text-mole-050 | Sample Text |
| 075 | --o-mole-075 | o-text-mole-075 | Sample Text |
| 085 | --o-mole-085 | o-text-mole-085 | Sample Text |
| 100 | --o-mole-100 | o-text-mole-100 | Sample Text |
| 200 | --o-mole-200 | o-text-mole-200 | Sample Text |
| 300 | --o-mole-300 | o-text-mole-300 | Sample Text |
| 400 | --o-mole-400 | o-text-mole-400 | Sample Text |
| 500 | --o-mole-500 | o-text-mole-500 | Sample Text |
| 600 | --o-mole-600 | o-text-mole-600 | Sample Text |
| 700 | --o-mole-700 | o-text-mole-700 | Sample Text |
| 800 | --o-mole-800 | o-text-mole-800 | Sample Text |
| 900 | --o-mole-900 | o-text-mole-900 | Sample Text |
| 1000 | --o-mole-1000 | o-text-mole-1000 | Sample Text |
Lead
link Lead| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-lead-000 | o-text-lead-000 | Sample Text |
| 015 | --o-lead-015 | o-text-lead-015 | Sample Text |
| 025 | --o-lead-025 | o-text-lead-025 | Sample Text |
| 050 | --o-lead-050 | o-text-lead-050 | Sample Text |
| 075 | --o-lead-075 | o-text-lead-075 | Sample Text |
| 085 | --o-lead-085 | o-text-lead-085 | Sample Text |
| 100 | --o-lead-100 | o-text-lead-100 | Sample Text |
| 200 | --o-lead-200 | o-text-lead-200 | Sample Text |
| 300 | --o-lead-300 | o-text-lead-300 | Sample Text |
| 400 | --o-lead-400 | o-text-lead-400 | Sample Text |
| 500 | --o-lead-500 | o-text-lead-500 | Sample Text |
| 600 | --o-lead-600 | o-text-lead-600 | Sample Text |
| 700 | --o-lead-700 | o-text-lead-700 | Sample Text |
| 800 | --o-lead-800 | o-text-lead-800 | Sample Text |
| 900 | --o-lead-900 | o-text-lead-900 | Sample Text |
| 1000 | --o-lead-1000 | o-text-lead-1000 | Sample Text |
Pipe
link Pipe| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-pipe-000 | o-text-pipe-000 | Sample Text |
| 015 | --o-pipe-015 | o-text-pipe-015 | Sample Text |
| 025 | --o-pipe-025 | o-text-pipe-025 | Sample Text |
| 050 | --o-pipe-050 | o-text-pipe-050 | Sample Text |
| 075 | --o-pipe-075 | o-text-pipe-075 | Sample Text |
| 085 | --o-pipe-085 | o-text-pipe-085 | Sample Text |
| 100 | --o-pipe-100 | o-text-pipe-100 | Sample Text |
| 200 | --o-pipe-200 | o-text-pipe-200 | Sample Text |
| 300 | --o-pipe-300 | o-text-pipe-300 | Sample Text |
| 400 | --o-pipe-400 | o-text-pipe-400 | Sample Text |
| 500 | --o-pipe-500 | o-text-pipe-500 | Sample Text |
| 600 | --o-pipe-600 | o-text-pipe-600 | Sample Text |
| 700 | --o-pipe-700 | o-text-pipe-700 | Sample Text |
| 800 | --o-pipe-800 | o-text-pipe-800 | Sample Text |
| 900 | --o-pipe-900 | o-text-pipe-900 | Sample Text |
| 1000 | --o-pipe-1000 | o-text-pipe-1000 | Sample Text |
Denim
link Denim| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-denim-000 | o-text-denim-000 | Sample Text |
| 015 | --o-denim-015 | o-text-denim-015 | Sample Text |
| 025 | --o-denim-025 | o-text-denim-025 | Sample Text |
| 050 | --o-denim-050 | o-text-denim-050 | Sample Text |
| 075 | --o-denim-075 | o-text-denim-075 | Sample Text |
| 085 | --o-denim-085 | o-text-denim-085 | Sample Text |
| 100 | --o-denim-100 | o-text-denim-100 | Sample Text |
| 200 | --o-denim-200 | o-text-denim-200 | Sample Text |
| 300 | --o-denim-300 | o-text-denim-300 | Sample Text |
| 400 | --o-denim-400 | o-text-denim-400 | Sample Text |
| 500 | --o-denim-500 | o-text-denim-500 | Sample Text |
| 600 | --o-denim-600 | o-text-denim-600 | Sample Text |
| 700 | --o-denim-700 | o-text-denim-700 | Sample Text |
| 800 | --o-denim-800 | o-text-denim-800 | Sample Text |
| 900 | --o-denim-900 | o-text-denim-900 | Sample Text |
| 1000 | --o-denim-1000 | o-text-denim-1000 | Sample Text |
Grey
link Grey| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-grey-000 | o-text-grey-000 | Sample Text |
| 015 | --o-grey-015 | o-text-grey-015 | Sample Text |
| 025 | --o-grey-025 | o-text-grey-025 | Sample Text |
| 050 | --o-grey-050 | o-text-grey-050 | Sample Text |
| 075 | --o-grey-075 | o-text-grey-075 | Sample Text |
| 085 | --o-grey-085 | o-text-grey-085 | Sample Text |
| 100 | --o-grey-100 | o-text-grey-100 | Sample Text |
| 200 | --o-grey-200 | o-text-grey-200 | Sample Text |
| 300 | --o-grey-300 | o-text-grey-300 | Sample Text |
| 400 | --o-grey-400 | o-text-grey-400 | Sample Text |
| 500 | --o-grey-500 | o-text-grey-500 | Sample Text |
| 600 | --o-grey-600 | o-text-grey-600 | Sample Text |
| 700 | --o-grey-700 | o-text-grey-700 | Sample Text |
| 800 | --o-grey-800 | o-text-grey-800 | Sample Text |
| 900 | --o-grey-900 | o-text-grey-900 | Sample Text |
| 1000 | --o-grey-1000 | o-text-grey-1000 | Sample Text |
Slate
link Slate| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-slate-000 | o-text-slate-000 | Sample Text |
| 015 | --o-slate-015 | o-text-slate-015 | Sample Text |
| 025 | --o-slate-025 | o-text-slate-025 | Sample Text |
| 050 | --o-slate-050 | o-text-slate-050 | Sample Text |
| 075 | --o-slate-075 | o-text-slate-075 | Sample Text |
| 085 | --o-slate-085 | o-text-slate-085 | Sample Text |
| 100 | --o-slate-100 | o-text-slate-100 | Sample Text |
| 200 | --o-slate-200 | o-text-slate-200 | Sample Text |
| 300 | --o-slate-300 | o-text-slate-300 | Sample Text |
| 400 | --o-slate-400 | o-text-slate-400 | Sample Text |
| 500 | --o-slate-500 | o-text-slate-500 | Sample Text |
| 600 | --o-slate-600 | o-text-slate-600 | Sample Text |
| 700 | --o-slate-700 | o-text-slate-700 | Sample Text |
| 800 | --o-slate-800 | o-text-slate-800 | Sample Text |
| 900 | --o-slate-900 | o-text-slate-900 | Sample Text |
| 1000 | --o-slate-1000 | o-text-slate-1000 | Sample Text |
Zinc
link Zinc| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-zinc-000 | o-text-zinc-000 | Sample Text |
| 015 | --o-zinc-015 | o-text-zinc-015 | Sample Text |
| 025 | --o-zinc-025 | o-text-zinc-025 | Sample Text |
| 050 | --o-zinc-050 | o-text-zinc-050 | Sample Text |
| 075 | --o-zinc-075 | o-text-zinc-075 | Sample Text |
| 085 | --o-zinc-085 | o-text-zinc-085 | Sample Text |
| 100 | --o-zinc-100 | o-text-zinc-100 | Sample Text |
| 200 | --o-zinc-200 | o-text-zinc-200 | Sample Text |
| 300 | --o-zinc-300 | o-text-zinc-300 | Sample Text |
| 400 | --o-zinc-400 | o-text-zinc-400 | Sample Text |
| 500 | --o-zinc-500 | o-text-zinc-500 | Sample Text |
| 600 | --o-zinc-600 | o-text-zinc-600 | Sample Text |
| 700 | --o-zinc-700 | o-text-zinc-700 | Sample Text |
| 800 | --o-zinc-800 | o-text-zinc-800 | Sample Text |
| 900 | --o-zinc-900 | o-text-zinc-900 | Sample Text |
| 1000 | --o-zinc-1000 | o-text-zinc-1000 | Sample Text |
Steel
link Steel| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-steel-000 | o-text-steel-000 | Sample Text |
| 015 | --o-steel-015 | o-text-steel-015 | Sample Text |
| 025 | --o-steel-025 | o-text-steel-025 | Sample Text |
| 050 | --o-steel-050 | o-text-steel-050 | Sample Text |
| 075 | --o-steel-075 | o-text-steel-075 | Sample Text |
| 085 | --o-steel-085 | o-text-steel-085 | Sample Text |
| 100 | --o-steel-100 | o-text-steel-100 | Sample Text |
| 200 | --o-steel-200 | o-text-steel-200 | Sample Text |
| 300 | --o-steel-300 | o-text-steel-300 | Sample Text |
| 400 | --o-steel-400 | o-text-steel-400 | Sample Text |
| 500 | --o-steel-500 | o-text-steel-500 | Sample Text |
| 600 | --o-steel-600 | o-text-steel-600 | Sample Text |
| 700 | --o-steel-700 | o-text-steel-700 | Sample Text |
| 800 | --o-steel-800 | o-text-steel-800 | Sample Text |
| 900 | --o-steel-900 | o-text-steel-900 | Sample Text |
| 1000 | --o-steel-1000 | o-text-steel-1000 | Sample Text |
Iron
link Iron| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-iron-000 | o-text-iron-000 | Sample Text |
| 015 | --o-iron-015 | o-text-iron-015 | Sample Text |
| 025 | --o-iron-025 | o-text-iron-025 | Sample Text |
| 050 | --o-iron-050 | o-text-iron-050 | Sample Text |
| 075 | --o-iron-075 | o-text-iron-075 | Sample Text |
| 085 | --o-iron-085 | o-text-iron-085 | Sample Text |
| 100 | --o-iron-100 | o-text-iron-100 | Sample Text |
| 200 | --o-iron-200 | o-text-iron-200 | Sample Text |
| 300 | --o-iron-300 | o-text-iron-300 | Sample Text |
| 400 | --o-iron-400 | o-text-iron-400 | Sample Text |
| 500 | --o-iron-500 | o-text-iron-500 | Sample Text |
| 600 | --o-iron-600 | o-text-iron-600 | Sample Text |
| 700 | --o-iron-700 | o-text-iron-700 | Sample Text |
| 800 | --o-iron-800 | o-text-iron-800 | Sample Text |
| 900 | --o-iron-900 | o-text-iron-900 | Sample Text |
| 1000 | --o-iron-1000 | o-text-iron-1000 | Sample Text |
Red
link Red| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-red-000 | o-text-red-000 | Sample Text |
| 015 | --o-red-015 | o-text-red-015 | Sample Text |
| 025 | --o-red-025 | o-text-red-025 | Sample Text |
| 050 | --o-red-050 | o-text-red-050 | Sample Text |
| 075 | --o-red-075 | o-text-red-075 | Sample Text |
| 085 | --o-red-085 | o-text-red-085 | Sample Text |
| 100 | --o-red-100 | o-text-red-100 | Sample Text |
| 200 | --o-red-200 | o-text-red-200 | Sample Text |
| 300 | --o-red-300 | o-text-red-300 | Sample Text |
| 400 | --o-red-400 | o-text-red-400 | Sample Text |
| 500 | --o-red-500 | o-text-red-500 | Sample Text |
| 600 | --o-red-600 | o-text-red-600 | Sample Text |
| 700 | --o-red-700 | o-text-red-700 | Sample Text |
| 800 | --o-red-800 | o-text-red-800 | Sample Text |
| 900 | --o-red-900 | o-text-red-900 | Sample Text |
| 1000 | --o-red-1000 | o-text-red-1000 | Sample Text |
Orange
link Orange| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-orange-000 | o-text-orange-000 | Sample Text |
| 015 | --o-orange-015 | o-text-orange-015 | Sample Text |
| 025 | --o-orange-025 | o-text-orange-025 | Sample Text |
| 050 | --o-orange-050 | o-text-orange-050 | Sample Text |
| 075 | --o-orange-075 | o-text-orange-075 | Sample Text |
| 085 | --o-orange-085 | o-text-orange-085 | Sample Text |
| 100 | --o-orange-100 | o-text-orange-100 | Sample Text |
| 200 | --o-orange-200 | o-text-orange-200 | Sample Text |
| 300 | --o-orange-300 | o-text-orange-300 | Sample Text |
| 400 | --o-orange-400 | o-text-orange-400 | Sample Text |
| 500 | --o-orange-500 | o-text-orange-500 | Sample Text |
| 600 | --o-orange-600 | o-text-orange-600 | Sample Text |
| 700 | --o-orange-700 | o-text-orange-700 | Sample Text |
| 800 | --o-orange-800 | o-text-orange-800 | Sample Text |
| 900 | --o-orange-900 | o-text-orange-900 | Sample Text |
| 1000 | --o-orange-1000 | o-text-orange-1000 | Sample Text |
Ochre
link Ochre| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-ochre-000 | o-text-ochre-000 | Sample Text |
| 015 | --o-ochre-015 | o-text-ochre-015 | Sample Text |
| 025 | --o-ochre-025 | o-text-ochre-025 | Sample Text |
| 050 | --o-ochre-050 | o-text-ochre-050 | Sample Text |
| 075 | --o-ochre-075 | o-text-ochre-075 | Sample Text |
| 085 | --o-ochre-085 | o-text-ochre-085 | Sample Text |
| 100 | --o-ochre-100 | o-text-ochre-100 | Sample Text |
| 200 | --o-ochre-200 | o-text-ochre-200 | Sample Text |
| 300 | --o-ochre-300 | o-text-ochre-300 | Sample Text |
| 400 | --o-ochre-400 | o-text-ochre-400 | Sample Text |
| 500 | --o-ochre-500 | o-text-ochre-500 | Sample Text |
| 600 | --o-ochre-600 | o-text-ochre-600 | Sample Text |
| 700 | --o-ochre-700 | o-text-ochre-700 | Sample Text |
| 800 | --o-ochre-800 | o-text-ochre-800 | Sample Text |
| 900 | --o-ochre-900 | o-text-ochre-900 | Sample Text |
| 1000 | --o-ochre-1000 | o-text-ochre-1000 | Sample Text |
Gold
link Gold| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-gold-000 | o-text-gold-000 | Sample Text |
| 015 | --o-gold-015 | o-text-gold-015 | Sample Text |
| 025 | --o-gold-025 | o-text-gold-025 | Sample Text |
| 050 | --o-gold-050 | o-text-gold-050 | Sample Text |
| 075 | --o-gold-075 | o-text-gold-075 | Sample Text |
| 085 | --o-gold-085 | o-text-gold-085 | Sample Text |
| 100 | --o-gold-100 | o-text-gold-100 | Sample Text |
| 200 | --o-gold-200 | o-text-gold-200 | Sample Text |
| 300 | --o-gold-300 | o-text-gold-300 | Sample Text |
| 400 | --o-gold-400 | o-text-gold-400 | Sample Text |
| 500 | --o-gold-500 | o-text-gold-500 | Sample Text |
| 600 | --o-gold-600 | o-text-gold-600 | Sample Text |
| 700 | --o-gold-700 | o-text-gold-700 | Sample Text |
| 800 | --o-gold-800 | o-text-gold-800 | Sample Text |
| 900 | --o-gold-900 | o-text-gold-900 | Sample Text |
| 1000 | --o-gold-1000 | o-text-gold-1000 | Sample Text |
Yellow
link Yellow| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-yellow-000 | o-text-yellow-000 | Sample Text |
| 015 | --o-yellow-015 | o-text-yellow-015 | Sample Text |
| 025 | --o-yellow-025 | o-text-yellow-025 | Sample Text |
| 050 | --o-yellow-050 | o-text-yellow-050 | Sample Text |
| 075 | --o-yellow-075 | o-text-yellow-075 | Sample Text |
| 085 | --o-yellow-085 | o-text-yellow-085 | Sample Text |
| 100 | --o-yellow-100 | o-text-yellow-100 | Sample Text |
| 200 | --o-yellow-200 | o-text-yellow-200 | Sample Text |
| 300 | --o-yellow-300 | o-text-yellow-300 | Sample Text |
| 400 | --o-yellow-400 | o-text-yellow-400 | Sample Text |
| 500 | --o-yellow-500 | o-text-yellow-500 | Sample Text |
| 600 | --o-yellow-600 | o-text-yellow-600 | Sample Text |
| 700 | --o-yellow-700 | o-text-yellow-700 | Sample Text |
| 800 | --o-yellow-800 | o-text-yellow-800 | Sample Text |
| 900 | --o-yellow-900 | o-text-yellow-900 | Sample Text |
| 1000 | --o-yellow-1000 | o-text-yellow-1000 | Sample Text |
Lime
link Lime| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-lime-000 | o-text-lime-000 | Sample Text |
| 015 | --o-lime-015 | o-text-lime-015 | Sample Text |
| 025 | --o-lime-025 | o-text-lime-025 | Sample Text |
| 050 | --o-lime-050 | o-text-lime-050 | Sample Text |
| 075 | --o-lime-075 | o-text-lime-075 | Sample Text |
| 085 | --o-lime-085 | o-text-lime-085 | Sample Text |
| 100 | --o-lime-100 | o-text-lime-100 | Sample Text |
| 200 | --o-lime-200 | o-text-lime-200 | Sample Text |
| 300 | --o-lime-300 | o-text-lime-300 | Sample Text |
| 400 | --o-lime-400 | o-text-lime-400 | Sample Text |
| 500 | --o-lime-500 | o-text-lime-500 | Sample Text |
| 600 | --o-lime-600 | o-text-lime-600 | Sample Text |
| 700 | --o-lime-700 | o-text-lime-700 | Sample Text |
| 800 | --o-lime-800 | o-text-lime-800 | Sample Text |
| 900 | --o-lime-900 | o-text-lime-900 | Sample Text |
| 1000 | --o-lime-1000 | o-text-lime-1000 | Sample Text |
Green
link Green| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-green-000 | o-text-green-000 | Sample Text |
| 015 | --o-green-015 | o-text-green-015 | Sample Text |
| 025 | --o-green-025 | o-text-green-025 | Sample Text |
| 050 | --o-green-050 | o-text-green-050 | Sample Text |
| 075 | --o-green-075 | o-text-green-075 | Sample Text |
| 085 | --o-green-085 | o-text-green-085 | Sample Text |
| 100 | --o-green-100 | o-text-green-100 | Sample Text |
| 200 | --o-green-200 | o-text-green-200 | Sample Text |
| 300 | --o-green-300 | o-text-green-300 | Sample Text |
| 400 | --o-green-400 | o-text-green-400 | Sample Text |
| 500 | --o-green-500 | o-text-green-500 | Sample Text |
| 600 | --o-green-600 | o-text-green-600 | Sample Text |
| 700 | --o-green-700 | o-text-green-700 | Sample Text |
| 800 | --o-green-800 | o-text-green-800 | Sample Text |
| 900 | --o-green-900 | o-text-green-900 | Sample Text |
| 1000 | --o-green-1000 | o-text-green-1000 | Sample Text |
Jade
link Jade| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-jade-000 | o-text-jade-000 | Sample Text |
| 015 | --o-jade-015 | o-text-jade-015 | Sample Text |
| 025 | --o-jade-025 | o-text-jade-025 | Sample Text |
| 050 | --o-jade-050 | o-text-jade-050 | Sample Text |
| 075 | --o-jade-075 | o-text-jade-075 | Sample Text |
| 085 | --o-jade-085 | o-text-jade-085 | Sample Text |
| 100 | --o-jade-100 | o-text-jade-100 | Sample Text |
| 200 | --o-jade-200 | o-text-jade-200 | Sample Text |
| 300 | --o-jade-300 | o-text-jade-300 | Sample Text |
| 400 | --o-jade-400 | o-text-jade-400 | Sample Text |
| 500 | --o-jade-500 | o-text-jade-500 | Sample Text |
| 600 | --o-jade-600 | o-text-jade-600 | Sample Text |
| 700 | --o-jade-700 | o-text-jade-700 | Sample Text |
| 800 | --o-jade-800 | o-text-jade-800 | Sample Text |
| 900 | --o-jade-900 | o-text-jade-900 | Sample Text |
| 1000 | --o-jade-1000 | o-text-jade-1000 | Sample Text |
Teal
link Teal| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-teal-000 | o-text-teal-000 | Sample Text |
| 015 | --o-teal-015 | o-text-teal-015 | Sample Text |
| 025 | --o-teal-025 | o-text-teal-025 | Sample Text |
| 050 | --o-teal-050 | o-text-teal-050 | Sample Text |
| 075 | --o-teal-075 | o-text-teal-075 | Sample Text |
| 085 | --o-teal-085 | o-text-teal-085 | Sample Text |
| 100 | --o-teal-100 | o-text-teal-100 | Sample Text |
| 200 | --o-teal-200 | o-text-teal-200 | Sample Text |
| 300 | --o-teal-300 | o-text-teal-300 | Sample Text |
| 400 | --o-teal-400 | o-text-teal-400 | Sample Text |
| 500 | --o-teal-500 | o-text-teal-500 | Sample Text |
| 600 | --o-teal-600 | o-text-teal-600 | Sample Text |
| 700 | --o-teal-700 | o-text-teal-700 | Sample Text |
| 800 | --o-teal-800 | o-text-teal-800 | Sample Text |
| 900 | --o-teal-900 | o-text-teal-900 | Sample Text |
| 1000 | --o-teal-1000 | o-text-teal-1000 | Sample Text |
Cyan
link Cyan| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-cyan-000 | o-text-cyan-000 | Sample Text |
| 015 | --o-cyan-015 | o-text-cyan-015 | Sample Text |
| 025 | --o-cyan-025 | o-text-cyan-025 | Sample Text |
| 050 | --o-cyan-050 | o-text-cyan-050 | Sample Text |
| 075 | --o-cyan-075 | o-text-cyan-075 | Sample Text |
| 085 | --o-cyan-085 | o-text-cyan-085 | Sample Text |
| 100 | --o-cyan-100 | o-text-cyan-100 | Sample Text |
| 200 | --o-cyan-200 | o-text-cyan-200 | Sample Text |
| 300 | --o-cyan-300 | o-text-cyan-300 | Sample Text |
| 400 | --o-cyan-400 | o-text-cyan-400 | Sample Text |
| 500 | --o-cyan-500 | o-text-cyan-500 | Sample Text |
| 600 | --o-cyan-600 | o-text-cyan-600 | Sample Text |
| 700 | --o-cyan-700 | o-text-cyan-700 | Sample Text |
| 800 | --o-cyan-800 | o-text-cyan-800 | Sample Text |
| 900 | --o-cyan-900 | o-text-cyan-900 | Sample Text |
| 1000 | --o-cyan-1000 | o-text-cyan-1000 | Sample Text |
Sky
link Sky| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-sky-000 | o-text-sky-000 | Sample Text |
| 015 | --o-sky-015 | o-text-sky-015 | Sample Text |
| 025 | --o-sky-025 | o-text-sky-025 | Sample Text |
| 050 | --o-sky-050 | o-text-sky-050 | Sample Text |
| 075 | --o-sky-075 | o-text-sky-075 | Sample Text |
| 085 | --o-sky-085 | o-text-sky-085 | Sample Text |
| 100 | --o-sky-100 | o-text-sky-100 | Sample Text |
| 200 | --o-sky-200 | o-text-sky-200 | Sample Text |
| 300 | --o-sky-300 | o-text-sky-300 | Sample Text |
| 400 | --o-sky-400 | o-text-sky-400 | Sample Text |
| 500 | --o-sky-500 | o-text-sky-500 | Sample Text |
| 600 | --o-sky-600 | o-text-sky-600 | Sample Text |
| 700 | --o-sky-700 | o-text-sky-700 | Sample Text |
| 800 | --o-sky-800 | o-text-sky-800 | Sample Text |
| 900 | --o-sky-900 | o-text-sky-900 | Sample Text |
| 1000 | --o-sky-1000 | o-text-sky-1000 | Sample Text |
Blue
link Blue| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-blue-000 | o-text-blue-000 | Sample Text |
| 015 | --o-blue-015 | o-text-blue-015 | Sample Text |
| 025 | --o-blue-025 | o-text-blue-025 | Sample Text |
| 050 | --o-blue-050 | o-text-blue-050 | Sample Text |
| 075 | --o-blue-075 | o-text-blue-075 | Sample Text |
| 085 | --o-blue-085 | o-text-blue-085 | Sample Text |
| 100 | --o-blue-100 | o-text-blue-100 | Sample Text |
| 200 | --o-blue-200 | o-text-blue-200 | Sample Text |
| 300 | --o-blue-300 | o-text-blue-300 | Sample Text |
| 400 | --o-blue-400 | o-text-blue-400 | Sample Text |
| 500 | --o-blue-500 | o-text-blue-500 | Sample Text |
| 600 | --o-blue-600 | o-text-blue-600 | Sample Text |
| 700 | --o-blue-700 | o-text-blue-700 | Sample Text |
| 800 | --o-blue-800 | o-text-blue-800 | Sample Text |
| 900 | --o-blue-900 | o-text-blue-900 | Sample Text |
| 1000 | --o-blue-1000 | o-text-blue-1000 | Sample Text |
Indigo
link Indigo| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-indigo-000 | o-text-indigo-000 | Sample Text |
| 015 | --o-indigo-015 | o-text-indigo-015 | Sample Text |
| 025 | --o-indigo-025 | o-text-indigo-025 | Sample Text |
| 050 | --o-indigo-050 | o-text-indigo-050 | Sample Text |
| 075 | --o-indigo-075 | o-text-indigo-075 | Sample Text |
| 085 | --o-indigo-085 | o-text-indigo-085 | Sample Text |
| 100 | --o-indigo-100 | o-text-indigo-100 | Sample Text |
| 200 | --o-indigo-200 | o-text-indigo-200 | Sample Text |
| 300 | --o-indigo-300 | o-text-indigo-300 | Sample Text |
| 400 | --o-indigo-400 | o-text-indigo-400 | Sample Text |
| 500 | --o-indigo-500 | o-text-indigo-500 | Sample Text |
| 600 | --o-indigo-600 | o-text-indigo-600 | Sample Text |
| 700 | --o-indigo-700 | o-text-indigo-700 | Sample Text |
| 800 | --o-indigo-800 | o-text-indigo-800 | Sample Text |
| 900 | --o-indigo-900 | o-text-indigo-900 | Sample Text |
| 1000 | --o-indigo-1000 | o-text-indigo-1000 | Sample Text |
Violet
link Violet| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-violet-000 | o-text-violet-000 | Sample Text |
| 015 | --o-violet-015 | o-text-violet-015 | Sample Text |
| 025 | --o-violet-025 | o-text-violet-025 | Sample Text |
| 050 | --o-violet-050 | o-text-violet-050 | Sample Text |
| 075 | --o-violet-075 | o-text-violet-075 | Sample Text |
| 085 | --o-violet-085 | o-text-violet-085 | Sample Text |
| 100 | --o-violet-100 | o-text-violet-100 | Sample Text |
| 200 | --o-violet-200 | o-text-violet-200 | Sample Text |
| 300 | --o-violet-300 | o-text-violet-300 | Sample Text |
| 400 | --o-violet-400 | o-text-violet-400 | Sample Text |
| 500 | --o-violet-500 | o-text-violet-500 | Sample Text |
| 600 | --o-violet-600 | o-text-violet-600 | Sample Text |
| 700 | --o-violet-700 | o-text-violet-700 | Sample Text |
| 800 | --o-violet-800 | o-text-violet-800 | Sample Text |
| 900 | --o-violet-900 | o-text-violet-900 | Sample Text |
| 1000 | --o-violet-1000 | o-text-violet-1000 | Sample Text |
Purple
link Purple| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-purple-000 | o-text-purple-000 | Sample Text |
| 015 | --o-purple-015 | o-text-purple-015 | Sample Text |
| 025 | --o-purple-025 | o-text-purple-025 | Sample Text |
| 050 | --o-purple-050 | o-text-purple-050 | Sample Text |
| 075 | --o-purple-075 | o-text-purple-075 | Sample Text |
| 085 | --o-purple-085 | o-text-purple-085 | Sample Text |
| 100 | --o-purple-100 | o-text-purple-100 | Sample Text |
| 200 | --o-purple-200 | o-text-purple-200 | Sample Text |
| 300 | --o-purple-300 | o-text-purple-300 | Sample Text |
| 400 | --o-purple-400 | o-text-purple-400 | Sample Text |
| 500 | --o-purple-500 | o-text-purple-500 | Sample Text |
| 600 | --o-purple-600 | o-text-purple-600 | Sample Text |
| 700 | --o-purple-700 | o-text-purple-700 | Sample Text |
| 800 | --o-purple-800 | o-text-purple-800 | Sample Text |
| 900 | --o-purple-900 | o-text-purple-900 | Sample Text |
| 1000 | --o-purple-1000 | o-text-purple-1000 | Sample Text |
Grape
link Grape| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-grape-000 | o-text-grape-000 | Sample Text |
| 015 | --o-grape-015 | o-text-grape-015 | Sample Text |
| 025 | --o-grape-025 | o-text-grape-025 | Sample Text |
| 050 | --o-grape-050 | o-text-grape-050 | Sample Text |
| 075 | --o-grape-075 | o-text-grape-075 | Sample Text |
| 085 | --o-grape-085 | o-text-grape-085 | Sample Text |
| 100 | --o-grape-100 | o-text-grape-100 | Sample Text |
| 200 | --o-grape-200 | o-text-grape-200 | Sample Text |
| 300 | --o-grape-300 | o-text-grape-300 | Sample Text |
| 400 | --o-grape-400 | o-text-grape-400 | Sample Text |
| 500 | --o-grape-500 | o-text-grape-500 | Sample Text |
| 600 | --o-grape-600 | o-text-grape-600 | Sample Text |
| 700 | --o-grape-700 | o-text-grape-700 | Sample Text |
| 800 | --o-grape-800 | o-text-grape-800 | Sample Text |
| 900 | --o-grape-900 | o-text-grape-900 | Sample Text |
| 1000 | --o-grape-1000 | o-text-grape-1000 | Sample Text |
Pink
link Pink| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-pink-000 | o-text-pink-000 | Sample Text |
| 015 | --o-pink-015 | o-text-pink-015 | Sample Text |
| 025 | --o-pink-025 | o-text-pink-025 | Sample Text |
| 050 | --o-pink-050 | o-text-pink-050 | Sample Text |
| 075 | --o-pink-075 | o-text-pink-075 | Sample Text |
| 085 | --o-pink-085 | o-text-pink-085 | Sample Text |
| 100 | --o-pink-100 | o-text-pink-100 | Sample Text |
| 200 | --o-pink-200 | o-text-pink-200 | Sample Text |
| 300 | --o-pink-300 | o-text-pink-300 | Sample Text |
| 400 | --o-pink-400 | o-text-pink-400 | Sample Text |
| 500 | --o-pink-500 | o-text-pink-500 | Sample Text |
| 600 | --o-pink-600 | o-text-pink-600 | Sample Text |
| 700 | --o-pink-700 | o-text-pink-700 | Sample Text |
| 800 | --o-pink-800 | o-text-pink-800 | Sample Text |
| 900 | --o-pink-900 | o-text-pink-900 | Sample Text |
| 1000 | --o-pink-1000 | o-text-pink-1000 | Sample Text |
Rose
link Rose| Shade | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 000 | --o-rose-000 | o-text-rose-000 | Sample Text |
| 015 | --o-rose-015 | o-text-rose-015 | Sample Text |
| 025 | --o-rose-025 | o-text-rose-025 | Sample Text |
| 050 | --o-rose-050 | o-text-rose-050 | Sample Text |
| 075 | --o-rose-075 | o-text-rose-075 | Sample Text |
| 085 | --o-rose-085 | o-text-rose-085 | Sample Text |
| 100 | --o-rose-100 | o-text-rose-100 | Sample Text |
| 200 | --o-rose-200 | o-text-rose-200 | Sample Text |
| 300 | --o-rose-300 | o-text-rose-300 | Sample Text |
| 400 | --o-rose-400 | o-text-rose-400 | Sample Text |
| 500 | --o-rose-500 | o-text-rose-500 | Sample Text |
| 600 | --o-rose-600 | o-text-rose-600 | Sample Text |
| 700 | --o-rose-700 | o-text-rose-700 | Sample Text |
| 800 | --o-rose-800 | o-text-rose-800 | Sample Text |
| 900 | --o-rose-900 | o-text-rose-900 | Sample Text |
| 1000 | --o-rose-1000 | o-text-rose-1000 | Sample Text |