Colors
DBP Color System
Light Mode
| Name | Variable | Color | Hex | RGB |
|---|---|---|---|---|
| Background | --dbp-override-background |
#ffffff |
rgb(255, 255, 255) |
|
| Content | --dbp-override-content |
#222120 |
rgb(34, 33, 32) |
|
| Content surface | --dbp-override-content-surface |
--dbp-override-content |
||
| On content surface | --dbp-override-on-content-surface |
--dbp-override-background |
||
| Border | --dbp-override-border |
1px solid #222120 |
||
| Border radius | --dbp-override-border-radius |
0px |
||
| Primary | --dbp-override-primary |
#3775c1 |
rgb(55, 117, 193) |
|
| Primary surface | --dbp-override-primary-surface |
--dbp-override-primary |
||
| On primary surface | --dbp-override-on-primary-surface |
--dbp-override-on-content-surface |
||
| Primary surface border color | --dbp-override-primary-surface-border-color |
--dbp-override-primary |
||
| Secondary | --dbp-override-secondary |
#222120 |
rgb(34, 33, 32) |
|
| Secondary surface | --dbp-override-secondary-surface |
#ffffff |
rgb(255, 255, 255) |
|
| On secondary surface | --dbp-override-on-secondary-surface |
#222120 |
rgb(34, 33, 32) |
|
| Secondary surface border color | --dbp-override-secondary-surface-border-color |
--dbp-override-secondary |
||
| Muted | --dbp-override-muted |
#767676 |
rgb(118, 118, 118) |
|
| Muted surface | --dbp-override-muted-surface |
--dbp-override-muted |
||
| On muted surface | --dbp-override-on-muted-surface |
--dbp-override-on-content-surface |
||
| Muted surface border color | --dbp-override-muted-surface-border-color |
--dbp-override-muted |
||
| Accent | --dbp-override-accent |
#9e1e4d |
rgb(158, 30, 77) |
|
| Accent surface | --dbp-override-accent-surface |
--dbp-override-accent |
||
| On accent surface | --dbp-override-on-accent-surface |
--dbp-override-on-content-surface |
||
| Accent surface border color | --dbp-override-accent-surface-border-color |
--dbp-override-accent |
||
| Info | --dbp-override-info |
#38808a |
rgb(56, 128, 138) |
|
| Info surface | --dbp-override-info-surface |
--dbp-override-info |
||
| On info surface | --dbp-override-on-info-surface |
--dbp-override-on-content-surface |
||
| Info surface border color | --dbp-override-info-surface-border-color |
--dbp-override-info |
||
| Success | --dbp-override-success |
#338555 |
rgb(51, 133, 85) |
|
| Success surface | --dbp-override-success-surface |
#5ec189 |
rgb(94, 193, 137) |
|
| On success surface | --dbp-override-on-success-surface |
#222120 |
rgb(34, 33, 32) |
|
| Success surface border color | --dbp-override-success-surface-border-color |
--dbp-override-success |
||
| Warning | --dbp-override-warning |
#bf8808 |
rgb(191, 136, 8) |
|
| Warning surface | --dbp-override-warning-surface |
#f9cc66 |
rgb(249, 204, 102) |
|
| On warning surface | --dbp-override-on-warning-surface |
#222120 |
rgb(34, 33, 32) |
|
| Warning surface border color | --dbp-override-warning-surface-border-color |
--dbp-override-warning |
||
| Danger | --dbp-override-danger |
#cc3232 |
rgb(204, 50, 50) |
|
| Danger surface | --dbp-override-danger-surface |
--dbp-override-danger |
||
| On danger surface | --dbp-override-on-danger-surface |
--dbp-override-on-content-surface |
||
| Danger surface border color | --dbp-override-danger-surface-border-color |
--dbp-override-danger |
||
| Hover Background Color | --dbp-override-hover-background-color |
not set | ||
| Hover color | --dbp-override-hover-color |
not set |
Dark Mode
| Name | Variable | Color | Hex | RGB |
|---|---|---|---|---|
| Background | --dbp-override-background |
#222120 |
rgb(34, 33, 32) |
|
| Content | --dbp-override-content |
#ffffff |
rgb(255, 255, 255) |
|
| Content surface | --dbp-override-content-surface |
--dbp-override-content |
||
| On content surface | --dbp-override-on-content-surface |
--dbp-override-background |
||
| Border | --dbp-override-border |
1px solid #ffffff |
||
| Border radius | --dbp-override-border-radius |
0px |
||
| Primary | --dbp-override-primary |
#398BDA |
rgb(57, 139, 218) |
|
| Primary surface | --dbp-override-primary-surface |
--dbp-override-primary |
||
| On primary surface | --dbp-override-on-primary-surface |
--dbp-override-on-content-surface |
||
| Primary surface border color | --dbp-override-primary-surface-border-color |
--dbp-override-primary |
||
| Secondary | --dbp-override-secondary |
#ffffff |
rgb(255, 255, 255) |
|
| Secondary surface | --dbp-override-secondary-surface |
#222120 |
rgb(34, 33, 32) |
|
| On secondary surface | --dbp-override-on-secondary-surface |
#ffffff |
rgb(255, 255, 255) |
|
| Secondary surface border color | --dbp-override-secondary-surface-border-color |
--dbp-override-secondary |
||
| Muted | --dbp-override-muted |
#8D8B8B |
rgb(141, 139, 139) |
|
| Muted surface | --dbp-override-muted-surface |
--dbp-override-muted |
||
| On muted surface | --dbp-override-on-muted-surface |
--dbp-override-on-content-surface |
||
| Muted surface border color | --dbp-override-muted-surface-border-color |
--dbp-override-muted |
||
| Accent | --dbp-override-accent |
#bc3a62 |
rgb(188, 58, 98) |
|
| Accent surface | --dbp-override-accent-surface |
--dbp-override-accent |
||
| On accent surface | --dbp-override-on-accent-surface |
--dbp-override-on-content-surface |
||
| Accent surface border color | --dbp-override-accent-surface-border-color |
--dbp-override-accent |
||
| Info | --dbp-override-info |
#3793A5 |
rgb(55, 147, 165) |
|
| Info surface | --dbp-override-info-surface |
--dbp-override-info |
||
| On info surface | --dbp-override-on-info-surface |
--dbp-override-on-content-surface |
||
| Info surface border color | --dbp-override-info-surface-border-color |
--dbp-override-info |
||
| Success | --dbp-override-success |
#5ec189 |
rgb(94, 193, 137) |
|
| Success surface | --dbp-override-success-surface |
--dbp-override-success |
||
| On success surface | --dbp-override-on-success-surface |
--dbp-override-on-content-surface |
||
| Success surface border color | --dbp-override-success-surface-border-color |
--dbp-override-success |
||
| Warning | --dbp-override-warning |
#f9cc66 |
rgb(249, 204, 102) |
|
| Warning surface | --dbp-override-warning-surface |
--dbp-override-warning |
||
| On warning surface | --dbp-override-on-warning-surface |
--dbp-override-on-content-surface |
||
| Warning surface border color | --dbp-override-warning-surface-border-color |
--dbp-override-warning |
||
| Danger | --dbp-override-danger |
#EB534E |
rgb(235, 83, 78) |
|
| Danger surface | --dbp-override-danger-surface |
--dbp-override-danger |
||
| On danger surface | --dbp-override-on-danger-surface |
--dbp-override-on-content-surface |
||
| Danger surface border color | --dbp-override-danger-surface-border-color |
--dbp-override-danger |
||
| Hover Background Color | --dbp-override-hover-background-color |
not set | ||
| Hover color | --dbp-override-hover-color |
not set |
Print Colors
Content Color:
True black
76% Cyan | 70% Magenta | 64% Yellow | 89% Black
Background Color:
White
0% Cyan | 0% Magenta | 0% Yellow | 0% Black
Accent Colors:
Berry
20% Cyan | 100% Magenta | 30% Yellow | 20% Black
Cobalt
80% Cyan | 50% Magenta | 0% Yellow | 0% Black