Base colors
Individual shades
The following CSS is the generated CSS that this website uses. If you like how this website looks with your colors, using this CSS will make you website look the same!
Generated colors
Copy to clipboard
Download CSS file
Color meanings and usage.
The --P (Primary) colors are a gradient generated from you main color.
The --A (Accent) colors are a gradient generated from your selected color
harmony.
The --E (Error) colors are a gradient generated from the best suiting red for
your main color.
All colors ignore your Start Lightness and End Lightness values,
but respect which is greater.
The number after the --P, --A and --E prefixes is the
lightness value for that color.
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.
Copy to clipboard
Download CSS file
Copy to clipboard
Download CSS file