Backdrop Colors CheatSheet
This page lists all Backdrop Colors CSS custom properties and utility classes available in the OxyProps Framework
Target CSS properties
link Target CSS propertiesbackground(shorthand)background-colorborder(shorthand)border-bottom(shorthand)border-bottom-colorborder-colorborder-left(shorthand)border-left-colorborder-right(shorthand)border-right-colorborder-top(shorthand)border-top-colorbox-shadow(shorthand)caret-colorcolor(SVG only)column-rule(shorthand)column-rule-colorfilloutline(shorthand)outline-colorstroke(SVG only)text-decoration(shorthand)text-decoration-colortext-shadow
root { text-decoration-style: underline; text-decoration-color: hsl(var(--o-accent-500-hsl) / 50%);}root { fill: hsl(var(--o-canvas-300-hsl) / 85%); stroke: hsl(var(--o-brand-400-hsl) / 85%);} text-decoration-style: underline; text-decoration-color: hsl(var(--o-accent-500-hsl) / 50%); fill: hsl(var(--o-canvas-300-hsl) / 85%); stroke: hsl(var(--o-brand-400-hsl) / 85%);Canvas
link Canvas| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-canvas-900-hsl) / 5%) | o-bd-canvas-5 | |
| 10% | hsl(var(--o-canvas-900-hsl) / 10%) | o-bd-canvas-10 | |
| 20% | hsl(var(--o-canvas-900-hsl) / 20%) | o-bd-canvas-20 | |
| 30% | hsl(var(--o-canvas-900-hsl) / 30%) | o-bd-canvas-30 | |
| 40% | hsl(var(--o-canvas-900-hsl) / 40%) | o-bd-canvas-40 | |
| 50% | hsl(var(--o-canvas-900-hsl) / 50%) | o-bd-canvas-50 | |
| 60% | hsl(var(--o-canvas-900-hsl) / 60%) | o-bd-canvas-60 | |
| 70% | hsl(var(--o-canvas-900-hsl) / 70%) | o-bd-canvas-70 | |
| 80% | hsl(var(--o-canvas-900-hsl) / 80%) | o-bd-canvas-80 | |
| 90% | hsl(var(--o-canvas-900-hsl) / 90%) | o-bd-canvas-90 | |
| 95% | hsl(var(--o-canvas-900-hsl) / 95%) | o-bd-canvas-95 |
Brand
link Brand| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-brand-900-hsl) / 5%) | o-bd-brand-5 | |
| 10% | hsl(var(--o-brand-900-hsl) / 10%) | o-bd-brand-10 | |
| 20% | hsl(var(--o-brand-900-hsl) / 20%) | o-bd-brand-20 | |
| 30% | hsl(var(--o-brand-900-hsl) / 30%) | o-bd-brand-30 | |
| 40% | hsl(var(--o-brand-900-hsl) / 40%) | o-bd-brand-40 | |
| 50% | hsl(var(--o-brand-900-hsl) / 50%) | o-bd-brand-50 | |
| 60% | hsl(var(--o-brand-900-hsl) / 60%) | o-bd-brand-60 | |
| 70% | hsl(var(--o-brand-900-hsl) / 70%) | o-bd-brand-70 | |
| 80% | hsl(var(--o-brand-900-hsl) / 80%) | o-bd-brand-80 | |
| 90% | hsl(var(--o-brand-900-hsl) / 90%) | o-bd-brand-90 | |
| 95% | hsl(var(--o-brand-900-hsl) / 95%) | o-bd-brand-95 |
Accent
link Accent| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-accent-900-hsl) / 5%) | o-bd-accent-5 | |
| 10% | hsl(var(--o-accent-900-hsl) / 10%) | o-bd-accent-10 | |
| 20% | hsl(var(--o-accent-900-hsl) / 20%) | o-bd-accent-20 | |
| 30% | hsl(var(--o-accent-900-hsl) / 30%) | o-bd-accent-30 | |
| 40% | hsl(var(--o-accent-900-hsl) / 40%) | o-bd-accent-40 | |
| 50% | hsl(var(--o-accent-900-hsl) / 50%) | o-bd-accent-50 | |
| 60% | hsl(var(--o-accent-900-hsl) / 60%) | o-bd-accent-60 | |
| 70% | hsl(var(--o-accent-900-hsl) / 70%) | o-bd-accent-70 | |
| 80% | hsl(var(--o-accent-900-hsl) / 80%) | o-bd-accent-80 | |
| 90% | hsl(var(--o-accent-900-hsl) / 90%) | o-bd-accent-90 | |
| 95% | hsl(var(--o-accent-900-hsl) / 95%) | o-bd-accent-95 |
Links
link Links| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-links-900-hsl) / 5%) | o-bd-links-5 | |
| 10% | hsl(var(--o-links-900-hsl) / 10%) | o-bd-links-10 | |
| 20% | hsl(var(--o-links-900-hsl) / 20%) | o-bd-links-20 | |
| 30% | hsl(var(--o-links-900-hsl) / 30%) | o-bd-links-30 | |
| 40% | hsl(var(--o-links-900-hsl) / 40%) | o-bd-links-40 | |
| 50% | hsl(var(--o-links-900-hsl) / 50%) | o-bd-links-50 | |
| 60% | hsl(var(--o-links-900-hsl) / 60%) | o-bd-links-60 | |
| 70% | hsl(var(--o-links-900-hsl) / 70%) | o-bd-links-70 | |
| 80% | hsl(var(--o-links-900-hsl) / 80%) | o-bd-links-80 | |
| 90% | hsl(var(--o-links-900-hsl) / 90%) | o-bd-links-90 | |
| 95% | hsl(var(--o-links-900-hsl) / 95%) | o-bd-links-95 |
Visited
link Visited| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-visited-900-hsl) / 5%) | o-bd-visited-5 | |
| 10% | hsl(var(--o-visited-900-hsl) / 10%) | o-bd-visited-10 | |
| 20% | hsl(var(--o-visited-900-hsl) / 20%) | o-bd-visited-20 | |
| 30% | hsl(var(--o-visited-900-hsl) / 30%) | o-bd-visited-30 | |
| 40% | hsl(var(--o-visited-900-hsl) / 40%) | o-bd-visited-40 | |
| 50% | hsl(var(--o-visited-900-hsl) / 50%) | o-bd-visited-50 | |
| 60% | hsl(var(--o-visited-900-hsl) / 60%) | o-bd-visited-60 | |
| 70% | hsl(var(--o-visited-900-hsl) / 70%) | o-bd-visited-70 | |
| 80% | hsl(var(--o-visited-900-hsl) / 80%) | o-bd-visited-80 | |
| 90% | hsl(var(--o-visited-900-hsl) / 90%) | o-bd-visited-90 | |
| 95% | hsl(var(--o-visited-900-hsl) / 95%) | o-bd-visited-95 |
Mole
link Mole| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-mole-900-hsl) / 5%) | o-bd-mole-5 | |
| 10% | hsl(var(--o-mole-900-hsl) / 10%) | o-bd-mole-10 | |
| 20% | hsl(var(--o-mole-900-hsl) / 20%) | o-bd-mole-20 | |
| 30% | hsl(var(--o-mole-900-hsl) / 30%) | o-bd-mole-30 | |
| 40% | hsl(var(--o-mole-900-hsl) / 40%) | o-bd-mole-40 | |
| 50% | hsl(var(--o-mole-900-hsl) / 50%) | o-bd-mole-50 | |
| 60% | hsl(var(--o-mole-900-hsl) / 60%) | o-bd-mole-60 | |
| 70% | hsl(var(--o-mole-900-hsl) / 70%) | o-bd-mole-70 | |
| 80% | hsl(var(--o-mole-900-hsl) / 80%) | o-bd-mole-80 | |
| 90% | hsl(var(--o-mole-900-hsl) / 90%) | o-bd-mole-90 | |
| 95% | hsl(var(--o-mole-900-hsl) / 95%) | o-bd-mole-95 |
Lead
link Lead| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-lead-900-hsl) / 5%) | o-bd-lead-5 | |
| 10% | hsl(var(--o-lead-900-hsl) / 10%) | o-bd-lead-10 | |
| 20% | hsl(var(--o-lead-900-hsl) / 20%) | o-bd-lead-20 | |
| 30% | hsl(var(--o-lead-900-hsl) / 30%) | o-bd-lead-30 | |
| 40% | hsl(var(--o-lead-900-hsl) / 40%) | o-bd-lead-40 | |
| 50% | hsl(var(--o-lead-900-hsl) / 50%) | o-bd-lead-50 | |
| 60% | hsl(var(--o-lead-900-hsl) / 60%) | o-bd-lead-60 | |
| 70% | hsl(var(--o-lead-900-hsl) / 70%) | o-bd-lead-70 | |
| 80% | hsl(var(--o-lead-900-hsl) / 80%) | o-bd-lead-80 | |
| 90% | hsl(var(--o-lead-900-hsl) / 90%) | o-bd-lead-90 | |
| 95% | hsl(var(--o-lead-900-hsl) / 95%) | o-bd-lead-95 |
Pipe
link Pipe| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-pipe-900-hsl) / 5%) | o-bd-pipe-5 | |
| 10% | hsl(var(--o-pipe-900-hsl) / 10%) | o-bd-pipe-10 | |
| 20% | hsl(var(--o-pipe-900-hsl) / 20%) | o-bd-pipe-20 | |
| 30% | hsl(var(--o-pipe-900-hsl) / 30%) | o-bd-pipe-30 | |
| 40% | hsl(var(--o-pipe-900-hsl) / 40%) | o-bd-pipe-40 | |
| 50% | hsl(var(--o-pipe-900-hsl) / 50%) | o-bd-pipe-50 | |
| 60% | hsl(var(--o-pipe-900-hsl) / 60%) | o-bd-pipe-60 | |
| 70% | hsl(var(--o-pipe-900-hsl) / 70%) | o-bd-pipe-70 | |
| 80% | hsl(var(--o-pipe-900-hsl) / 80%) | o-bd-pipe-80 | |
| 90% | hsl(var(--o-pipe-900-hsl) / 90%) | o-bd-pipe-90 | |
| 95% | hsl(var(--o-pipe-900-hsl) / 95%) | o-bd-pipe-95 |
Denim
link Denim| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-denim-900-hsl) / 5%) | o-bd-denim-5 | |
| 10% | hsl(var(--o-denim-900-hsl) / 10%) | o-bd-denim-10 | |
| 20% | hsl(var(--o-denim-900-hsl) / 20%) | o-bd-denim-20 | |
| 30% | hsl(var(--o-denim-900-hsl) / 30%) | o-bd-denim-30 | |
| 40% | hsl(var(--o-denim-900-hsl) / 40%) | o-bd-denim-40 | |
| 50% | hsl(var(--o-denim-900-hsl) / 50%) | o-bd-denim-50 | |
| 60% | hsl(var(--o-denim-900-hsl) / 60%) | o-bd-denim-60 | |
| 70% | hsl(var(--o-denim-900-hsl) / 70%) | o-bd-denim-70 | |
| 80% | hsl(var(--o-denim-900-hsl) / 80%) | o-bd-denim-80 | |
| 90% | hsl(var(--o-denim-900-hsl) / 90%) | o-bd-denim-90 | |
| 95% | hsl(var(--o-denim-900-hsl) / 95%) | o-bd-denim-95 |
Grey
link Grey| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-grey-900-hsl) / 5%) | o-bd-grey-5 | |
| 10% | hsl(var(--o-grey-900-hsl) / 10%) | o-bd-grey-10 | |
| 20% | hsl(var(--o-grey-900-hsl) / 20%) | o-bd-grey-20 | |
| 30% | hsl(var(--o-grey-900-hsl) / 30%) | o-bd-grey-30 | |
| 40% | hsl(var(--o-grey-900-hsl) / 40%) | o-bd-grey-40 | |
| 50% | hsl(var(--o-grey-900-hsl) / 50%) | o-bd-grey-50 | |
| 60% | hsl(var(--o-grey-900-hsl) / 60%) | o-bd-grey-60 | |
| 70% | hsl(var(--o-grey-900-hsl) / 70%) | o-bd-grey-70 | |
| 80% | hsl(var(--o-grey-900-hsl) / 80%) | o-bd-grey-80 | |
| 90% | hsl(var(--o-grey-900-hsl) / 90%) | o-bd-grey-90 | |
| 95% | hsl(var(--o-grey-900-hsl) / 95%) | o-bd-grey-95 |
Slate
link Slate| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-slate-900-hsl) / 5%) | o-bd-slate-5 | |
| 10% | hsl(var(--o-slate-900-hsl) / 10%) | o-bd-slate-10 | |
| 20% | hsl(var(--o-slate-900-hsl) / 20%) | o-bd-slate-20 | |
| 30% | hsl(var(--o-slate-900-hsl) / 30%) | o-bd-slate-30 | |
| 40% | hsl(var(--o-slate-900-hsl) / 40%) | o-bd-slate-40 | |
| 50% | hsl(var(--o-slate-900-hsl) / 50%) | o-bd-slate-50 | |
| 60% | hsl(var(--o-slate-900-hsl) / 60%) | o-bd-slate-60 | |
| 70% | hsl(var(--o-slate-900-hsl) / 70%) | o-bd-slate-70 | |
| 80% | hsl(var(--o-slate-900-hsl) / 80%) | o-bd-slate-80 | |
| 90% | hsl(var(--o-slate-900-hsl) / 90%) | o-bd-slate-90 | |
| 95% | hsl(var(--o-slate-900-hsl) / 95%) | o-bd-slate-95 |
Zinc
link Zinc| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-zinc-900-hsl) / 5%) | o-bd-zinc-5 | |
| 10% | hsl(var(--o-zinc-900-hsl) / 10%) | o-bd-zinc-10 | |
| 20% | hsl(var(--o-zinc-900-hsl) / 20%) | o-bd-zinc-20 | |
| 30% | hsl(var(--o-zinc-900-hsl) / 30%) | o-bd-zinc-30 | |
| 40% | hsl(var(--o-zinc-900-hsl) / 40%) | o-bd-zinc-40 | |
| 50% | hsl(var(--o-zinc-900-hsl) / 50%) | o-bd-zinc-50 | |
| 60% | hsl(var(--o-zinc-900-hsl) / 60%) | o-bd-zinc-60 | |
| 70% | hsl(var(--o-zinc-900-hsl) / 70%) | o-bd-zinc-70 | |
| 80% | hsl(var(--o-zinc-900-hsl) / 80%) | o-bd-zinc-80 | |
| 90% | hsl(var(--o-zinc-900-hsl) / 90%) | o-bd-zinc-90 | |
| 95% | hsl(var(--o-zinc-900-hsl) / 95%) | o-bd-zinc-95 |
Steel
link Steel| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-steel-900-hsl) / 5%) | o-bd-steel-5 | |
| 10% | hsl(var(--o-steel-900-hsl) / 10%) | o-bd-steel-10 | |
| 20% | hsl(var(--o-steel-900-hsl) / 20%) | o-bd-steel-20 | |
| 30% | hsl(var(--o-steel-900-hsl) / 30%) | o-bd-steel-30 | |
| 40% | hsl(var(--o-steel-900-hsl) / 40%) | o-bd-steel-40 | |
| 50% | hsl(var(--o-steel-900-hsl) / 50%) | o-bd-steel-50 | |
| 60% | hsl(var(--o-steel-900-hsl) / 60%) | o-bd-steel-60 | |
| 70% | hsl(var(--o-steel-900-hsl) / 70%) | o-bd-steel-70 | |
| 80% | hsl(var(--o-steel-900-hsl) / 80%) | o-bd-steel-80 | |
| 90% | hsl(var(--o-steel-900-hsl) / 90%) | o-bd-steel-90 | |
| 95% | hsl(var(--o-steel-900-hsl) / 95%) | o-bd-steel-95 |
Iron
link Iron| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-iron-900-hsl) / 5%) | o-bd-iron-5 | |
| 10% | hsl(var(--o-iron-900-hsl) / 10%) | o-bd-iron-10 | |
| 20% | hsl(var(--o-iron-900-hsl) / 20%) | o-bd-iron-20 | |
| 30% | hsl(var(--o-iron-900-hsl) / 30%) | o-bd-iron-30 | |
| 40% | hsl(var(--o-iron-900-hsl) / 40%) | o-bd-iron-40 | |
| 50% | hsl(var(--o-iron-900-hsl) / 50%) | o-bd-iron-50 | |
| 60% | hsl(var(--o-iron-900-hsl) / 60%) | o-bd-iron-60 | |
| 70% | hsl(var(--o-iron-900-hsl) / 70%) | o-bd-iron-70 | |
| 80% | hsl(var(--o-iron-900-hsl) / 80%) | o-bd-iron-80 | |
| 90% | hsl(var(--o-iron-900-hsl) / 90%) | o-bd-iron-90 | |
| 95% | hsl(var(--o-iron-900-hsl) / 95%) | o-bd-iron-95 |
Red
link Red| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-red-900-hsl) / 5%) | o-bd-red-5 | |
| 10% | hsl(var(--o-red-900-hsl) / 10%) | o-bd-red-10 | |
| 20% | hsl(var(--o-red-900-hsl) / 20%) | o-bd-red-20 | |
| 30% | hsl(var(--o-red-900-hsl) / 30%) | o-bd-red-30 | |
| 40% | hsl(var(--o-red-900-hsl) / 40%) | o-bd-red-40 | |
| 50% | hsl(var(--o-red-900-hsl) / 50%) | o-bd-red-50 | |
| 60% | hsl(var(--o-red-900-hsl) / 60%) | o-bd-red-60 | |
| 70% | hsl(var(--o-red-900-hsl) / 70%) | o-bd-red-70 | |
| 80% | hsl(var(--o-red-900-hsl) / 80%) | o-bd-red-80 | |
| 90% | hsl(var(--o-red-900-hsl) / 90%) | o-bd-red-90 | |
| 95% | hsl(var(--o-red-900-hsl) / 95%) | o-bd-red-95 |
Orange
link Orange| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-orange-900-hsl) / 5%) | o-bd-orange-5 | |
| 10% | hsl(var(--o-orange-900-hsl) / 10%) | o-bd-orange-10 | |
| 20% | hsl(var(--o-orange-900-hsl) / 20%) | o-bd-orange-20 | |
| 30% | hsl(var(--o-orange-900-hsl) / 30%) | o-bd-orange-30 | |
| 40% | hsl(var(--o-orange-900-hsl) / 40%) | o-bd-orange-40 | |
| 50% | hsl(var(--o-orange-900-hsl) / 50%) | o-bd-orange-50 | |
| 60% | hsl(var(--o-orange-900-hsl) / 60%) | o-bd-orange-60 | |
| 70% | hsl(var(--o-orange-900-hsl) / 70%) | o-bd-orange-70 | |
| 80% | hsl(var(--o-orange-900-hsl) / 80%) | o-bd-orange-80 | |
| 90% | hsl(var(--o-orange-900-hsl) / 90%) | o-bd-orange-90 | |
| 95% | hsl(var(--o-orange-900-hsl) / 95%) | o-bd-orange-95 |
Ochre
link Ochre| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-ochre-900-hsl) / 5%) | o-bd-ochre-5 | |
| 10% | hsl(var(--o-ochre-900-hsl) / 10%) | o-bd-ochre-10 | |
| 20% | hsl(var(--o-ochre-900-hsl) / 20%) | o-bd-ochre-20 | |
| 30% | hsl(var(--o-ochre-900-hsl) / 30%) | o-bd-ochre-30 | |
| 40% | hsl(var(--o-ochre-900-hsl) / 40%) | o-bd-ochre-40 | |
| 50% | hsl(var(--o-ochre-900-hsl) / 50%) | o-bd-ochre-50 | |
| 60% | hsl(var(--o-ochre-900-hsl) / 60%) | o-bd-ochre-60 | |
| 70% | hsl(var(--o-ochre-900-hsl) / 70%) | o-bd-ochre-70 | |
| 80% | hsl(var(--o-ochre-900-hsl) / 80%) | o-bd-ochre-80 | |
| 90% | hsl(var(--o-ochre-900-hsl) / 90%) | o-bd-ochre-90 | |
| 95% | hsl(var(--o-ochre-900-hsl) / 95%) | o-bd-ochre-95 |
Gold
link Gold| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-gold-900-hsl) / 5%) | o-bd-gold-5 | |
| 10% | hsl(var(--o-gold-900-hsl) / 10%) | o-bd-gold-10 | |
| 20% | hsl(var(--o-gold-900-hsl) / 20%) | o-bd-gold-20 | |
| 30% | hsl(var(--o-gold-900-hsl) / 30%) | o-bd-gold-30 | |
| 40% | hsl(var(--o-gold-900-hsl) / 40%) | o-bd-gold-40 | |
| 50% | hsl(var(--o-gold-900-hsl) / 50%) | o-bd-gold-50 | |
| 60% | hsl(var(--o-gold-900-hsl) / 60%) | o-bd-gold-60 | |
| 70% | hsl(var(--o-gold-900-hsl) / 70%) | o-bd-gold-70 | |
| 80% | hsl(var(--o-gold-900-hsl) / 80%) | o-bd-gold-80 | |
| 90% | hsl(var(--o-gold-900-hsl) / 90%) | o-bd-gold-90 | |
| 95% | hsl(var(--o-gold-900-hsl) / 95%) | o-bd-gold-95 |
Yellow
link Yellow| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-yellow-900-hsl) / 5%) | o-bd-yellow-5 | |
| 10% | hsl(var(--o-yellow-900-hsl) / 10%) | o-bd-yellow-10 | |
| 20% | hsl(var(--o-yellow-900-hsl) / 20%) | o-bd-yellow-20 | |
| 30% | hsl(var(--o-yellow-900-hsl) / 30%) | o-bd-yellow-30 | |
| 40% | hsl(var(--o-yellow-900-hsl) / 40%) | o-bd-yellow-40 | |
| 50% | hsl(var(--o-yellow-900-hsl) / 50%) | o-bd-yellow-50 | |
| 60% | hsl(var(--o-yellow-900-hsl) / 60%) | o-bd-yellow-60 | |
| 70% | hsl(var(--o-yellow-900-hsl) / 70%) | o-bd-yellow-70 | |
| 80% | hsl(var(--o-yellow-900-hsl) / 80%) | o-bd-yellow-80 | |
| 90% | hsl(var(--o-yellow-900-hsl) / 90%) | o-bd-yellow-90 | |
| 95% | hsl(var(--o-yellow-900-hsl) / 95%) | o-bd-yellow-95 |
Lime
link Lime| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-lime-900-hsl) / 5%) | o-bd-lime-5 | |
| 10% | hsl(var(--o-lime-900-hsl) / 10%) | o-bd-lime-10 | |
| 20% | hsl(var(--o-lime-900-hsl) / 20%) | o-bd-lime-20 | |
| 30% | hsl(var(--o-lime-900-hsl) / 30%) | o-bd-lime-30 | |
| 40% | hsl(var(--o-lime-900-hsl) / 40%) | o-bd-lime-40 | |
| 50% | hsl(var(--o-lime-900-hsl) / 50%) | o-bd-lime-50 | |
| 60% | hsl(var(--o-lime-900-hsl) / 60%) | o-bd-lime-60 | |
| 70% | hsl(var(--o-lime-900-hsl) / 70%) | o-bd-lime-70 | |
| 80% | hsl(var(--o-lime-900-hsl) / 80%) | o-bd-lime-80 | |
| 90% | hsl(var(--o-lime-900-hsl) / 90%) | o-bd-lime-90 | |
| 95% | hsl(var(--o-lime-900-hsl) / 95%) | o-bd-lime-95 |
Green
link Green| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-green-900-hsl) / 5%) | o-bd-green-5 | |
| 10% | hsl(var(--o-green-900-hsl) / 10%) | o-bd-green-10 | |
| 20% | hsl(var(--o-green-900-hsl) / 20%) | o-bd-green-20 | |
| 30% | hsl(var(--o-green-900-hsl) / 30%) | o-bd-green-30 | |
| 40% | hsl(var(--o-green-900-hsl) / 40%) | o-bd-green-40 | |
| 50% | hsl(var(--o-green-900-hsl) / 50%) | o-bd-green-50 | |
| 60% | hsl(var(--o-green-900-hsl) / 60%) | o-bd-green-60 | |
| 70% | hsl(var(--o-green-900-hsl) / 70%) | o-bd-green-70 | |
| 80% | hsl(var(--o-green-900-hsl) / 80%) | o-bd-green-80 | |
| 90% | hsl(var(--o-green-900-hsl) / 90%) | o-bd-green-90 | |
| 95% | hsl(var(--o-green-900-hsl) / 95%) | o-bd-green-95 |
Jade
link Jade| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-jade-900-hsl) / 5%) | o-bd-jade-5 | |
| 10% | hsl(var(--o-jade-900-hsl) / 10%) | o-bd-jade-10 | |
| 20% | hsl(var(--o-jade-900-hsl) / 20%) | o-bd-jade-20 | |
| 30% | hsl(var(--o-jade-900-hsl) / 30%) | o-bd-jade-30 | |
| 40% | hsl(var(--o-jade-900-hsl) / 40%) | o-bd-jade-40 | |
| 50% | hsl(var(--o-jade-900-hsl) / 50%) | o-bd-jade-50 | |
| 60% | hsl(var(--o-jade-900-hsl) / 60%) | o-bd-jade-60 | |
| 70% | hsl(var(--o-jade-900-hsl) / 70%) | o-bd-jade-70 | |
| 80% | hsl(var(--o-jade-900-hsl) / 80%) | o-bd-jade-80 | |
| 90% | hsl(var(--o-jade-900-hsl) / 90%) | o-bd-jade-90 | |
| 95% | hsl(var(--o-jade-900-hsl) / 95%) | o-bd-jade-95 |
Teal
link Teal| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-teal-900-hsl) / 5%) | o-bd-teal-5 | |
| 10% | hsl(var(--o-teal-900-hsl) / 10%) | o-bd-teal-10 | |
| 20% | hsl(var(--o-teal-900-hsl) / 20%) | o-bd-teal-20 | |
| 30% | hsl(var(--o-teal-900-hsl) / 30%) | o-bd-teal-30 | |
| 40% | hsl(var(--o-teal-900-hsl) / 40%) | o-bd-teal-40 | |
| 50% | hsl(var(--o-teal-900-hsl) / 50%) | o-bd-teal-50 | |
| 60% | hsl(var(--o-teal-900-hsl) / 60%) | o-bd-teal-60 | |
| 70% | hsl(var(--o-teal-900-hsl) / 70%) | o-bd-teal-70 | |
| 80% | hsl(var(--o-teal-900-hsl) / 80%) | o-bd-teal-80 | |
| 90% | hsl(var(--o-teal-900-hsl) / 90%) | o-bd-teal-90 | |
| 95% | hsl(var(--o-teal-900-hsl) / 95%) | o-bd-teal-95 |
Cyan
link Cyan| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-cyan-900-hsl) / 5%) | o-bd-cyan-5 | |
| 10% | hsl(var(--o-cyan-900-hsl) / 10%) | o-bd-cyan-10 | |
| 20% | hsl(var(--o-cyan-900-hsl) / 20%) | o-bd-cyan-20 | |
| 30% | hsl(var(--o-cyan-900-hsl) / 30%) | o-bd-cyan-30 | |
| 40% | hsl(var(--o-cyan-900-hsl) / 40%) | o-bd-cyan-40 | |
| 50% | hsl(var(--o-cyan-900-hsl) / 50%) | o-bd-cyan-50 | |
| 60% | hsl(var(--o-cyan-900-hsl) / 60%) | o-bd-cyan-60 | |
| 70% | hsl(var(--o-cyan-900-hsl) / 70%) | o-bd-cyan-70 | |
| 80% | hsl(var(--o-cyan-900-hsl) / 80%) | o-bd-cyan-80 | |
| 90% | hsl(var(--o-cyan-900-hsl) / 90%) | o-bd-cyan-90 | |
| 95% | hsl(var(--o-cyan-900-hsl) / 95%) | o-bd-cyan-95 |
Sky
link Sky| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-sky-900-hsl) / 5%) | o-bd-sky-5 | |
| 10% | hsl(var(--o-sky-900-hsl) / 10%) | o-bd-sky-10 | |
| 20% | hsl(var(--o-sky-900-hsl) / 20%) | o-bd-sky-20 | |
| 30% | hsl(var(--o-sky-900-hsl) / 30%) | o-bd-sky-30 | |
| 40% | hsl(var(--o-sky-900-hsl) / 40%) | o-bd-sky-40 | |
| 50% | hsl(var(--o-sky-900-hsl) / 50%) | o-bd-sky-50 | |
| 60% | hsl(var(--o-sky-900-hsl) / 60%) | o-bd-sky-60 | |
| 70% | hsl(var(--o-sky-900-hsl) / 70%) | o-bd-sky-70 | |
| 80% | hsl(var(--o-sky-900-hsl) / 80%) | o-bd-sky-80 | |
| 90% | hsl(var(--o-sky-900-hsl) / 90%) | o-bd-sky-90 | |
| 95% | hsl(var(--o-sky-900-hsl) / 95%) | o-bd-sky-95 |
Blue
link Blue| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-blue-900-hsl) / 5%) | o-bd-blue-5 | |
| 10% | hsl(var(--o-blue-900-hsl) / 10%) | o-bd-blue-10 | |
| 20% | hsl(var(--o-blue-900-hsl) / 20%) | o-bd-blue-20 | |
| 30% | hsl(var(--o-blue-900-hsl) / 30%) | o-bd-blue-30 | |
| 40% | hsl(var(--o-blue-900-hsl) / 40%) | o-bd-blue-40 | |
| 50% | hsl(var(--o-blue-900-hsl) / 50%) | o-bd-blue-50 | |
| 60% | hsl(var(--o-blue-900-hsl) / 60%) | o-bd-blue-60 | |
| 70% | hsl(var(--o-blue-900-hsl) / 70%) | o-bd-blue-70 | |
| 80% | hsl(var(--o-blue-900-hsl) / 80%) | o-bd-blue-80 | |
| 90% | hsl(var(--o-blue-900-hsl) / 90%) | o-bd-blue-90 | |
| 95% | hsl(var(--o-blue-900-hsl) / 95%) | o-bd-blue-95 |
Indigo
link Indigo| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-indigo-900-hsl) / 5%) | o-bd-indigo-5 | |
| 10% | hsl(var(--o-indigo-900-hsl) / 10%) | o-bd-indigo-10 | |
| 20% | hsl(var(--o-indigo-900-hsl) / 20%) | o-bd-indigo-20 | |
| 30% | hsl(var(--o-indigo-900-hsl) / 30%) | o-bd-indigo-30 | |
| 40% | hsl(var(--o-indigo-900-hsl) / 40%) | o-bd-indigo-40 | |
| 50% | hsl(var(--o-indigo-900-hsl) / 50%) | o-bd-indigo-50 | |
| 60% | hsl(var(--o-indigo-900-hsl) / 60%) | o-bd-indigo-60 | |
| 70% | hsl(var(--o-indigo-900-hsl) / 70%) | o-bd-indigo-70 | |
| 80% | hsl(var(--o-indigo-900-hsl) / 80%) | o-bd-indigo-80 | |
| 90% | hsl(var(--o-indigo-900-hsl) / 90%) | o-bd-indigo-90 | |
| 95% | hsl(var(--o-indigo-900-hsl) / 95%) | o-bd-indigo-95 |
Violet
link Violet| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-violet-900-hsl) / 5%) | o-bd-violet-5 | |
| 10% | hsl(var(--o-violet-900-hsl) / 10%) | o-bd-violet-10 | |
| 20% | hsl(var(--o-violet-900-hsl) / 20%) | o-bd-violet-20 | |
| 30% | hsl(var(--o-violet-900-hsl) / 30%) | o-bd-violet-30 | |
| 40% | hsl(var(--o-violet-900-hsl) / 40%) | o-bd-violet-40 | |
| 50% | hsl(var(--o-violet-900-hsl) / 50%) | o-bd-violet-50 | |
| 60% | hsl(var(--o-violet-900-hsl) / 60%) | o-bd-violet-60 | |
| 70% | hsl(var(--o-violet-900-hsl) / 70%) | o-bd-violet-70 | |
| 80% | hsl(var(--o-violet-900-hsl) / 80%) | o-bd-violet-80 | |
| 90% | hsl(var(--o-violet-900-hsl) / 90%) | o-bd-violet-90 | |
| 95% | hsl(var(--o-violet-900-hsl) / 95%) | o-bd-violet-95 |
Purple
link Purple| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-purple-900-hsl) / 5%) | o-bd-purple-5 | |
| 10% | hsl(var(--o-purple-900-hsl) / 10%) | o-bd-purple-10 | |
| 20% | hsl(var(--o-purple-900-hsl) / 20%) | o-bd-purple-20 | |
| 30% | hsl(var(--o-purple-900-hsl) / 30%) | o-bd-purple-30 | |
| 40% | hsl(var(--o-purple-900-hsl) / 40%) | o-bd-purple-40 | |
| 50% | hsl(var(--o-purple-900-hsl) / 50%) | o-bd-purple-50 | |
| 60% | hsl(var(--o-purple-900-hsl) / 60%) | o-bd-purple-60 | |
| 70% | hsl(var(--o-purple-900-hsl) / 70%) | o-bd-purple-70 | |
| 80% | hsl(var(--o-purple-900-hsl) / 80%) | o-bd-purple-80 | |
| 90% | hsl(var(--o-purple-900-hsl) / 90%) | o-bd-purple-90 | |
| 95% | hsl(var(--o-purple-900-hsl) / 95%) | o-bd-purple-95 |
Grape
link Grape| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-grape-900-hsl) / 5%) | o-bd-grape-5 | |
| 10% | hsl(var(--o-grape-900-hsl) / 10%) | o-bd-grape-10 | |
| 20% | hsl(var(--o-grape-900-hsl) / 20%) | o-bd-grape-20 | |
| 30% | hsl(var(--o-grape-900-hsl) / 30%) | o-bd-grape-30 | |
| 40% | hsl(var(--o-grape-900-hsl) / 40%) | o-bd-grape-40 | |
| 50% | hsl(var(--o-grape-900-hsl) / 50%) | o-bd-grape-50 | |
| 60% | hsl(var(--o-grape-900-hsl) / 60%) | o-bd-grape-60 | |
| 70% | hsl(var(--o-grape-900-hsl) / 70%) | o-bd-grape-70 | |
| 80% | hsl(var(--o-grape-900-hsl) / 80%) | o-bd-grape-80 | |
| 90% | hsl(var(--o-grape-900-hsl) / 90%) | o-bd-grape-90 | |
| 95% | hsl(var(--o-grape-900-hsl) / 95%) | o-bd-grape-95 |
Pink
link Pink| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-pink-900-hsl) / 5%) | o-bd-pink-5 | |
| 10% | hsl(var(--o-pink-900-hsl) / 10%) | o-bd-pink-10 | |
| 20% | hsl(var(--o-pink-900-hsl) / 20%) | o-bd-pink-20 | |
| 30% | hsl(var(--o-pink-900-hsl) / 30%) | o-bd-pink-30 | |
| 40% | hsl(var(--o-pink-900-hsl) / 40%) | o-bd-pink-40 | |
| 50% | hsl(var(--o-pink-900-hsl) / 50%) | o-bd-pink-50 | |
| 60% | hsl(var(--o-pink-900-hsl) / 60%) | o-bd-pink-60 | |
| 70% | hsl(var(--o-pink-900-hsl) / 70%) | o-bd-pink-70 | |
| 80% | hsl(var(--o-pink-900-hsl) / 80%) | o-bd-pink-80 | |
| 90% | hsl(var(--o-pink-900-hsl) / 90%) | o-bd-pink-90 | |
| 95% | hsl(var(--o-pink-900-hsl) / 95%) | o-bd-pink-95 |
Rose
link Rose| Opacity | CSS Variable | Utility Class | Sample |
|---|---|---|---|
| 5% | hsl(var(--o-rose-900-hsl) / 5%) | o-bd-rose-5 | |
| 10% | hsl(var(--o-rose-900-hsl) / 10%) | o-bd-rose-10 | |
| 20% | hsl(var(--o-rose-900-hsl) / 20%) | o-bd-rose-20 | |
| 30% | hsl(var(--o-rose-900-hsl) / 30%) | o-bd-rose-30 | |
| 40% | hsl(var(--o-rose-900-hsl) / 40%) | o-bd-rose-40 | |
| 50% | hsl(var(--o-rose-900-hsl) / 50%) | o-bd-rose-50 | |
| 60% | hsl(var(--o-rose-900-hsl) / 60%) | o-bd-rose-60 | |
| 70% | hsl(var(--o-rose-900-hsl) / 70%) | o-bd-rose-70 | |
| 80% | hsl(var(--o-rose-900-hsl) / 80%) | o-bd-rose-80 | |
| 90% | hsl(var(--o-rose-900-hsl) / 90%) | o-bd-rose-90 | |
| 95% | hsl(var(--o-rose-900-hsl) / 95%) | o-bd-rose-95 |