Colors - Keep React

The color palette includes primary, secondary, success, warning, and error colors. The primary color is used for branding and main actions, while the secondary color complements the primary and is used for secondary elements. The success color, usually green, indicates positive actions. The warning color, often yellow or orange, is used for cautionary information, and the error color, typically red, signifies errors or critical actions.

Table of Contents#

Colors#

Keep React includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

Primary

25

#F2F5FF

50

#E8EDFF

100

#B4C4FF

200

#94ABFF

300

#6E8EFF

400

#4A72FF

500

#1B4DFF

600

#0F3CD9

700

#042BB2

800

#042185

900

#00114A

Success

25

#F2FFF9

50

#D7FFEB

100

#7DFEB9

200

#44E790

300

#2FD181

400

#1DB469

500

#11A75C

600

#0A9952

700

#048746

800

#046A37

900

#02542B

Warning

25

#FFF9DF

50

#FFF2C4

100

#FFE99D

200

#FFE176

300

#FFD84E

400

#FFD027

500

#FFC700

600

#D8A800

700

#B18A00

800

#896B00

900

#624D00

Error

25

#FFF5F4

50

#FFDCDA

100

#FFC5C1

200

#FFA19B

300

#FF7A72

400

#FF574D

500

#FF3838

600

#E92215

700

#D21A0E

800

#BE170C

900

#AB0A00

Metal

25

#F9FAFB

50

#F0F3F9

100

#E9EFF6

200

#D7DFE9

300

#AFBACA

400

#8897AE

500

#5E718D

600

#455468

700

#3D4A5C

800

#2D3643

900

#1C222B