Colors The characteristic of human visual perception described through categories.
For best contrast & accessibility:
Use --prs-c-white foreground on darker backgrounds and --prs-c-gray-950 foreground on lighter backgrounds.
Neutral
-
black
#000000 -
white
#FFFFFF
Primary
-
primary
#0600B4
-
50
primary-50
#F6F0FC -
100
primary-100
#EADFF7 -
200
primary-200
#CAB2ED -
300
primary-300
#A387E0 -
400
primary-400
#573DCC -
600
primary-600
#0500A3 -
700
primary-700
#050087 -
800
primary-800
#04006E -
900
primary-900
#010052 -
950
primary-950
#010036
Secondary
-
secondary
#FF2986
-
50
secondary-50
#FFF5FC -
100
secondary-100
#FFEBF9 -
200
secondary-200
#FFC9EC -
300
secondary-300
#FFA8DC -
400
secondary-400
#FF69B6 -
600
secondary-600
#E62072 -
700
secondary-700
#BF1757 -
800
secondary-800
#990F3F -
900
secondary-900
#73082A -
950
secondary-950
#4A0418
Accent
-
accent
#A30283
-
50
accent-50
#FAEDF9 -
100
accent-100
#F5DCF2 -
200
accent-200
#E8AEE0 -
300
accent-300
#DB84D0 -
400
accent-400
#BF3BA9 -
600
accent-600
#940172 -
700
accent-700
#7A0156 -
800
accent-800
#61013E -
900
accent-900
#4A002B -
950
accent-950
#300019
Info
-
info
#00BCFF
-
50
info-50
#F9FCFF -
100
info-100
#E4F3FF -
200
info-200
#C6E7FF -
300
info-300
#A1D9FF -
400
info-400
#72CBFF -
600
info-600
#00A8E4 -
700
info-700
#0092C6 -
800
info-800
#0077A1 -
900
info-900
#005472 -
950
info-950
#002A39
Warning
-
warning
#E1FF00
-
50
warning-50
#FEFFF9 -
100
warning-100
#F9FFE4 -
200
warning-200
#F3FFC6 -
300
warning-300
#EDFFA1 -
400
warning-400
#E7FF72 -
600
warning-600
#C9E400 -
700
warning-700
#AEC600 -
800
warning-800
#8EA100 -
900
warning-900
#657200 -
950
warning-950
#323900
Success
-
success
#00F0A8
-
50
success-50
#F9FEFB -
100
success-100
#E4FCF0 -
200
success-200
#C6F9E0 -
300
success-300
#A1F6CF -
400
success-400
#72F3BD -
600
success-600
#00D796 -
700
success-700
#00BA82 -
800
success-800
#00986A -
900
success-900
#006B4B -
950
success-950
#003626
Danger
-
danger
#E0205D
-
50
danger-50
#FEF9F9 -
100
danger-100
#F9E5E8 -
200
danger-200
#F3C7CE -
300
danger-300
#EDA3B1 -
400
danger-400
#E7768D -
600
danger-600
#C81D53 -
700
danger-700
#AE1948 -
800
danger-800
#8E143B -
900
danger-900
#640E2A -
950
danger-950
#320715
Gray
-
gray
#807F82
-
50
gray-50
#FAFAFA -
100
gray-100
#F1F0F1 -
200
gray-200
#E0DFE0 -
300
gray-300
#CBCACC -
400
gray-400
#A5A4A7 -
600
gray-600
#69686F -
700
gray-700
#494751 -
800
gray-800
#31303B -
900
gray-900
#1D1B26 -
950
gray-950
#0E0D16
Marketing
The following colors are for marketing purposes ONLY! Please use the base token colors above for all other UI styling so we can maintain consistency throughout our products.
Brand
-
magenta
#FF2986 -
cobalt
#0900DA -
sky
#00BCFF
Primary
-
berry
#A30283 -
royal-purple
#5A02B7 -
cta-cobalt
#0600B4 -
indigo
#00057F -
dark-teal
#005A76 -
deep-indigo
#131327
Secondary
-
mauve
#F0C0FE -
cornflower
#A7CCFF -
aqua
#09FEFF -
spring
#00F0A8 -
chartreuse
#E1FF00 -
lemon
#FFFF00
Neutral
-
chalk
#F1F0F2 -
ash
#B5BDD6 -
charcoal
#49597D