Colors
In Bold, colors are used to express states of interactive components, status, and emphasize visual and textual content. All palettes were built according to accessibility standards, fulfilling the minimum contrast of interactive elements and text with the background. The palettes were also designed thematically, and it maintains the optimum contrast of all components, as well as works in reverse, in dark mode.
Blue
40#0069D0
100#FFFFFF
90#ECF0FF
80#C5D4FF
70#84AAFF
60#498FFF
50#007AF0
40#0069D0
30#0051A2
20#003A79
10#002451
Gray
40#696979
100#FFFFFF
90#F0F0F5
80#D3D4DD
70#AAAAB9
60#8F8FA2
50#7A7B8E
40#696979
30#515162
20#3A3A47
10#24252E
Green
40#217B00
100#FFFFFF
90#E1F6DF
80#9DE695
70#54C241
60#40A42B
50#2E8E16
40#217B00
30#166000
20#0E4700
10#052D00
Orange
40#AD5000
100#FFFFFF
90#FFECE8
80#FFC8B8
70#FF8C54
60#E76F00
50#C85D00
40#AD5000
30#873D00
20#642B00
10#421A00
Purple
40#AB00E7
100#FFFFFF
90#F7EDFF
80#E7C8FF
70#D28FFF
60#C762FF
50#C02BFF
40#AB00E7
30#8600B6
20#630087
10#42005B
Red
40#D01E29
100#FFFFFF
90#FEECED
80#FAC8C9
70#FF888B
60#F75B60
50#F02532
40#D01E29
30#A4151E
20#790C14
10#510609
Turquoise
40#02786D
100#FFFFFF
90#DBF6F2
80#9BE1D8
70#50BBAF
60#36A094
50#1E8B7F
40#02786D
30#005E55
20#00443D
10#002B26
Yellow
40#866600
100#FFFFFF
90#FFEED6
80#FCCE74
70#D5A400
60#B58B00
50#9B7700
40#866600
30#684F00
20#4C3900
10#312400
Pink
40#C8206F
100#FFFFFF
90#FEECF1
80#FBC7D5
70#F888AE
60#F65495
50#E62881
40#C8206F
30#9D1756
20#74103E
10#4E0627