Backdrop Colors CheatSheet

Ce contenu n’est pas encore disponible dans votre langue.

This page lists all Backdrop Colors CSS custom properties and utility classes available in the OxyProps Framework

Target CSS properties

bricks
oxygen

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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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

Opacity	CSS Variable	Utility Class
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`