Color
Content in this page is based on Adobe Spectrum.
Usage
400 should always be used as the primary color in any situation. Any other color stop should only be used if absolutely necessary.
Semantic colors
Semantic colors have assigned meanings and are used to set expectations of meaning for users. Color is used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication. Too much color can create cognitive overload, affecting users’ ability to efficiently interact with products.
BLUE 400
#2680eb
Informative
BLUE 500
#1473e6
BLUE 600
#0d66d0
BLUE 700
#095aba
RED 400
#e34850
Negative
RED 500
#d7373f
RED 600
#c9252d
RED 700
#bb121a
ORANGE 400
#e68619
Notice
ORANGE 500
#da7b11
ORANGE 600
#cb6f10
ORANGE 700
#bd640d
GREEN 400
#2d9d78
Positive
GREEN 500
#268e6c
GREEN 600
#12805c
GREEN 700
#107154
Label colors
Label colors have no semantic meaning attached to them. They can be used to show relationships between content types (e.g., categorization, labels in data visualizations).
INDIGO 400
#6767ec
INDIGO 500
#5c5ce0
INDIGO 600
#5151d3
INDIGO 700
#4646c6
CELERY 400
#44b556
CELERY 500
#3da74e
CELERY 600
#379947
CELERY 700
#318b40
MAGENTA 400
#d83790
MAGENTA 500
#ce2783
MAGENTA 600
#bc1c74
MAGENTA 700
#ae0e66
YELLOW 400
#dfbf00
YELLOW 500
#d2b200
YELLOW 600
#c4a600
YELLOW 700
#b79900
FUCHSIA 400
#c038cc
FUCHSIA 500
#b130bd
FUCHSIA 600
#a228ad
FUCHSIA 700
#93219e
SEAFOAM 400
#1b959a
SEAFOAM 500
#16878c
SEAFOAM 600
#0f797d
SEAFOAM 700
#096c6f
CHARTREUSE 400
#85d044
CHARTREUSE 500
#7cc33f
CHARTREUSE 600
#73b53a
CHARTREUSE 700
#6aa834
PURPLE 400
#9256d9
PURPLE 500
#864ccc
PURPLE 600
#7a42bf
PURPLE 700
#6f38b1