Background Colors

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

Responsive Backgrounds

link Responsive Backgrounds

Chromatic Responsive Colors

link Chromatic Responsive Colors

Caution

The responsive color samples are based on this website settings. They probably don’t match the colors you defined in your project.

Description	CSS Variable	Utility Class	Sample
Brand responsive color.	--o-brand	o-bg-brand
Accent responsive color.	--o-accent	o-bg-accent
Links responsive color.	--o-links	o-bg-links
Visited responsive color.	--o-visited	o-bg-visited

Neutral Responsive Colors

link Neutral Responsive Colors

Description	CSS Variable	Utility Class	Sample
Surface 1 responsive color.	--o-surface-1	o-surface-1
Surface 2 responsive color.	--o-surface-2	o-surface-2
Surface 3 responsive color.	--o-surface-3	o-surface-3
Surface 4 responsive color.	--o-surface-4	o-surface-4

Chromatic Responsive Surfaces

link Chromatic Responsive Surfaces

Description	CSS Variable	Utility Class	Sample
Brand surface 1 responsive color.	--o-surface-1-brand	o-surface-1-brand
Brand surface 2 responsive color.	--o-surface-2-brand	o-surface-2-brand
Brand surface 3 responsive color.	--o-surface-3-brand	o-surface-3-brand
Brand surface 4 responsive color.	--o-surface-4-brand	o-surface-4-brand
Accent surface 1 responsive color.	--o-surface-1-accent	o-surface-1-accent
Accent surface 2 responsive color.	--o-surface-2-accent	o-surface-2-accent
Accent surface 3 responsive color.	--o-surface-3-accent	o-surface-3-accent
Accent surface 4 responsive color.	--o-surface-4-accent	o-surface-4-accent
Links surface 1 responsive color.	--o-surface-1-links	o-surface-1-links
Links surface 2 responsive color.	--o-surface-2-links	o-surface-2-links
Links surface 3 responsive color.	--o-surface-3-links	o-surface-3-links
Links surface 4 responsive color.	--o-surface-4-links	o-surface-4-links
Visited surface 1 responsive color.	--o-surface-1-visited	o-surface-1-visited
Visited surface 2 responsive color.	--o-surface-2-visited	o-surface-2-visited
Visited surface 3 responsive color.	--o-surface-3-visited	o-surface-3-visited
Visited surface 4 responsive color.	--o-surface-4-visited	o-surface-4-visited

Fixed Backgrounds

link Fixed Backgrounds

Canvas

link Canvas

Shade	CSS Variable	Utility Class	Sample
000	--o-canvas-000	o-bg-canvas-000
015	--o-canvas-015	o-bg-canvas-015
025	--o-canvas-025	o-bg-canvas-025
050	--o-canvas-050	o-bg-canvas-050
075	--o-canvas-075	o-bg-canvas-075
085	--o-canvas-085	o-bg-canvas-085
100	--o-canvas-100	o-bg-canvas-100
200	--o-canvas-200	o-bg-canvas-200
300	--o-canvas-300	o-bg-canvas-300
400	--o-canvas-400	o-bg-canvas-400
500	--o-canvas-500	o-bg-canvas-500
600	--o-canvas-600	o-bg-canvas-600
700	--o-canvas-700	o-bg-canvas-700
800	--o-canvas-800	o-bg-canvas-800
900	--o-canvas-900	o-bg-canvas-900
1000	--o-canvas-1000	o-bg-canvas-1000

Brand

link Brand

Shade	CSS Variable	Utility Class	Sample
000	--o-brand-000	o-bg-brand-000
015	--o-brand-015	o-bg-brand-015
025	--o-brand-025	o-bg-brand-025
050	--o-brand-050	o-bg-brand-050
075	--o-brand-075	o-bg-brand-075
085	--o-brand-085	o-bg-brand-085
100	--o-brand-100	o-bg-brand-100
200	--o-brand-200	o-bg-brand-200
300	--o-brand-300	o-bg-brand-300
400	--o-brand-400	o-bg-brand-400
500	--o-brand-500	o-bg-brand-500
600	--o-brand-600	o-bg-brand-600
700	--o-brand-700	o-bg-brand-700
800	--o-brand-800	o-bg-brand-800
900	--o-brand-900	o-bg-brand-900
1000	--o-brand-1000	o-bg-brand-1000

