Base Color
Export to CSS
Preview Color Roles
Accent
On Accent
Accent Container
On Accent Container
Inverse Accent
Surface
On Surface
Surface Dim
Surface Bright
Surface Variant
On Surface Variant
Surface Container Highest
Surface Container High
Surface Container
Surface Container Low
Surface Container Lowest
Inverse Surface
Inverse On Surface
Outline
Outline Variant
Generated Colors
Color Roles
Use the following CSS properties to correctly apply the colors generated above.
The color roles are slightly based from Material Design color system. Click here to read more.
Color roles are defined for both light mode and dark mode. This website uses this exact color roles.