This page lists all SVG Fill Colors CSS custom properties and utility classes available in the OxyProps Framework
| Description | Utility Class |
|---|
| No fill (transparent). | o-nofill |
| Description | CSS Variable | Utility Class | Sample |
|---|
| Brand responsive color. | --o-brand | o-fill-brand | |
| Accent responsive color. | --o-accent | o-fill-accent | |
| Links responsive color. | --o-links | o-fill-links | |
| Visited responsive color. | --o-visited | o-fill-visited | |
| Description | CSS Variable | Utility Class | Sample |
|---|
| Text 1 responsive color. | --o-text-1 | o-fill-text-1 | |
| Text 2 responsive color. | --o-text-2 | o-fill-text-2 | |
| Surface 1 responsive color. | --o-surface-1 | o-fill-surface-1 | |
| Surface 2 responsive color. | --o-surface-2 | o-fill-surface-2 | |
| Surface 3 responsive color. | --o-surface-3 | o-fill-surface-3 | |
| Surface 4 responsive color. | --o-surface-4 | o-fill-surface-4 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-canvas-000 | o-fill-canvas-000 | |
| 015 | --o-canvas-015 | o-fill-canvas-015 | |
| 025 | --o-canvas-025 | o-fill-canvas-025 | |
| 050 | --o-canvas-050 | o-fill-canvas-050 | |
| 075 | --o-canvas-075 | o-fill-canvas-075 | |
| 085 | --o-canvas-085 | o-fill-canvas-085 | |
| 100 | --o-canvas-100 | o-fill-canvas-100 | |
| 200 | --o-canvas-200 | o-fill-canvas-200 | |
| 300 | --o-canvas-300 | o-fill-canvas-300 | |
| 400 | --o-canvas-400 | o-fill-canvas-400 | |
| 500 | --o-canvas-500 | o-fill-canvas-500 | |
| 600 | --o-canvas-600 | o-fill-canvas-600 | |
| 700 | --o-canvas-700 | o-fill-canvas-700 | |
| 800 | --o-canvas-800 | o-fill-canvas-800 | |
| 900 | --o-canvas-900 | o-fill-canvas-900 | |
| 1000 | --o-canvas-1000 | o-fill-canvas-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-brand-000 | o-fill-brand-000 | |
| 015 | --o-brand-015 | o-fill-brand-015 | |
| 025 | --o-brand-025 | o-fill-brand-025 | |
| 050 | --o-brand-050 | o-fill-brand-050 | |
| 075 | --o-brand-075 | o-fill-brand-075 | |
| 085 | --o-brand-085 | o-fill-brand-085 | |
| 100 | --o-brand-100 | o-fill-brand-100 | |
| 200 | --o-brand-200 | o-fill-brand-200 | |
| 300 | --o-brand-300 | o-fill-brand-300 | |
| 400 | --o-brand-400 | o-fill-brand-400 | |
| 500 | --o-brand-500 | o-fill-brand-500 | |
| 600 | --o-brand-600 | o-fill-brand-600 | |
| 700 | --o-brand-700 | o-fill-brand-700 | |
| 800 | --o-brand-800 | o-fill-brand-800 | |
| 900 | --o-brand-900 | o-fill-brand-900 | |
| 1000 | --o-brand-1000 | o-fill-brand-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-accent-000 | o-fill-accent-000 | |
| 015 | --o-accent-015 | o-fill-accent-015 | |
| 025 | --o-accent-025 | o-fill-accent-025 | |
| 050 | --o-accent-050 | o-fill-accent-050 | |
| 075 | --o-accent-075 | o-fill-accent-075 | |
| 085 | --o-accent-085 | o-fill-accent-085 | |
| 100 | --o-accent-100 | o-fill-accent-100 | |
| 200 | --o-accent-200 | o-fill-accent-200 | |
| 300 | --o-accent-300 | o-fill-accent-300 | |
| 400 | --o-accent-400 | o-fill-accent-400 | |
| 500 | --o-accent-500 | o-fill-accent-500 | |
| 600 | --o-accent-600 | o-fill-accent-600 | |
| 700 | --o-accent-700 | o-fill-accent-700 | |
| 800 | --o-accent-800 | o-fill-accent-800 | |
| 900 | --o-accent-900 | o-fill-accent-900 | |
| 1000 | --o-accent-1000 | o-fill-accent-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-links-000 | o-fill-links-000 | |
| 015 | --o-links-015 | o-fill-links-015 | |
| 025 | --o-links-025 | o-fill-links-025 | |
| 050 | --o-links-050 | o-fill-links-050 | |
| 075 | --o-links-075 | o-fill-links-075 | |
| 085 | --o-links-085 | o-fill-links-085 | |
| 100 | --o-links-100 | o-fill-links-100 | |
| 200 | --o-links-200 | o-fill-links-200 | |
| 300 | --o-links-300 | o-fill-links-300 | |
| 400 | --o-links-400 | o-fill-links-400 | |
| 500 | --o-links-500 | o-fill-links-500 | |
| 600 | --o-links-600 | o-fill-links-600 | |
| 700 | --o-links-700 | o-fill-links-700 | |
| 800 | --o-links-800 | o-fill-links-800 | |
| 900 | --o-links-900 | o-fill-links-900 | |
| 1000 | --o-links-1000 | o-fill-links-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-visited-000 | o-fill-visited-000 | |
| 015 | --o-visited-015 | o-fill-visited-015 | |
| 025 | --o-visited-025 | o-fill-visited-025 | |
| 050 | --o-visited-050 | o-fill-visited-050 | |
| 075 | --o-visited-075 | o-fill-visited-075 | |
| 085 | --o-visited-085 | o-fill-visited-085 | |
| 100 | --o-visited-100 | o-fill-visited-100 | |
| 200 | --o-visited-200 | o-fill-visited-200 | |
| 300 | --o-visited-300 | o-fill-visited-300 | |
| 400 | --o-visited-400 | o-fill-visited-400 | |
| 500 | --o-visited-500 | o-fill-visited-500 | |
| 600 | --o-visited-600 | o-fill-visited-600 | |
| 700 | --o-visited-700 | o-fill-visited-700 | |
| 800 | --o-visited-800 | o-fill-visited-800 | |
| 900 | --o-visited-900 | o-fill-visited-900 | |
| 1000 | --o-visited-1000 | o-fill-visited-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-mole-000 | o-fill-mole-000 | |
| 015 | --o-mole-015 | o-fill-mole-015 | |
| 025 | --o-mole-025 | o-fill-mole-025 | |
| 050 | --o-mole-050 | o-fill-mole-050 | |
| 075 | --o-mole-075 | o-fill-mole-075 | |
| 085 | --o-mole-085 | o-fill-mole-085 | |
| 100 | --o-mole-100 | o-fill-mole-100 | |
| 200 | --o-mole-200 | o-fill-mole-200 | |
| 300 | --o-mole-300 | o-fill-mole-300 | |
| 400 | --o-mole-400 | o-fill-mole-400 | |
| 500 | --o-mole-500 | o-fill-mole-500 | |
| 600 | --o-mole-600 | o-fill-mole-600 | |
| 700 | --o-mole-700 | o-fill-mole-700 | |
| 800 | --o-mole-800 | o-fill-mole-800 | |
| 900 | --o-mole-900 | o-fill-mole-900 | |
| 1000 | --o-mole-1000 | o-fill-mole-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-lead-000 | o-fill-lead-000 | |
| 015 | --o-lead-015 | o-fill-lead-015 | |
| 025 | --o-lead-025 | o-fill-lead-025 | |
| 050 | --o-lead-050 | o-fill-lead-050 | |
| 075 | --o-lead-075 | o-fill-lead-075 | |
| 085 | --o-lead-085 | o-fill-lead-085 | |
| 100 | --o-lead-100 | o-fill-lead-100 | |
| 200 | --o-lead-200 | o-fill-lead-200 | |
| 300 | --o-lead-300 | o-fill-lead-300 | |
| 400 | --o-lead-400 | o-fill-lead-400 | |
| 500 | --o-lead-500 | o-fill-lead-500 | |
| 600 | --o-lead-600 | o-fill-lead-600 | |
| 700 | --o-lead-700 | o-fill-lead-700 | |
| 800 | --o-lead-800 | o-fill-lead-800 | |
| 900 | --o-lead-900 | o-fill-lead-900 | |
| 1000 | --o-lead-1000 | o-fill-lead-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-pipe-000 | o-fill-pipe-000 | |
| 015 | --o-pipe-015 | o-fill-pipe-015 | |
| 025 | --o-pipe-025 | o-fill-pipe-025 | |
| 050 | --o-pipe-050 | o-fill-pipe-050 | |
| 075 | --o-pipe-075 | o-fill-pipe-075 | |
| 085 | --o-pipe-085 | o-fill-pipe-085 | |
| 100 | --o-pipe-100 | o-fill-pipe-100 | |
| 200 | --o-pipe-200 | o-fill-pipe-200 | |
| 300 | --o-pipe-300 | o-fill-pipe-300 | |
| 400 | --o-pipe-400 | o-fill-pipe-400 | |
| 500 | --o-pipe-500 | o-fill-pipe-500 | |
| 600 | --o-pipe-600 | o-fill-pipe-600 | |
| 700 | --o-pipe-700 | o-fill-pipe-700 | |
| 800 | --o-pipe-800 | o-fill-pipe-800 | |
| 900 | --o-pipe-900 | o-fill-pipe-900 | |
| 1000 | --o-pipe-1000 | o-fill-pipe-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-denim-000 | o-fill-denim-000 | |
| 015 | --o-denim-015 | o-fill-denim-015 | |
| 025 | --o-denim-025 | o-fill-denim-025 | |
| 050 | --o-denim-050 | o-fill-denim-050 | |
| 075 | --o-denim-075 | o-fill-denim-075 | |
| 085 | --o-denim-085 | o-fill-denim-085 | |
| 100 | --o-denim-100 | o-fill-denim-100 | |
| 200 | --o-denim-200 | o-fill-denim-200 | |
| 300 | --o-denim-300 | o-fill-denim-300 | |
| 400 | --o-denim-400 | o-fill-denim-400 | |
| 500 | --o-denim-500 | o-fill-denim-500 | |
| 600 | --o-denim-600 | o-fill-denim-600 | |
| 700 | --o-denim-700 | o-fill-denim-700 | |
| 800 | --o-denim-800 | o-fill-denim-800 | |
| 900 | --o-denim-900 | o-fill-denim-900 | |
| 1000 | --o-denim-1000 | o-fill-denim-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-grey-000 | o-fill-grey-000 | |
| 015 | --o-grey-015 | o-fill-grey-015 | |
| 025 | --o-grey-025 | o-fill-grey-025 | |
| 050 | --o-grey-050 | o-fill-grey-050 | |
| 075 | --o-grey-075 | o-fill-grey-075 | |
| 085 | --o-grey-085 | o-fill-grey-085 | |
| 100 | --o-grey-100 | o-fill-grey-100 | |
| 200 | --o-grey-200 | o-fill-grey-200 | |
| 300 | --o-grey-300 | o-fill-grey-300 | |
| 400 | --o-grey-400 | o-fill-grey-400 | |
| 500 | --o-grey-500 | o-fill-grey-500 | |
| 600 | --o-grey-600 | o-fill-grey-600 | |
| 700 | --o-grey-700 | o-fill-grey-700 | |
| 800 | --o-grey-800 | o-fill-grey-800 | |
| 900 | --o-grey-900 | o-fill-grey-900 | |
| 1000 | --o-grey-1000 | o-fill-grey-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-slate-000 | o-fill-slate-000 | |
| 015 | --o-slate-015 | o-fill-slate-015 | |
| 025 | --o-slate-025 | o-fill-slate-025 | |
| 050 | --o-slate-050 | o-fill-slate-050 | |
| 075 | --o-slate-075 | o-fill-slate-075 | |
| 085 | --o-slate-085 | o-fill-slate-085 | |
| 100 | --o-slate-100 | o-fill-slate-100 | |
| 200 | --o-slate-200 | o-fill-slate-200 | |
| 300 | --o-slate-300 | o-fill-slate-300 | |
| 400 | --o-slate-400 | o-fill-slate-400 | |
| 500 | --o-slate-500 | o-fill-slate-500 | |
| 600 | --o-slate-600 | o-fill-slate-600 | |
| 700 | --o-slate-700 | o-fill-slate-700 | |
| 800 | --o-slate-800 | o-fill-slate-800 | |
| 900 | --o-slate-900 | o-fill-slate-900 | |
| 1000 | --o-slate-1000 | o-fill-slate-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-zinc-000 | o-fill-zinc-000 | |
| 015 | --o-zinc-015 | o-fill-zinc-015 | |
| 025 | --o-zinc-025 | o-fill-zinc-025 | |
| 050 | --o-zinc-050 | o-fill-zinc-050 | |
| 075 | --o-zinc-075 | o-fill-zinc-075 | |
| 085 | --o-zinc-085 | o-fill-zinc-085 | |
| 100 | --o-zinc-100 | o-fill-zinc-100 | |
| 200 | --o-zinc-200 | o-fill-zinc-200 | |
| 300 | --o-zinc-300 | o-fill-zinc-300 | |
| 400 | --o-zinc-400 | o-fill-zinc-400 | |
| 500 | --o-zinc-500 | o-fill-zinc-500 | |
| 600 | --o-zinc-600 | o-fill-zinc-600 | |
| 700 | --o-zinc-700 | o-fill-zinc-700 | |
| 800 | --o-zinc-800 | o-fill-zinc-800 | |
| 900 | --o-zinc-900 | o-fill-zinc-900 | |
| 1000 | --o-zinc-1000 | o-fill-zinc-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-steel-000 | o-fill-steel-000 | |
| 015 | --o-steel-015 | o-fill-steel-015 | |
| 025 | --o-steel-025 | o-fill-steel-025 | |
| 050 | --o-steel-050 | o-fill-steel-050 | |
| 075 | --o-steel-075 | o-fill-steel-075 | |
| 085 | --o-steel-085 | o-fill-steel-085 | |
| 100 | --o-steel-100 | o-fill-steel-100 | |
| 200 | --o-steel-200 | o-fill-steel-200 | |
| 300 | --o-steel-300 | o-fill-steel-300 | |
| 400 | --o-steel-400 | o-fill-steel-400 | |
| 500 | --o-steel-500 | o-fill-steel-500 | |
| 600 | --o-steel-600 | o-fill-steel-600 | |
| 700 | --o-steel-700 | o-fill-steel-700 | |
| 800 | --o-steel-800 | o-fill-steel-800 | |
| 900 | --o-steel-900 | o-fill-steel-900 | |
| 1000 | --o-steel-1000 | o-fill-steel-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-iron-000 | o-fill-iron-000 | |
| 015 | --o-iron-015 | o-fill-iron-015 | |
| 025 | --o-iron-025 | o-fill-iron-025 | |
| 050 | --o-iron-050 | o-fill-iron-050 | |
| 075 | --o-iron-075 | o-fill-iron-075 | |
| 085 | --o-iron-085 | o-fill-iron-085 | |
| 100 | --o-iron-100 | o-fill-iron-100 | |
| 200 | --o-iron-200 | o-fill-iron-200 | |
| 300 | --o-iron-300 | o-fill-iron-300 | |
| 400 | --o-iron-400 | o-fill-iron-400 | |
| 500 | --o-iron-500 | o-fill-iron-500 | |
| 600 | --o-iron-600 | o-fill-iron-600 | |
| 700 | --o-iron-700 | o-fill-iron-700 | |
| 800 | --o-iron-800 | o-fill-iron-800 | |
| 900 | --o-iron-900 | o-fill-iron-900 | |
| 1000 | --o-iron-1000 | o-fill-iron-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-red-000 | o-fill-red-000 | |
| 015 | --o-red-015 | o-fill-red-015 | |
| 025 | --o-red-025 | o-fill-red-025 | |
| 050 | --o-red-050 | o-fill-red-050 | |
| 075 | --o-red-075 | o-fill-red-075 | |
| 085 | --o-red-085 | o-fill-red-085 | |
| 100 | --o-red-100 | o-fill-red-100 | |
| 200 | --o-red-200 | o-fill-red-200 | |
| 300 | --o-red-300 | o-fill-red-300 | |
| 400 | --o-red-400 | o-fill-red-400 | |
| 500 | --o-red-500 | o-fill-red-500 | |
| 600 | --o-red-600 | o-fill-red-600 | |
| 700 | --o-red-700 | o-fill-red-700 | |
| 800 | --o-red-800 | o-fill-red-800 | |
| 900 | --o-red-900 | o-fill-red-900 | |
| 1000 | --o-red-1000 | o-fill-red-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-orange-000 | o-fill-orange-000 | |
| 015 | --o-orange-015 | o-fill-orange-015 | |
| 025 | --o-orange-025 | o-fill-orange-025 | |
| 050 | --o-orange-050 | o-fill-orange-050 | |
| 075 | --o-orange-075 | o-fill-orange-075 | |
| 085 | --o-orange-085 | o-fill-orange-085 | |
| 100 | --o-orange-100 | o-fill-orange-100 | |
| 200 | --o-orange-200 | o-fill-orange-200 | |
| 300 | --o-orange-300 | o-fill-orange-300 | |
| 400 | --o-orange-400 | o-fill-orange-400 | |
| 500 | --o-orange-500 | o-fill-orange-500 | |
| 600 | --o-orange-600 | o-fill-orange-600 | |
| 700 | --o-orange-700 | o-fill-orange-700 | |
| 800 | --o-orange-800 | o-fill-orange-800 | |
| 900 | --o-orange-900 | o-fill-orange-900 | |
| 1000 | --o-orange-1000 | o-fill-orange-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-ochre-000 | o-fill-ochre-000 | |
| 015 | --o-ochre-015 | o-fill-ochre-015 | |
| 025 | --o-ochre-025 | o-fill-ochre-025 | |
| 050 | --o-ochre-050 | o-fill-ochre-050 | |
| 075 | --o-ochre-075 | o-fill-ochre-075 | |
| 085 | --o-ochre-085 | o-fill-ochre-085 | |
| 100 | --o-ochre-100 | o-fill-ochre-100 | |
| 200 | --o-ochre-200 | o-fill-ochre-200 | |
| 300 | --o-ochre-300 | o-fill-ochre-300 | |
| 400 | --o-ochre-400 | o-fill-ochre-400 | |
| 500 | --o-ochre-500 | o-fill-ochre-500 | |
| 600 | --o-ochre-600 | o-fill-ochre-600 | |
| 700 | --o-ochre-700 | o-fill-ochre-700 | |
| 800 | --o-ochre-800 | o-fill-ochre-800 | |
| 900 | --o-ochre-900 | o-fill-ochre-900 | |
| 1000 | --o-ochre-1000 | o-fill-ochre-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-gold-000 | o-fill-gold-000 | |
| 015 | --o-gold-015 | o-fill-gold-015 | |
| 025 | --o-gold-025 | o-fill-gold-025 | |
| 050 | --o-gold-050 | o-fill-gold-050 | |
| 075 | --o-gold-075 | o-fill-gold-075 | |
| 085 | --o-gold-085 | o-fill-gold-085 | |
| 100 | --o-gold-100 | o-fill-gold-100 | |
| 200 | --o-gold-200 | o-fill-gold-200 | |
| 300 | --o-gold-300 | o-fill-gold-300 | |
| 400 | --o-gold-400 | o-fill-gold-400 | |
| 500 | --o-gold-500 | o-fill-gold-500 | |
| 600 | --o-gold-600 | o-fill-gold-600 | |
| 700 | --o-gold-700 | o-fill-gold-700 | |
| 800 | --o-gold-800 | o-fill-gold-800 | |
| 900 | --o-gold-900 | o-fill-gold-900 | |
| 1000 | --o-gold-1000 | o-fill-gold-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-yellow-000 | o-fill-yellow-000 | |
| 015 | --o-yellow-015 | o-fill-yellow-015 | |
| 025 | --o-yellow-025 | o-fill-yellow-025 | |
| 050 | --o-yellow-050 | o-fill-yellow-050 | |
| 075 | --o-yellow-075 | o-fill-yellow-075 | |
| 085 | --o-yellow-085 | o-fill-yellow-085 | |
| 100 | --o-yellow-100 | o-fill-yellow-100 | |
| 200 | --o-yellow-200 | o-fill-yellow-200 | |
| 300 | --o-yellow-300 | o-fill-yellow-300 | |
| 400 | --o-yellow-400 | o-fill-yellow-400 | |
| 500 | --o-yellow-500 | o-fill-yellow-500 | |
| 600 | --o-yellow-600 | o-fill-yellow-600 | |
| 700 | --o-yellow-700 | o-fill-yellow-700 | |
| 800 | --o-yellow-800 | o-fill-yellow-800 | |
| 900 | --o-yellow-900 | o-fill-yellow-900 | |
| 1000 | --o-yellow-1000 | o-fill-yellow-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-lime-000 | o-fill-lime-000 | |
| 015 | --o-lime-015 | o-fill-lime-015 | |
| 025 | --o-lime-025 | o-fill-lime-025 | |
| 050 | --o-lime-050 | o-fill-lime-050 | |
| 075 | --o-lime-075 | o-fill-lime-075 | |
| 085 | --o-lime-085 | o-fill-lime-085 | |
| 100 | --o-lime-100 | o-fill-lime-100 | |
| 200 | --o-lime-200 | o-fill-lime-200 | |
| 300 | --o-lime-300 | o-fill-lime-300 | |
| 400 | --o-lime-400 | o-fill-lime-400 | |
| 500 | --o-lime-500 | o-fill-lime-500 | |
| 600 | --o-lime-600 | o-fill-lime-600 | |
| 700 | --o-lime-700 | o-fill-lime-700 | |
| 800 | --o-lime-800 | o-fill-lime-800 | |
| 900 | --o-lime-900 | o-fill-lime-900 | |
| 1000 | --o-lime-1000 | o-fill-lime-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-green-000 | o-fill-green-000 | |
| 015 | --o-green-015 | o-fill-green-015 | |
| 025 | --o-green-025 | o-fill-green-025 | |
| 050 | --o-green-050 | o-fill-green-050 | |
| 075 | --o-green-075 | o-fill-green-075 | |
| 085 | --o-green-085 | o-fill-green-085 | |
| 100 | --o-green-100 | o-fill-green-100 | |
| 200 | --o-green-200 | o-fill-green-200 | |
| 300 | --o-green-300 | o-fill-green-300 | |
| 400 | --o-green-400 | o-fill-green-400 | |
| 500 | --o-green-500 | o-fill-green-500 | |
| 600 | --o-green-600 | o-fill-green-600 | |
| 700 | --o-green-700 | o-fill-green-700 | |
| 800 | --o-green-800 | o-fill-green-800 | |
| 900 | --o-green-900 | o-fill-green-900 | |
| 1000 | --o-green-1000 | o-fill-green-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-jade-000 | o-fill-jade-000 | |
| 015 | --o-jade-015 | o-fill-jade-015 | |
| 025 | --o-jade-025 | o-fill-jade-025 | |
| 050 | --o-jade-050 | o-fill-jade-050 | |
| 075 | --o-jade-075 | o-fill-jade-075 | |
| 085 | --o-jade-085 | o-fill-jade-085 | |
| 100 | --o-jade-100 | o-fill-jade-100 | |
| 200 | --o-jade-200 | o-fill-jade-200 | |
| 300 | --o-jade-300 | o-fill-jade-300 | |
| 400 | --o-jade-400 | o-fill-jade-400 | |
| 500 | --o-jade-500 | o-fill-jade-500 | |
| 600 | --o-jade-600 | o-fill-jade-600 | |
| 700 | --o-jade-700 | o-fill-jade-700 | |
| 800 | --o-jade-800 | o-fill-jade-800 | |
| 900 | --o-jade-900 | o-fill-jade-900 | |
| 1000 | --o-jade-1000 | o-fill-jade-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-teal-000 | o-fill-teal-000 | |
| 015 | --o-teal-015 | o-fill-teal-015 | |
| 025 | --o-teal-025 | o-fill-teal-025 | |
| 050 | --o-teal-050 | o-fill-teal-050 | |
| 075 | --o-teal-075 | o-fill-teal-075 | |
| 085 | --o-teal-085 | o-fill-teal-085 | |
| 100 | --o-teal-100 | o-fill-teal-100 | |
| 200 | --o-teal-200 | o-fill-teal-200 | |
| 300 | --o-teal-300 | o-fill-teal-300 | |
| 400 | --o-teal-400 | o-fill-teal-400 | |
| 500 | --o-teal-500 | o-fill-teal-500 | |
| 600 | --o-teal-600 | o-fill-teal-600 | |
| 700 | --o-teal-700 | o-fill-teal-700 | |
| 800 | --o-teal-800 | o-fill-teal-800 | |
| 900 | --o-teal-900 | o-fill-teal-900 | |
| 1000 | --o-teal-1000 | o-fill-teal-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-cyan-000 | o-fill-cyan-000 | |
| 015 | --o-cyan-015 | o-fill-cyan-015 | |
| 025 | --o-cyan-025 | o-fill-cyan-025 | |
| 050 | --o-cyan-050 | o-fill-cyan-050 | |
| 075 | --o-cyan-075 | o-fill-cyan-075 | |
| 085 | --o-cyan-085 | o-fill-cyan-085 | |
| 100 | --o-cyan-100 | o-fill-cyan-100 | |
| 200 | --o-cyan-200 | o-fill-cyan-200 | |
| 300 | --o-cyan-300 | o-fill-cyan-300 | |
| 400 | --o-cyan-400 | o-fill-cyan-400 | |
| 500 | --o-cyan-500 | o-fill-cyan-500 | |
| 600 | --o-cyan-600 | o-fill-cyan-600 | |
| 700 | --o-cyan-700 | o-fill-cyan-700 | |
| 800 | --o-cyan-800 | o-fill-cyan-800 | |
| 900 | --o-cyan-900 | o-fill-cyan-900 | |
| 1000 | --o-cyan-1000 | o-fill-cyan-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-sky-000 | o-fill-sky-000 | |
| 015 | --o-sky-015 | o-fill-sky-015 | |
| 025 | --o-sky-025 | o-fill-sky-025 | |
| 050 | --o-sky-050 | o-fill-sky-050 | |
| 075 | --o-sky-075 | o-fill-sky-075 | |
| 085 | --o-sky-085 | o-fill-sky-085 | |
| 100 | --o-sky-100 | o-fill-sky-100 | |
| 200 | --o-sky-200 | o-fill-sky-200 | |
| 300 | --o-sky-300 | o-fill-sky-300 | |
| 400 | --o-sky-400 | o-fill-sky-400 | |
| 500 | --o-sky-500 | o-fill-sky-500 | |
| 600 | --o-sky-600 | o-fill-sky-600 | |
| 700 | --o-sky-700 | o-fill-sky-700 | |
| 800 | --o-sky-800 | o-fill-sky-800 | |
| 900 | --o-sky-900 | o-fill-sky-900 | |
| 1000 | --o-sky-1000 | o-fill-sky-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-blue-000 | o-fill-blue-000 | |
| 015 | --o-blue-015 | o-fill-blue-015 | |
| 025 | --o-blue-025 | o-fill-blue-025 | |
| 050 | --o-blue-050 | o-fill-blue-050 | |
| 075 | --o-blue-075 | o-fill-blue-075 | |
| 085 | --o-blue-085 | o-fill-blue-085 | |
| 100 | --o-blue-100 | o-fill-blue-100 | |
| 200 | --o-blue-200 | o-fill-blue-200 | |
| 300 | --o-blue-300 | o-fill-blue-300 | |
| 400 | --o-blue-400 | o-fill-blue-400 | |
| 500 | --o-blue-500 | o-fill-blue-500 | |
| 600 | --o-blue-600 | o-fill-blue-600 | |
| 700 | --o-blue-700 | o-fill-blue-700 | |
| 800 | --o-blue-800 | o-fill-blue-800 | |
| 900 | --o-blue-900 | o-fill-blue-900 | |
| 1000 | --o-blue-1000 | o-fill-blue-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-indigo-000 | o-fill-indigo-000 | |
| 015 | --o-indigo-015 | o-fill-indigo-015 | |
| 025 | --o-indigo-025 | o-fill-indigo-025 | |
| 050 | --o-indigo-050 | o-fill-indigo-050 | |
| 075 | --o-indigo-075 | o-fill-indigo-075 | |
| 085 | --o-indigo-085 | o-fill-indigo-085 | |
| 100 | --o-indigo-100 | o-fill-indigo-100 | |
| 200 | --o-indigo-200 | o-fill-indigo-200 | |
| 300 | --o-indigo-300 | o-fill-indigo-300 | |
| 400 | --o-indigo-400 | o-fill-indigo-400 | |
| 500 | --o-indigo-500 | o-fill-indigo-500 | |
| 600 | --o-indigo-600 | o-fill-indigo-600 | |
| 700 | --o-indigo-700 | o-fill-indigo-700 | |
| 800 | --o-indigo-800 | o-fill-indigo-800 | |
| 900 | --o-indigo-900 | o-fill-indigo-900 | |
| 1000 | --o-indigo-1000 | o-fill-indigo-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-violet-000 | o-fill-violet-000 | |
| 015 | --o-violet-015 | o-fill-violet-015 | |
| 025 | --o-violet-025 | o-fill-violet-025 | |
| 050 | --o-violet-050 | o-fill-violet-050 | |
| 075 | --o-violet-075 | o-fill-violet-075 | |
| 085 | --o-violet-085 | o-fill-violet-085 | |
| 100 | --o-violet-100 | o-fill-violet-100 | |
| 200 | --o-violet-200 | o-fill-violet-200 | |
| 300 | --o-violet-300 | o-fill-violet-300 | |
| 400 | --o-violet-400 | o-fill-violet-400 | |
| 500 | --o-violet-500 | o-fill-violet-500 | |
| 600 | --o-violet-600 | o-fill-violet-600 | |
| 700 | --o-violet-700 | o-fill-violet-700 | |
| 800 | --o-violet-800 | o-fill-violet-800 | |
| 900 | --o-violet-900 | o-fill-violet-900 | |
| 1000 | --o-violet-1000 | o-fill-violet-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-purple-000 | o-fill-purple-000 | |
| 015 | --o-purple-015 | o-fill-purple-015 | |
| 025 | --o-purple-025 | o-fill-purple-025 | |
| 050 | --o-purple-050 | o-fill-purple-050 | |
| 075 | --o-purple-075 | o-fill-purple-075 | |
| 085 | --o-purple-085 | o-fill-purple-085 | |
| 100 | --o-purple-100 | o-fill-purple-100 | |
| 200 | --o-purple-200 | o-fill-purple-200 | |
| 300 | --o-purple-300 | o-fill-purple-300 | |
| 400 | --o-purple-400 | o-fill-purple-400 | |
| 500 | --o-purple-500 | o-fill-purple-500 | |
| 600 | --o-purple-600 | o-fill-purple-600 | |
| 700 | --o-purple-700 | o-fill-purple-700 | |
| 800 | --o-purple-800 | o-fill-purple-800 | |
| 900 | --o-purple-900 | o-fill-purple-900 | |
| 1000 | --o-purple-1000 | o-fill-purple-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-grape-000 | o-fill-grape-000 | |
| 015 | --o-grape-015 | o-fill-grape-015 | |
| 025 | --o-grape-025 | o-fill-grape-025 | |
| 050 | --o-grape-050 | o-fill-grape-050 | |
| 075 | --o-grape-075 | o-fill-grape-075 | |
| 085 | --o-grape-085 | o-fill-grape-085 | |
| 100 | --o-grape-100 | o-fill-grape-100 | |
| 200 | --o-grape-200 | o-fill-grape-200 | |
| 300 | --o-grape-300 | o-fill-grape-300 | |
| 400 | --o-grape-400 | o-fill-grape-400 | |
| 500 | --o-grape-500 | o-fill-grape-500 | |
| 600 | --o-grape-600 | o-fill-grape-600 | |
| 700 | --o-grape-700 | o-fill-grape-700 | |
| 800 | --o-grape-800 | o-fill-grape-800 | |
| 900 | --o-grape-900 | o-fill-grape-900 | |
| 1000 | --o-grape-1000 | o-fill-grape-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-pink-000 | o-fill-pink-000 | |
| 015 | --o-pink-015 | o-fill-pink-015 | |
| 025 | --o-pink-025 | o-fill-pink-025 | |
| 050 | --o-pink-050 | o-fill-pink-050 | |
| 075 | --o-pink-075 | o-fill-pink-075 | |
| 085 | --o-pink-085 | o-fill-pink-085 | |
| 100 | --o-pink-100 | o-fill-pink-100 | |
| 200 | --o-pink-200 | o-fill-pink-200 | |
| 300 | --o-pink-300 | o-fill-pink-300 | |
| 400 | --o-pink-400 | o-fill-pink-400 | |
| 500 | --o-pink-500 | o-fill-pink-500 | |
| 600 | --o-pink-600 | o-fill-pink-600 | |
| 700 | --o-pink-700 | o-fill-pink-700 | |
| 800 | --o-pink-800 | o-fill-pink-800 | |
| 900 | --o-pink-900 | o-fill-pink-900 | |
| 1000 | --o-pink-1000 | o-fill-pink-1000 | |
| Shade | CSS Variable | Utility Class | Sample |
|---|
| 000 | --o-rose-000 | o-fill-rose-000 | |
| 015 | --o-rose-015 | o-fill-rose-015 | |
| 025 | --o-rose-025 | o-fill-rose-025 | |
| 050 | --o-rose-050 | o-fill-rose-050 | |
| 075 | --o-rose-075 | o-fill-rose-075 | |
| 085 | --o-rose-085 | o-fill-rose-085 | |
| 100 | --o-rose-100 | o-fill-rose-100 | |
| 200 | --o-rose-200 | o-fill-rose-200 | |
| 300 | --o-rose-300 | o-fill-rose-300 | |
| 400 | --o-rose-400 | o-fill-rose-400 | |
| 500 | --o-rose-500 | o-fill-rose-500 | |
| 600 | --o-rose-600 | o-fill-rose-600 | |
| 700 | --o-rose-700 | o-fill-rose-700 | |
| 800 | --o-rose-800 | o-fill-rose-800 | |
| 900 | --o-rose-900 | o-fill-rose-900 | |
| 1000 | --o-rose-1000 | o-fill-rose-1000 | |