Accent

link Accent

Shade	CSS Variable	Utility Class	Sample
000	--o-accent-000	o-bg-accent-000
015	--o-accent-015	o-bg-accent-015
025	--o-accent-025	o-bg-accent-025
050	--o-accent-050	o-bg-accent-050
075	--o-accent-075	o-bg-accent-075
085	--o-accent-085	o-bg-accent-085
100	--o-accent-100	o-bg-accent-100
200	--o-accent-200	o-bg-accent-200
300	--o-accent-300	o-bg-accent-300
400	--o-accent-400	o-bg-accent-400
500	--o-accent-500	o-bg-accent-500
600	--o-accent-600	o-bg-accent-600
700	--o-accent-700	o-bg-accent-700
800	--o-accent-800	o-bg-accent-800
900	--o-accent-900	o-bg-accent-900
1000	--o-accent-1000	o-bg-accent-1000

Links

link Links

Shade	CSS Variable	Utility Class	Sample
000	--o-links-000	o-bg-links-000
015	--o-links-015	o-bg-links-015
025	--o-links-025	o-bg-links-025
050	--o-links-050	o-bg-links-050
075	--o-links-075	o-bg-links-075
085	--o-links-085	o-bg-links-085
100	--o-links-100	o-bg-links-100
200	--o-links-200	o-bg-links-200
300	--o-links-300	o-bg-links-300
400	--o-links-400	o-bg-links-400
500	--o-links-500	o-bg-links-500
600	--o-links-600	o-bg-links-600
700	--o-links-700	o-bg-links-700
800	--o-links-800	o-bg-links-800
900	--o-links-900	o-bg-links-900
1000	--o-links-1000	o-bg-links-1000

Visited

link Visited

Shade	CSS Variable	Utility Class	Sample
000	--o-visited-000	o-bg-visited-000
015	--o-visited-015	o-bg-visited-015
025	--o-visited-025	o-bg-visited-025
050	--o-visited-050	o-bg-visited-050
075	--o-visited-075	o-bg-visited-075
085	--o-visited-085	o-bg-visited-085
100	--o-visited-100	o-bg-visited-100
200	--o-visited-200	o-bg-visited-200
300	--o-visited-300	o-bg-visited-300
400	--o-visited-400	o-bg-visited-400
500	--o-visited-500	o-bg-visited-500
600	--o-visited-600	o-bg-visited-600
700	--o-visited-700	o-bg-visited-700
800	--o-visited-800	o-bg-visited-800
900	--o-visited-900	o-bg-visited-900
1000	--o-visited-1000	o-bg-visited-1000

Mole

link Mole

Shade	CSS Variable	Utility Class	Sample
000	--o-mole-000	o-bg-mole-000
015	--o-mole-015	o-bg-mole-015
025	--o-mole-025	o-bg-mole-025
050	--o-mole-050	o-bg-mole-050
075	--o-mole-075	o-bg-mole-075
085	--o-mole-085	o-bg-mole-085
100	--o-mole-100	o-bg-mole-100
200	--o-mole-200	o-bg-mole-200
300	--o-mole-300	o-bg-mole-300
400	--o-mole-400	o-bg-mole-400
500	--o-mole-500	o-bg-mole-500
600	--o-mole-600	o-bg-mole-600
700	--o-mole-700	o-bg-mole-700
800	--o-mole-800	o-bg-mole-800
900	--o-mole-900	o-bg-mole-900
1000	--o-mole-1000	o-bg-mole-1000

Lead

