Aller au contenu

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

link Target CSS properties
.custom-link Custom CSS
root {
text-decoration-style: underline;
text-decoration-color: hsl(var(--o-accent-500-hsl) / 50%);
}
.my-svg Custom CSS
root {
fill: hsl(var(--o-canvas-300-hsl) / 85%);
stroke: hsl(var(--o-brand-400-hsl) / 85%);
}
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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
OpacityCSS VariableUtility ClassSample
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