This is the Color Tester

designed to make testing colors easier

this automatically generates a theme based on one input color (primary-fixed). the generated themes are responsive to light and dark mode. each color has 9 shades, the core classes uses these shades to have a theme that upholds almost all web accessability atandards. the individual shades are able to be used also.

example of core classes: .on-primary-container { }
example of shade class: .primary30 { }

test a demo page

this is the input color

primary

on-primary-container

secondary

on-secondary-container

surface

on-surface-container

surface-two

surface-three

error

on-error-container

success

on-success-container

highlight

on-highlight-container

shadow

Color pallettes:

10
20
30
40
50
60
70
80
90

Primary

10
20
30
40
50
60
70
80
90

secondary

10
20
30
40
50
60
70
80
90

surface

10
20
30
40
50
60
70
80
90

error

10
20
30
40
50
60
70
80
90

success

10
20
30
40
50
60
70
80
90

highlight

10
20
30
40
50
60
70
80
90