link Lead

Shade	CSS Variable	Utility Class	Sample
000	--o-lead-000	o-bg-lead-000
015	--o-lead-015	o-bg-lead-015
025	--o-lead-025	o-bg-lead-025
050	--o-lead-050	o-bg-lead-050
075	--o-lead-075	o-bg-lead-075
085	--o-lead-085	o-bg-lead-085
100	--o-lead-100	o-bg-lead-100
200	--o-lead-200	o-bg-lead-200
300	--o-lead-300	o-bg-lead-300
400	--o-lead-400	o-bg-lead-400
500	--o-lead-500	o-bg-lead-500
600	--o-lead-600	o-bg-lead-600
700	--o-lead-700	o-bg-lead-700
800	--o-lead-800	o-bg-lead-800
900	--o-lead-900	o-bg-lead-900
1000	--o-lead-1000	o-bg-lead-1000

Pipe

link Pipe

Shade	CSS Variable	Utility Class	Sample
000	--o-pipe-000	o-bg-pipe-000
015	--o-pipe-015	o-bg-pipe-015
025	--o-pipe-025	o-bg-pipe-025
050	--o-pipe-050	o-bg-pipe-050
075	--o-pipe-075	o-bg-pipe-075
085	--o-pipe-085	o-bg-pipe-085
100	--o-pipe-100	o-bg-pipe-100
200	--o-pipe-200	o-bg-pipe-200
300	--o-pipe-300	o-bg-pipe-300
400	--o-pipe-400	o-bg-pipe-400
500	--o-pipe-500	o-bg-pipe-500
600	--o-pipe-600	o-bg-pipe-600
700	--o-pipe-700	o-bg-pipe-700
800	--o-pipe-800	o-bg-pipe-800
900	--o-pipe-900	o-bg-pipe-900
1000	--o-pipe-1000	o-bg-pipe-1000

Denim

link Denim

Shade	CSS Variable	Utility Class	Sample
000	--o-denim-000	o-bg-denim-000
015	--o-denim-015	o-bg-denim-015
025	--o-denim-025	o-bg-denim-025
050	--o-denim-050	o-bg-denim-050
075	--o-denim-075	o-bg-denim-075
085	--o-denim-085	o-bg-denim-085
100	--o-denim-100	o-bg-denim-100
200	--o-denim-200	o-bg-denim-200
300	--o-denim-300	o-bg-denim-300
400	--o-denim-400	o-bg-denim-400
500	--o-denim-500	o-bg-denim-500
600	--o-denim-600	o-bg-denim-600
700	--o-denim-700	o-bg-denim-700
800	--o-denim-800	o-bg-denim-800
900	--o-denim-900	o-bg-denim-900
1000	--o-denim-1000	o-bg-denim-1000

Grey

link Grey

Shade	CSS Variable	Utility Class	Sample
000	--o-grey-000	o-bg-grey-000
015	--o-grey-015	o-bg-grey-015
025	--o-grey-025	o-bg-grey-025
050	--o-grey-050	o-bg-grey-050
075	--o-grey-075	o-bg-grey-075
085	--o-grey-085	o-bg-grey-085
100	--o-grey-100	o-bg-grey-100
200	--o-grey-200	o-bg-grey-200
300	--o-grey-300	o-bg-grey-300
400	--o-grey-400	o-bg-grey-400
500	--o-grey-500	o-bg-grey-500
600	--o-grey-600	o-bg-grey-600
700	--o-grey-700	o-bg-grey-700
800	--o-grey-800	o-bg-grey-800
900	--o-grey-900	o-bg-grey-900
1000	--o-grey-1000	o-bg-grey-1000

Slate

link Slate

