The color scheme and its corresponding uses.
They help to distinguish actions and interaction elements.
200
#E8EFFA
rgb(232, 239, 250)
hsl(217, 64, 95)
300
#D7E2F5
rgb(215,226, 245)
hsl(218 60, 90)
400
#9CB9E5
rgb(156, 185, 229)
hsl(216, 58, 75)
500
#114DA6
rgb(17,77, 166)
hsl(216, 81, 36)
600
#093473
rgb(9, 52, 115)
hsl(216, 85, 24)
700
#04214D
rgb(4, 22, 77)
hsl(216, 90, 16)
They allow highlighting certain areas and details in the designs.
500
#C33400
rgb(173, 21, 25)
hsl(358, 78, 38)
600
#802200
rgb(128, 34, 0)
hsl(16, 100, 25)
700
#521600
rgb(82, 22, 0)
hsl(16, 100, 16)
They help to compose the page with its sections and shape the texts.
000
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0, 100)
100
#F7F7F8
rgb(247, 247, 248)
hsl(240, 7, 97)
200
#EEEFF0
rgb(238, 239, 240)
hsl(210, 6, 94)
300
#DCDFE3
rgb(220, 223, 227)
hsl(214, 11, 88)
400
#B5B8BE
rgb(181, 184, 190)
hsl(220, 6, 73)
500
#696E75
rgb(105, 110, 117)
hsl(215, 5, 44)
600
#363D47
rgb(54, 61, 71)
hsl(215, 14 25)
700
#0A0E14
rgb(10, 14, 20)
hsl(216, 33, 6)
They allow assigning semantic meanings of affirmative, warning, negative and informative type to the elements of the composition.
100
#FCF6F5
rgb(252, 246, 245)
hsl(9, 54, 97)
200
#F5E1DC
rgb(245, 225, 220)
hsl(12, 56, 91)
300
#E8886F
rgb(232, 136, 111)
hsl(12, 72, 67)
400
#C44727
rgb(196, 71, 39)
hsl(12, 67, 46)
500
#5E1503
rgb(94, 21, 3)
hsl(12, 94, 19)
600
#330C02
rgb(51, 12, 2)
hsl(12, 92, 10)
100
#F3F9F6
rgb(243, 249, 246)
hsl(150, 33, 96)
200
#E5F5EC
rgb(299, 245, 236)
hsl(146, 44, 93)
300
#4DB277
rgb(77, 178, 119)
hsl(145, 40, 50)
400
#198044
rgb(25,128,68)
hsl(145, 67, 30)
500
#015223
rgb(1, 82, 35)
hsl(145, 98, 16)
600
#0A2B18
rgb(10, 43, 24)
hsl(145, 62, 10)
100
#FFFAF2
rgb(255, 250, 242)
hsl(37, 100, 97)
200
#FCF0DC
rgb(252, 240, 220)
hsl(37, 84, 93)
300
#DBB251
rgb(219, 178, 81)
hsl(42, 66, 59)
400
#AD8821
rgb(173, 126, 33)
hsl(44, 68, 40)
500
#594100
rgb(89, 65, 0)
hsl(44, 100, 17)
600
#332302
rgb(51, 35, 2)
hsl(40, 92, 10)
100
#F2F2FC
rgb(242, 242, 252)
hsl(240, 63, 97)
200
#E9E7F6
rgb(233, 231, 246)
hsl(248, 45, 94)
300
#928FC2
rgb(146, 143, 194)
hsl(244, 29, 66)
400
#605AAD
rgb(96, 90, 173)
hsl(244, 34, 52)
500
#1E1655
rgb(30, 22, 85)
hsl(248, 59, 21)
600
#030121
rgb(3, 1, 33)
hsl(244, 94, 7)
Used in very specific styles that are repeated throughout the system.
overlay
#515C6D
rgba(7, 22, 46, 0.7)
hsla(217, 74, 10, 0.7)
focus
#C33400
rgba(207, 112, 0, 1)
hsla(216 14%, 25%, 1)
focus negative
#E59100
rgba(229 145, 0, 1)
hsla(38, 100%, 45% 1)
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
