PDIS Design System Color Generator

Brand

Accent

Information

Warning

Color Schemes

Light Theme

brandbrand40
brand Strongbrand30
On brandbrand100
brand Flatbrand90
brand Flat Strongbrand80
On brand Flatbrand10
accentaccent40
accent Strongaccent30
On accentaccent100
accent Flataccent90
accent Flat Strongaccent80
On accent Flataccent10
positivepositive40
positive Strongpositive30
On positivepositive100
positive Flatpositive90
positive Flat Strongpositive80
On positive Flatpositive10
negativenegative40
negative Strongnegative30
On negativenegative100
negative Flatnegative90
negative Flat Strongnegative80
On negative Flatnegative10
informationinformation40
information Stronginformation30
On informationinformation100
information Flatinformation90
information Flat Stronginformation80
On information Flatinformation10
warningwarning40
warning Strongwarning30
On warningwarning100
warning Flatwarning90
warning Flat Strongwarning80
On warning Flatwarning10
BackgroundNetural99
On BackgroundNetural10
SurfaceNetural99
Surface at +1+ 5% Brand
Surface at +2+ 8% Brand
Surface at +3+ 11% Brand
Surface at +4+ 12% Brand
Surface at +5+ 14% Brand
On SurfaceNeutral10
Surface VariantNeutral-Variant90
On Surface VariantNeutral-Variant30
OutlineNeutral-Variant50

Dark Theme

brandbrand80
brand Strongbrand90
On brandbrand20
brand Flatbrand30
brand Flat Strongbrand40
On brand Flatbrand90
accentaccent80
accent Strongaccent90
On accentaccent20
accent Flataccent30
accent Flat Strongaccent40
On accent Flataccent90
positivepositive80
positive Strongpositive90
On positivepositive20
positive Flatpositive30
positive Flat Strongpositive40
On positive Flatpositive90
negativenegative80
negative Strongnegative90
On negativenegative20
negative Flatnegative30
negative Flat Strongnegative40
On negative Flatnegative90
informationinformation80
information Stronginformation90
On informationinformation20
information Flatinformation30
information Flat Stronginformation40
On information Flatinformation90
warningwarning80
warning Strongwarning90
On warningwarning20
warning Flatwarning30
warning Flat Strongwarning40
On warning Flatwarning90
BackgroundNetural10
On BackgroundNetural90
SurfaceNetural10
Surface at +1+ 5% Brand
Surface at +2+ 8% Brand
Surface at +3+ 11% Brand
Surface at +4+ 12% Brand
Surface at +5+ 14% Brand
On SurfaceNeutral90
Surface VariantNeutral-Variant30
On Surface VariantNeutral-Variant80
OutlineNeutral-Variant60

CSS

:root {
  --brand: ;
  --brand-strong: ;
  --on-brand: ;
  --brand-flat: ;
  --brand-flat-strong: ;
  --on-brand-flat: ;
  --accent: ;
  --accent-strong: ;
  --on-accent: ;
  --accent-flat: ;
  --accent-flat-strong: ;
  --on-accent-flat: ;
  --positive: ;
  --positive-strong: ;
  --on-positive: ;
  --positive-flat: ;
  --positive-flat-strong: ;
  --on-positive-flat: ;
  --negative: ;
  --negative-strong: ;
  --on-negative: ;
  --negative-flat: ;
  --negative-flat-strong: ;
  --on-negative-flat: ;
  --information: ;
  --information-strong: ;
  --on-information: ;
  --information-flat: ;
  --information-flat-strong: ;
  --on-information-flat: ;
  --warning: ;
  --warning-strong: ;
  --on-warning: ;
  --warning-flat: ;
  --warning-flat-strong: ;
  --on-warning-flat: ;
  --surface: ;
  --surface-1: ;
  --surface-2: ;
  --surface-3: ;
  --surface-4: ;
  --surface-5: ;
  --on-surface: ;
  --surface-variant: ;
  --on-surface-variant: ;
  --outline: ;
  --background: #ffffff;
  --on-background: ;
}
.darkmode {
  --brand: ;
  --brand-strong: ;
  --on-brand: ;
  --brand-flat: ;
  --brand-flat-strong: ;
  --on-brand-flat: ;
  --accent: ;
  --accent-strong: ;
  --on-accent: ;
  --accent-flat: ;
  --accent-flat-strong: ;
  --on-accent-flat: ;
  --positive: ;
  --positive-strong: ;
  --on-positive: ;
  --positive-flat: ;
  --positive-flat-strong: ;
  --on-positive-flat: ;
  --negative: ;
  --negative-strong: ;
  --on-negative: ;
  --negative-flat: ;
  --negative-flat-strong: ;
  --on-negative-flat: ;
  --information: ;
  --information-strong: ;
  --on-information: ;
  --information-flat: ;
  --information-flat-strong: ;
  --on-information-flat: ;
  --warning: ;
  --warning-strong: ;
  --on-warning: ;
  --warning-flat: ;
  --warning-flat-strong: ;
  --on-warning-flat: ;
  --surface: ;
  --surface-1: ;
  --surface-2: ; 
  --surface-3: ;
  --surface-4: ;
  --surface-5: ;
  --on-surface: ;
  --surface-variant: ;
  --on-surface-variant: ;
  --outline: ;
  --background: ;
  --on-background: ;
}

Brand

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Accent

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Positive

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Negative

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Information

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Warning

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Netural

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100

Neutral-Variant

0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100