Shade	CSS Variable	Utility Class	Sample
000	--o-slate-000	o-bg-slate-000
015	--o-slate-015	o-bg-slate-015
025	--o-slate-025	o-bg-slate-025
050	--o-slate-050	o-bg-slate-050
075	--o-slate-075	o-bg-slate-075
085	--o-slate-085	o-bg-slate-085
100	--o-slate-100	o-bg-slate-100
200	--o-slate-200	o-bg-slate-200
300	--o-slate-300	o-bg-slate-300
400	--o-slate-400	o-bg-slate-400
500	--o-slate-500	o-bg-slate-500
600	--o-slate-600	o-bg-slate-600
700	--o-slate-700	o-bg-slate-700
800	--o-slate-800	o-bg-slate-800
900	--o-slate-900	o-bg-slate-900
1000	--o-slate-1000	o-bg-slate-1000

Zinc

link Zinc

Shade	CSS Variable	Utility Class	Sample
000	--o-zinc-000	o-bg-zinc-000
015	--o-zinc-015	o-bg-zinc-015
025	--o-zinc-025	o-bg-zinc-025
050	--o-zinc-050	o-bg-zinc-050
075	--o-zinc-075	o-bg-zinc-075
085	--o-zinc-085	o-bg-zinc-085
100	--o-zinc-100	o-bg-zinc-100
200	--o-zinc-200	o-bg-zinc-200
300	--o-zinc-300	o-bg-zinc-300
400	--o-zinc-400	o-bg-zinc-400
500	--o-zinc-500	o-bg-zinc-500
600	--o-zinc-600	o-bg-zinc-600
700	--o-zinc-700	o-bg-zinc-700
800	--o-zinc-800	o-bg-zinc-800
900	--o-zinc-900	o-bg-zinc-900
1000	--o-zinc-1000	o-bg-zinc-1000

Steel

link Steel

Shade	CSS Variable	Utility Class	Sample
000	--o-steel-000	o-bg-steel-000
015	--o-steel-015	o-bg-steel-015
025	--o-steel-025	o-bg-steel-025
050	--o-steel-050	o-bg-steel-050
075	--o-steel-075	o-bg-steel-075
085	--o-steel-085	o-bg-steel-085
100	--o-steel-100	o-bg-steel-100
200	--o-steel-200	o-bg-steel-200
300	--o-steel-300	o-bg-steel-300
400	--o-steel-400	o-bg-steel-400
500	--o-steel-500	o-bg-steel-500
600	--o-steel-600	o-bg-steel-600
700	--o-steel-700	o-bg-steel-700
800	--o-steel-800	o-bg-steel-800
900	--o-steel-900	o-bg-steel-900
1000	--o-steel-1000	o-bg-steel-1000

Iron

link Iron

Shade	CSS Variable	Utility Class	Sample
000	--o-iron-000	o-bg-iron-000
015	--o-iron-015	o-bg-iron-015
025	--o-iron-025	o-bg-iron-025
050	--o-iron-050	o-bg-iron-050
075	--o-iron-075	o-bg-iron-075
085	--o-iron-085	o-bg-iron-085
100	--o-iron-100	o-bg-iron-100
200	--o-iron-200	o-bg-iron-200
300	--o-iron-300	o-bg-iron-300
400	--o-iron-400	o-bg-iron-400
500	--o-iron-500	o-bg-iron-500
600	--o-iron-600	o-bg-iron-600
700	--o-iron-700	o-bg-iron-700
800	--o-iron-800	o-bg-iron-800
900	--o-iron-900	o-bg-iron-900
1000	--o-iron-1000	o-bg-iron-1000

Red

link Red

Shade	CSS Variable	Utility Class	Sample
000	--o-red-000	o-bg-red-000
015	--o-red-015	o-bg-red-015
025	--o-red-025	o-bg-red-025
050	--o-red-050	o-bg-red-050
075	--o-red-075	o-bg-red-075
085	--o-red-085	o-bg-red-085
100	--o-red-100	o-bg-red-100
200	--o-red-200	o-bg-red-200
300	--o-red-300	o-bg-red-300
400	--o-red-400	o-bg-red-400
500	--o-red-500	o-bg-red-500
600	--o-red-600	o-bg-red-600
700	--o-red-700	o-bg-red-700
800	--o-red-800	o-bg-red-800
900	--o-red-900	o-bg-red-900
1000	--o-red-1000	o-bg-red-1000

