Appearance
Color
The Material Design color system helps you apply color to your UI in a meaningful way.
Our color palette is composed of light-blue and gray, both belonging to the chromatic circle of cold tones. This allows us to generate a perfect harmony between them.
Primary colors
The primary color is light-blue. It is used all across your interfaces and components.
50
#E1F5FE
100
#B3E5FC
200
#81D4FA
300
#4FC3F7
400
#29B6F6
500
#03A9F4
600
#039BE5
700
#0288D1
800
#0277BD
900
#01579B
Neutral colors
These colors are used as supporting in backgrounds, text colors, separators, etc.
White
#FFFFFF
50
#FAFAFA
100
#F5F5F5
200
#EEEEEE
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
600
#757575
700
#616161
800
#424242
900
#212121
Black
#000000
Overlay
#000 - 45%
Critical colors
These colors convey an emotion of negativity. Generally used across error states.
50
#FFEBEE
100
#FFCDD2
200
#EF9A9A
300
#E57373
400
#EF5350
500
#F44336
600
#E53935
700
#D32F2F
800
#C62828
900
#B71C1C
High colors
These colors convey an emotion of caution. Generally used across warning states but more priority than medium.
50
#FFF3E0
100
#FFE0B2
200
#FFCC80
300
#FFB74D
400
#FFA726
500
#FF9800
600
#FB8C00
700
#F57C00
800
#EF6C00
900
#E65100
Medium colors
These colors convey the feeling of caution. Generally used across warning states but less priority than high.
50
#FFFDE7
100
#FFF9C4
200
#FFF59D
300
#FFF176
400
#FFEE58
500
#FFEB3B
600
#FDD835
700
#FBC02D
800
#F9A825
900
#F57F17
Low/Success colors
These colors convey an emotion of positivity. Generally used across success or complete states for confirmations about actions.
50
#E8F5E9
100
#C8E6C9
200
#A5D6A7
300
#81C784
400
#66BB6A
500
#4CAF50
600
#43A047
700
#388E3C
800
#2E7D32
900
#1B5E20
Informative colors
Blue colors convey an emotion of stability and confidence. These colors are used for information notifications or to ask users to do something.
50
#E8F0FE
100
#C4D9FD
200
#9DBFFB
300
#76A6F9
400
#4F8DF8
500
#2873F6
600
#0A5CEB
700
#084DC4
800
#073E9D
900
#052E76
Experimental colors
This collection is intended for use when standard variants may not suffice. These shades provide flexibility and uniqueness, enhancing design while maintaining a cohesive aesthetic.
50
#F9F6FD
100
#F4EFFC
200
#E8DEF8
300
#DBCFED
400
#BAA7D7
500
#9585C0
600
#7E6AB1
700
#6750A4
800
#513D87
900
#473675
Alternate colors
These colors are used as an alternative to primary or secondary colors.
50
#F7F9FC
900
#004174