Orange

link Orange

Shade	CSS Variable	Utility Class	Sample
000	--o-orange-000	o-bg-orange-000
015	--o-orange-015	o-bg-orange-015
025	--o-orange-025	o-bg-orange-025
050	--o-orange-050	o-bg-orange-050
075	--o-orange-075	o-bg-orange-075
085	--o-orange-085	o-bg-orange-085
100	--o-orange-100	o-bg-orange-100
200	--o-orange-200	o-bg-orange-200
300	--o-orange-300	o-bg-orange-300
400	--o-orange-400	o-bg-orange-400
500	--o-orange-500	o-bg-orange-500
600	--o-orange-600	o-bg-orange-600
700	--o-orange-700	o-bg-orange-700
800	--o-orange-800	o-bg-orange-800
900	--o-orange-900	o-bg-orange-900
1000	--o-orange-1000	o-bg-orange-1000

Ochre

link Ochre

Shade	CSS Variable	Utility Class	Sample
000	--o-ochre-000	o-bg-ochre-000
015	--o-ochre-015	o-bg-ochre-015
025	--o-ochre-025	o-bg-ochre-025
050	--o-ochre-050	o-bg-ochre-050
075	--o-ochre-075	o-bg-ochre-075
085	--o-ochre-085	o-bg-ochre-085
100	--o-ochre-100	o-bg-ochre-100
200	--o-ochre-200	o-bg-ochre-200
300	--o-ochre-300	o-bg-ochre-300
400	--o-ochre-400	o-bg-ochre-400
500	--o-ochre-500	o-bg-ochre-500
600	--o-ochre-600	o-bg-ochre-600
700	--o-ochre-700	o-bg-ochre-700
800	--o-ochre-800	o-bg-ochre-800
900	--o-ochre-900	o-bg-ochre-900
1000	--o-ochre-1000	o-bg-ochre-1000

Gold

link Gold

Shade	CSS Variable	Utility Class	Sample
000	--o-gold-000	o-bg-gold-000
015	--o-gold-015	o-bg-gold-015
025	--o-gold-025	o-bg-gold-025
050	--o-gold-050	o-bg-gold-050
075	--o-gold-075	o-bg-gold-075
085	--o-gold-085	o-bg-gold-085
100	--o-gold-100	o-bg-gold-100
200	--o-gold-200	o-bg-gold-200
300	--o-gold-300	o-bg-gold-300
400	--o-gold-400	o-bg-gold-400
500	--o-gold-500	o-bg-gold-500
600	--o-gold-600	o-bg-gold-600
700	--o-gold-700	o-bg-gold-700
800	--o-gold-800	o-bg-gold-800
900	--o-gold-900	o-bg-gold-900
1000	--o-gold-1000	o-bg-gold-1000

Yellow

link Yellow

Shade	CSS Variable	Utility Class	Sample
000	--o-yellow-000	o-bg-yellow-000
015	--o-yellow-015	o-bg-yellow-015
025	--o-yellow-025	o-bg-yellow-025
050	--o-yellow-050	o-bg-yellow-050
075	--o-yellow-075	o-bg-yellow-075
085	--o-yellow-085	o-bg-yellow-085
100	--o-yellow-100	o-bg-yellow-100
200	--o-yellow-200	o-bg-yellow-200
300	--o-yellow-300	o-bg-yellow-300
400	--o-yellow-400	o-bg-yellow-400
500	--o-yellow-500	o-bg-yellow-500
600	--o-yellow-600	o-bg-yellow-600
700	--o-yellow-700	o-bg-yellow-700
800	--o-yellow-800	o-bg-yellow-800
900	--o-yellow-900	o-bg-yellow-900
1000	--o-yellow-1000	o-bg-yellow-1000

Lime

link Lime

Shade	CSS Variable	Utility Class	Sample
000	--o-lime-000	o-bg-lime-000
015	--o-lime-015	o-bg-lime-015
025	--o-lime-025	o-bg-lime-025
050	--o-lime-050	o-bg-lime-050
075	--o-lime-075	o-bg-lime-075
085	--o-lime-085	o-bg-lime-085
100	--o-lime-100	o-bg-lime-100
200	--o-lime-200	o-bg-lime-200
300	--o-lime-300	o-bg-lime-300
400	--o-lime-400	o-bg-lime-400
500	--o-lime-500	o-bg-lime-500
600	--o-lime-600	o-bg-lime-600
700	--o-lime-700	o-bg-lime-700
800	--o-lime-800	o-bg-lime-800
900	--o-lime-900	o-bg-lime-900
1000	--o-lime-1000	o-bg-lime-1000

Green

link Green

Shade	CSS Variable	Utility Class	Sample
000	--o-green-000	o-bg-green-000
015	--o-green-015	o-bg-green-015
025	--o-green-025	o-bg-green-025
050	--o-green-050	o-bg-green-050
075	--o-green-075	o-bg-green-075
085	--o-green-085	o-bg-green-085
100	--o-green-100	o-bg-green-100
200	--o-green-200	o-bg-green-200
300	--o-green-300	o-bg-green-300
400	--o-green-400	o-bg-green-400
500	--o-green-500	o-bg-green-500
600	--o-green-600	o-bg-green-600
700	--o-green-700	o-bg-green-700
800	--o-green-800	o-bg-green-800
900	--o-green-900	o-bg-green-900
1000	--o-green-1000	o-bg-green-1000

Jade

link Jade

Shade	CSS Variable	Utility Class	Sample
000	--o-jade-000	o-bg-jade-000
015	--o-jade-015	o-bg-jade-015
025	--o-jade-025	o-bg-jade-025
050	--o-jade-050	o-bg-jade-050
075	--o-jade-075	o-bg-jade-075
085	--o-jade-085	o-bg-jade-085
100	--o-jade-100	o-bg-jade-100
200	--o-jade-200	o-bg-jade-200
300	--o-jade-300	o-bg-jade-300
400	--o-jade-400	o-bg-jade-400
500	--o-jade-500	o-bg-jade-500
600	--o-jade-600	o-bg-jade-600
700	--o-jade-700	o-bg-jade-700
800	--o-jade-800	o-bg-jade-800
900	--o-jade-900	o-bg-jade-900
1000	--o-jade-1000	o-bg-jade-1000

Teal

link Teal

Shade	CSS Variable	Utility Class	Sample
000	--o-teal-000	o-bg-teal-000
015	--o-teal-015	o-bg-teal-015
025	--o-teal-025	o-bg-teal-025
050	--o-teal-050	o-bg-teal-050
075	--o-teal-075	o-bg-teal-075
085	--o-teal-085	o-bg-teal-085
100	--o-teal-100	o-bg-teal-100
200	--o-teal-200	o-bg-teal-200
300	--o-teal-300	o-bg-teal-300
400	--o-teal-400	o-bg-teal-400
500	--o-teal-500	o-bg-teal-500
600	--o-teal-600	o-bg-teal-600
700	--o-teal-700	o-bg-teal-700
800	--o-teal-800	o-bg-teal-800
900	--o-teal-900	o-bg-teal-900
1000	--o-teal-1000	o-bg-teal-1000

Cyan

link Cyan

Shade	CSS Variable	Utility Class	Sample
000	--o-cyan-000	o-bg-cyan-000
015	--o-cyan-015	o-bg-cyan-015
025	--o-cyan-025	o-bg-cyan-025
050	--o-cyan-050	o-bg-cyan-050
075	--o-cyan-075	o-bg-cyan-075
085	--o-cyan-085	o-bg-cyan-085
100	--o-cyan-100	o-bg-cyan-100
200	--o-cyan-200	o-bg-cyan-200
300	--o-cyan-300	o-bg-cyan-300
400	--o-cyan-400	o-bg-cyan-400
500	--o-cyan-500	o-bg-cyan-500
600	--o-cyan-600	o-bg-cyan-600
700	--o-cyan-700	o-bg-cyan-700
800	--o-cyan-800	o-bg-cyan-800
900	--o-cyan-900	o-bg-cyan-900
1000	--o-cyan-1000	o-bg-cyan-1000

Sky

link Sky

Shade	CSS Variable	Utility Class	Sample
000	--o-sky-000	o-bg-sky-000
015	--o-sky-015	o-bg-sky-015
025	--o-sky-025	o-bg-sky-025
050	--o-sky-050	o-bg-sky-050
075	--o-sky-075	o-bg-sky-075
085	--o-sky-085	o-bg-sky-085
100	--o-sky-100	o-bg-sky-100
200	--o-sky-200	o-bg-sky-200
300	--o-sky-300	o-bg-sky-300
400	--o-sky-400	o-bg-sky-400
500	--o-sky-500	o-bg-sky-500
600	--o-sky-600	o-bg-sky-600
700	--o-sky-700	o-bg-sky-700
800	--o-sky-800	o-bg-sky-800
900	--o-sky-900	o-bg-sky-900
1000	--o-sky-1000	o-bg-sky-1000

Blue

link Blue

Shade	CSS Variable	Utility Class	Sample
000	--o-blue-000	o-bg-blue-000
015	--o-blue-015	o-bg-blue-015
025	--o-blue-025	o-bg-blue-025
050	--o-blue-050	o-bg-blue-050
075	--o-blue-075	o-bg-blue-075
085	--o-blue-085	o-bg-blue-085
100	--o-blue-100	o-bg-blue-100
200	--o-blue-200	o-bg-blue-200
300	--o-blue-300	o-bg-blue-300
400	--o-blue-400	o-bg-blue-400
500	--o-blue-500	o-bg-blue-500
600	--o-blue-600	o-bg-blue-600
700	--o-blue-700	o-bg-blue-700
800	--o-blue-800	o-bg-blue-800
900	--o-blue-900	o-bg-blue-900
1000	--o-blue-1000	o-bg-blue-1000

Indigo

link Indigo

Shade	CSS Variable	Utility Class	Sample
000	--o-indigo-000	o-bg-indigo-000
015	--o-indigo-015	o-bg-indigo-015
025	--o-indigo-025	o-bg-indigo-025
050	--o-indigo-050	o-bg-indigo-050
075	--o-indigo-075	o-bg-indigo-075
085	--o-indigo-085	o-bg-indigo-085
100	--o-indigo-100	o-bg-indigo-100
200	--o-indigo-200	o-bg-indigo-200
300	--o-indigo-300	o-bg-indigo-300
400	--o-indigo-400	o-bg-indigo-400
500	--o-indigo-500	o-bg-indigo-500
600	--o-indigo-600	o-bg-indigo-600
700	--o-indigo-700	o-bg-indigo-700
800	--o-indigo-800	o-bg-indigo-800
900	--o-indigo-900	o-bg-indigo-900
1000	--o-indigo-1000	o-bg-indigo-1000

Violet

link Violet

Shade	CSS Variable	Utility Class	Sample
000	--o-violet-000	o-bg-violet-000
015	--o-violet-015	o-bg-violet-015
025	--o-violet-025	o-bg-violet-025
050	--o-violet-050	o-bg-violet-050
075	--o-violet-075	o-bg-violet-075
085	--o-violet-085	o-bg-violet-085
100	--o-violet-100	o-bg-violet-100
200	--o-violet-200	o-bg-violet-200
300	--o-violet-300	o-bg-violet-300
400	--o-violet-400	o-bg-violet-400
500	--o-violet-500	o-bg-violet-500
600	--o-violet-600	o-bg-violet-600
700	--o-violet-700	o-bg-violet-700
800	--o-violet-800	o-bg-violet-800
900	--o-violet-900	o-bg-violet-900
1000	--o-violet-1000	o-bg-violet-1000

Purple

link Purple

Shade	CSS Variable	Utility Class	Sample
000	--o-purple-000	o-bg-purple-000
015	--o-purple-015	o-bg-purple-015
025	--o-purple-025	o-bg-purple-025
050	--o-purple-050	o-bg-purple-050
075	--o-purple-075	o-bg-purple-075
085	--o-purple-085	o-bg-purple-085
100	--o-purple-100	o-bg-purple-100
200	--o-purple-200	o-bg-purple-200
300	--o-purple-300	o-bg-purple-300
400	--o-purple-400	o-bg-purple-400
500	--o-purple-500	o-bg-purple-500
600	--o-purple-600	o-bg-purple-600
700	--o-purple-700	o-bg-purple-700
800	--o-purple-800	o-bg-purple-800
900	--o-purple-900	o-bg-purple-900
1000	--o-purple-1000	o-bg-purple-1000

Grape

link Grape

Shade	CSS Variable	Utility Class	Sample
000	--o-grape-000	o-bg-grape-000
015	--o-grape-015	o-bg-grape-015
025	--o-grape-025	o-bg-grape-025
050	--o-grape-050	o-bg-grape-050
075	--o-grape-075	o-bg-grape-075
085	--o-grape-085	o-bg-grape-085
100	--o-grape-100	o-bg-grape-100
200	--o-grape-200	o-bg-grape-200
300	--o-grape-300	o-bg-grape-300
400	--o-grape-400	o-bg-grape-400
500	--o-grape-500	o-bg-grape-500
600	--o-grape-600	o-bg-grape-600
700	--o-grape-700	o-bg-grape-700
800	--o-grape-800	o-bg-grape-800
900	--o-grape-900	o-bg-grape-900
1000	--o-grape-1000	o-bg-grape-1000

Pink

link Pink

Shade	CSS Variable	Utility Class	Sample
000	--o-pink-000	o-bg-pink-000
015	--o-pink-015	o-bg-pink-015
025	--o-pink-025	o-bg-pink-025
050	--o-pink-050	o-bg-pink-050
075	--o-pink-075	o-bg-pink-075
085	--o-pink-085	o-bg-pink-085
100	--o-pink-100	o-bg-pink-100
200	--o-pink-200	o-bg-pink-200
300	--o-pink-300	o-bg-pink-300
400	--o-pink-400	o-bg-pink-400
500	--o-pink-500	o-bg-pink-500
600	--o-pink-600	o-bg-pink-600
700	--o-pink-700	o-bg-pink-700
800	--o-pink-800	o-bg-pink-800
900	--o-pink-900	o-bg-pink-900
1000	--o-pink-1000	o-bg-pink-1000

Rose

link Rose

Shade	CSS Variable	Utility Class	Sample
000	--o-rose-000	o-bg-rose-000
015	--o-rose-015	o-bg-rose-015
025	--o-rose-025	o-bg-rose-025
050	--o-rose-050	o-bg-rose-050
075	--o-rose-075	o-bg-rose-075
085	--o-rose-085	o-bg-rose-085
100	--o-rose-100	o-bg-rose-100
200	--o-rose-200	o-bg-rose-200
300	--o-rose-300	o-bg-rose-300
400	--o-rose-400	o-bg-rose-400
500	--o-rose-500	o-bg-rose-500
600	--o-rose-600	o-bg-rose-600
700	--o-rose-700	o-bg-rose-700
800	--o-rose-800	o-bg-rose-800
900	--o-rose-900	o-bg-rose-900
1000	--o-rose-1000	o-bg-rose-1000