Log in
Color Groups

Colors

tint

#ffffff09
hsla(0,0%,100%,0.035)
rgba(255,255,255,0.035)
21.001.00
#ffffff1a
hsla(0,0%,100%,0.1)
rgba(255,255,255,0.1)
21.001.00
#ffffff30
hsla(0,0%,100%,0.19)
rgba(255,255,255,0.19)
21.001.00
#ffffff47
hsla(0,0%,100%,0.28)
rgba(255,255,255,0.28)
21.001.00
#ffffff5c
hsla(0,0%,100%,0.36)
rgba(255,255,255,0.36)
21.001.00
#ffffff73
hsla(0,0%,100%,0.45)
rgba(255,255,255,0.45)
21.001.00
#ffffff8c
hsla(0,0%,100%,0.55)
rgba(255,255,255,0.55)
21.001.00
#ffffffa3
hsla(0,0%,100%,0.64)
rgba(255,255,255,0.64)
21.001.00
#ffffffba
hsla(0,0%,100%,0.73)
rgba(255,255,255,0.73)
21.001.00
#ffffffd0
hsla(0,0%,100%,0.815)
rgba(255,255,255,0.815)
21.001.00
#ffffffe4
hsla(0,0%,100%,0.895)
rgba(255,255,255,0.895)
21.001.00
#fffffff0
hsla(0,0%,100%,0.94)
rgba(255,255,255,0.94)
21.001.00

shade

#000000f0
hsla(0,0%,0%,0.94)
rgba(0,0,0,0.94)
1.0021.00
#000000e5
hsla(0,0%,0%,0.899)
rgba(0,0,0,0.899)
1.0021.00
#000000cc
hsla(0,0%,0%,0.8)
rgba(0,0,0,0.8)
1.0021.00
#000000b0
hsla(0,0%,0%,0.69)
rgba(0,0,0,0.69)
1.0021.00
#00000099
hsla(0,0%,0%,0.6)
rgba(0,0,0,0.6)
1.0021.00
#00000080
hsla(0,0%,0%,0.5)
rgba(0,0,0,0.5)
1.0021.00
#00000069
hsla(0,0%,0%,0.41)
rgba(0,0,0,0.41)
1.0021.00
#00000052
hsla(0,0%,0%,0.32)
rgba(0,0,0,0.32)
1.0021.00
#0000003d
hsla(0,0%,0%,0.24)
rgba(0,0,0,0.24)
1.0021.00
#00000029
hsla(0,0%,0%,0.16)
rgba(0,0,0,0.16)
1.0021.00
#00000012
hsla(0,0%,0%,0.07)
rgba(0,0,0,0.07)
1.0021.00
#00000009
hsla(0,0%,0%,0.035)
rgba(0,0,0,0.035)
1.0021.00

gray

#000000
hsl(0,0%,0%)
rgb(0,0,0)
1.0021.00
#1a1a1a
hsl(0,0%,10.2%)
rgb(26,26,26)
1.2117.40
#353535
hsl(0,0%,20.78%)
rgb(53,53,53)
1.7112.27
#4e4e4e
hsl(0,0%,30.59%)
rgb(78,78,78)
2.528.32
#686868
hsl(0,0%,40.78%)
rgb(104,104,104)
3.775.57
#808080
hsl(0,0%,50.2%)
rgb(128,128,128)
5.323.95
#979797
hsl(0,0%,59.22%)
rgb(151,151,151)
7.192.92
#adadad
hsl(0,0%,67.84%)
rgb(173,173,173)
9.362.24
#c2c2c2
hsl(0,0%,76.08%)
rgb(194,194,194)
11.791.78
#d7d7d7
hsl(0,0%,84.31%)
rgb(215,215,215)
14.591.44
#ebebeb
hsl(0,0%,92.16%)
rgb(235,235,235)
17.621.19
#ffffff
hsl(0,0%,100%)
rgb(255,255,255)
21.001.00

slate gray

#0c0c0e
hsl(240,7.69%,5.1%)
rgb(12,12,14)
1.0719.54
#26262c
hsl(240,7.32%,16.08%)
rgb(38,38,44)
1.4015.04
#403f49
hsl(246,7.35%,26.67%)
rgb(64,63,73)
2.0310.37
#595865
hsl(244.62,6.88%,37.06%)
rgb(89,88,101)
3.016.98
#71707f
hsl(244,6.28%,46.86%)
rgb(113,112,127)
4.334.85
#878697
hsl(243.53,7.56%,55.88%)
rgb(135,134,151)
5.893.57
#9d9cad
hsl(243.53,9.39%,64.51%)
rgb(157,156,173)
7.792.69
#b1b0c0
hsl(243.75,11.27%,72.16%)
rgb(177,176,192)
9.842.13
#c4c4d0
hsl(240,11.32%,79.22%)
rgb(196,196,208)
12.151.73
#d7d6e0
hsl(246,13.89%,85.88%)
rgb(215,214,224)
14.581.44
#e8e8ee
hsl(240,15%,92.16%)
rgb(232,232,238)
17.211.22
#fafafb
hsl(240,11.11%,98.24%)
rgb(250,250,251)
20.131.04

blue

#060c16
hsl(217.5,57.14%,5.49%)
rgb(6,12,22)
1.0719.59
#122443
hsl(217.96,57.65%,16.67%)
rgb(18,36,67)
1.3615.45
#1f3c6f
hsl(218.25,56.34%,27.84%)
rgb(31,60,111)
1.9310.86
#2e5397
hsl(218.86,53.3%,38.63%)
rgb(46,83,151)
2.807.50
#3e6aba
hsl(218.71,50%,48.63%)
rgb(62,106,186)
3.985.28
#5180d7
hsl(218.96,62.62%,58.04%)
rgb(81,128,215)
5.423.88
#6696ec
hsl(218.51,77.91%,66.27%)
rgb(102,150,236)
7.142.94
#7faaf9
hsl(218.85,91.04%,73.73%)
rgb(127,170,249)
9.022.33
#99beff
hsl(218.24,100%,80%)
rgb(153,190,255)
11.161.88
#b6d2ff
hsl(216.99,100%,85.69%)
rgb(182,210,255)
13.651.54
#d4e4ff
hsl(217.67,100%,91.57%)
rgb(212,228,255)
16.341.29
#f2f7ff
hsl(216.92,100%,97.45%)
rgb(242,247,255)
19.521.08

indigo

#0d0a18
hsl(252.86,41.18%,6.67%)
rgb(13,10,24)
1.0719.56
#271f4b
hsl(250.91,41.51%,20.78%)
rgb(39,31,75)
1.3815.17
#41337b
hsl(251.67,41.38%,34.12%)
rgb(65,51,123)
1.9810.58
#5b48a6
hsl(252.13,39.5%,46.67%)
rgb(91,72,166)
2.927.19
#735dcc
hsl(251.89,52.11%,58.24%)
rgb(115,93,204)
4.175.04
#8a72ea
hsl(252,74.07%,68.24%)
rgb(138,114,234)
5.683.70
#a088ff
hsl(252.1,100%,76.67%)
rgb(160,136,255)
7.462.81
#b39eff
hsl(252.99,100%,80.98%)
rgb(179,158,255)
9.252.27
#c6b3ff
hsl(255,100%,85.1%)
rgb(198,179,255)
11.291.86
#d7c9ff
hsl(255.56,100%,89.41%)
rgb(215,201,255)
13.691.53
#e8e0ff
hsl(255.48,100%,93.92%)
rgb(232,224,255)
16.541.27
#f8f6ff
hsl(253.33,100%,98.24%)
rgb(248,246,255)
19.621.07

violet

#160a1b
hsl(282.35,45.95%,7.25%)
rgb(22,10,27)
1.0919.21
#3b1a47
hsl(284,46.39%,19.02%)
rgb(59,26,71)
1.4214.74
#5e2a72
hsl(283.33,46.15%,30.59%)
rgb(94,42,114)
2.0510.24
#7f3c98
hsl(283.7,43.4%,41.57%)
rgb(127,60,152)
3.006.99
#9d4eba
hsl(283.89,43.9%,51.76%)
rgb(157,78,186)
4.234.96
#b662d6
hsl(283.45,58.59%,61.18%)
rgb(182,98,214)
5.713.68
#cb77eb
hsl(283.45,74.36%,69.41%)
rgb(203,119,235)
7.382.85
#db8ef8
hsl(283.58,88.33%,76.47%)
rgb(219,142,248)
9.242.27
#e7a6ff
hsl(283.82,100%,82.55%)
rgb(231,166,255)
11.301.86
#f0c0ff
hsl(285.71,100%,87.65%)
rgb(240,192,255)
13.691.53
#f7daff
hsl(287.03,100%,92.75%)
rgb(247,218,255)
16.431.28
#fdf4ff
hsl(289.09,100%,97.84%)
rgb(253,244,255)
19.561.07

magenta

#130811
hsl(310.91,40.74%,5.29%)
rgb(19,8,17)
1.0719.62
#381831
hsl(313.13,40%,15.69%)
rgb(56,24,49)
1.3415.63
#5c2850
hsl(313.85,39.39%,25.88%)
rgb(92,40,80)
1.8711.20
#803870
hsl(313.33,39.13%,36.08%)
rgb(128,56,112)
2.727.73
#a4488f
hsl(313.7,38.98%,46.27%)
rgb(164,72,143)
3.905.38
#c858af
hsl(313.39,50.45%,56.47%)
rgb(200,88,175)
5.473.84
#db6ec3
hsl(313.21,60.22%,64.51%)
rgb(219,110,195)
7.032.99
#e289ce
hsl(313.48,60.54%,71.18%)
rgb(226,137,206)
8.702.41
#e8a4d9
hsl(313.24,59.65%,77.65%)
rgb(232,164,217)
10.741.95
#efbfe4
hsl(313.75,60%,84.31%)
rgb(239,191,228)
13.241.59
#f6daf0
hsl(312.86,60.87%,90.98%)
rgb(246,218,240)
16.211.30
#fdf5fb
hsl(315,66.67%,97.65%)
rgb(253,245,251)
19.631.07

red

#130707
hsl(0,46.15%,5.1%)
rgb(19,7,7)
1.0619.79
#3b1516
hsl(358.42,47.5%,15.69%)
rgb(59,21,22)
1.3016.09
#632325
hsl(358.13,47.76%,26.27%)
rgb(99,35,37)
1.8011.68
#8b3233
hsl(359.33,47.09%,37.06%)
rgb(139,50,51)
2.608.07
#b34042
hsl(358.96,47.33%,47.65%)
rgb(179,64,66)
3.735.63
#db4e51
hsl(358.72,66.2%,58.24%)
rgb(219,78,81)
5.224.02
#f06467
hsl(358.71,82.35%,66.67%)
rgb(240,100,103)
6.723.12
#f28183
hsl(358.94,81.29%,72.75%)
rgb(242,129,131)
8.242.55
#f59d9f
hsl(358.64,81.48%,78.82%)
rgb(245,157,159)
10.212.06
#f8babb
hsl(359.03,81.58%,85.1%)
rgb(248,186,187)
12.731.65
#fbd7d7
hsl(0,81.82%,91.37%)
rgb(251,215,215)
15.801.33
#fef3f3
hsl(0,84.62%,97.45%)
rgb(254,243,243)
19.331.09

red orange

#130804
hsl(16,65.22%,4.51%)
rgb(19,8,4)
1.0619.73
#3b190e
hsl(14.67,61.64%,14.31%)
rgb(59,25,14)
1.3315.77
#632917
hsl(14.21,62.3%,23.92%)
rgb(99,41,23)
1.8611.29
#8b3a21
hsl(14.15,61.63%,33.73%)
rgb(139,58,33)
2.727.71
#b34b2a
hsl(14.45,61.99%,43.33%)
rgb(179,75,42)
3.965.31
#db5b34
hsl(14.01,69.87%,53.14%)
rgb(219,91,52)
5.563.78
#f0714a
hsl(14.1,84.69%,61.57%)
rgb(240,113,74)
7.172.93
#f28b6b
hsl(14.22,83.85%,68.43%)
rgb(242,139,107)
8.682.42
#f5a58d
hsl(13.85,83.87%,75.69%)
rgb(245,165,141)
10.651.97
#f8c0ae
hsl(14.59,84.09%,82.75%)
rgb(248,192,174)
13.141.60
#fbdad0
hsl(13.95,84.31%,90%)
rgb(251,218,208)
16.041.31
#fef4f1
hsl(13.85,86.67%,97.06%)
rgb(254,244,241)
19.421.08

orange

#201307
hsl(28.8,64.1%,7.65%)
rgb(32,19,7)
1.1618.14
#43240f
hsl(24.23,63.41%,16.08%)
rgb(67,36,15)
1.5014.02
#693612
hsl(24.83,70.73%,24.12%)
rgb(105,54,18)
2.149.83
#8f4812
hsl(25.92,77.64%,31.57%)
rgb(143,72,18)
3.106.77
#b05710
hsl(26.63,83.33%,37.65%)
rgb(176,87,16)
4.224.98
#d1660c
hsl(27.41,89.14%,43.33%)
rgb(209,102,12)
5.623.74
#f47603
hsl(28.63,97.57%,48.43%)
rgb(244,118,3)
7.442.82
#ff8f32
hsl(27.22,100%,59.8%)
rgb(255,143,50)
9.232.28
#ffa960
hsl(27.55,100%,68.82%)
rgb(255,169,96)
11.101.89
#ffc28c
hsl(28.17,100%,77.45%)
rgb(255,194,140)
13.351.57
#ffdab8
hsl(28.73,100%,86.08%)
rgb(255,218,184)
15.971.31
#fff2e7
hsl(27.5,100%,95.29%)
rgb(255,242,231)
19.111.10

yellow

#000000
hsl(0,0%,0%)
rgb(0,0,0)
1.0021.00
#413b15
hsl(51.82,51.16%,16.86%)
rgb(65,59,21)
1.8611.28
#655c19
hsl(52.89,60.32%,24.71%)
rgb(101,92,25)
3.106.78
#857a1a
hsl(53.83,67.3%,31.18%)
rgb(133,122,26)
4.804.38
#a1941a
hsl(54.22,72.19%,36.67%)
rgb(161,148,26)
6.773.10
#c0b017
hsl(54.32,78.6%,42.16%)
rgb(192,176,23)
9.462.22
#eedb0b
hsl(54.98,91.16%,48.82%)
rgb(238,219,11)
14.771.42
#feee45
hsl(54.81,98.93%,63.33%)
rgb(254,238,69)
17.531.20
#fdf377
hsl(55.52,97.1%,72.94%)
rgb(253,243,119)
18.261.15
#fdf8a2
hsl(56.7,95.79%,81.37%)
rgb(253,248,162)
19.131.10
#fdfcca
hsl(58.82,92.73%,89.22%)
rgb(253,252,202)
19.951.05
#fffff1
hsl(60,100%,97.25%)
rgb(255,255,241)
20.831.01

green

#011409
hsl(145.26,90.48%,4.12%)
rgb(1,20,9)
1.1119.00
#0a311e
hsl(150.77,66.1%,11.57%)
rgb(10,49,30)
1.4714.28
#134d33
hsl(153.1,60.42%,18.82%)
rgb(19,77,51)
2.149.83
#1b6846
hsl(153.51,58.78%,25.69%)
rgb(27,104,70)
3.126.74
#238158
hsl(153.83,57.32%,32.16%)
rgb(35,129,88)
4.354.82
#2b9968
hsl(153.27,56.12%,38.43%)
rgb(43,153,104)
5.863.58
#34b379
hsl(152.6,54.98%,45.29%)
rgb(52,179,121)
7.872.67
#45dc8f
hsl(149.4,68.33%,56.67%)
rgb(69,220,143)
11.891.77
#58f19c
hsl(146.67,84.53%,64.51%)
rgb(88,241,156)
14.481.45
#9ef4c4
hsl(146.51,79.63%,78.82%)
rgb(158,244,196)
16.191.30
#c5f9dd
hsl(147.69,81.25%,87.45%)
rgb(197,249,221)
17.971.17
#effff9
hsl(157.5,100%,96.86%)
rgb(239,255,249)
20.341.03

teal

#080e0c
hsl(160,27.27%,4.31%)
rgb(8,14,12)
1.0819.47
#152621
hsl(162.35,28.81%,11.57%)
rgb(21,38,33)
1.3315.78
#1d3f35
hsl(162.35,36.96%,18.04%)
rgb(29,63,53)
1.8111.57
#25594a
hsl(162.69,41.27%,24.71%)
rgb(37,89,74)
2.618.06
#2b7560
hsl(162.97,46.25%,31.37%)
rgb(43,117,96)
3.825.50
#309178
hsl(164.54,50.26%,37.84%)
rgb(48,145,120)
5.453.86
#48a98e
hsl(163.3,40.25%,47.25%)
rgb(72,169,142)
7.342.86
#6eb9a1
hsl(160.8,34.88%,57.84%)
rgb(110,185,161)
9.122.30
#90c9b6
hsl(160,34.55%,67.65%)
rgb(144,201,182)
11.221.87
#b0d8ca
hsl(159,33.9%,76.86%)
rgb(176,216,202)
13.521.55
#d0e8df
hsl(157.5,34.29%,86.27%)
rgb(208,232,223)
16.291.29
#f0f8f5
hsl(157.5,36.36%,95.69%)
rgb(240,248,245)
19.451.08

cyan

#000000
hsl(0,0%,0%)
rgb(0,0,0)
1.0021.00
#132223
hsl(183.75,29.63%,10.59%)
rgb(19,34,35)
1.2816.40
#1b3f41
hsl(183.16,41.3%,18.04%)
rgb(27,63,65)
1.8311.45
#205e62
hsl(183.64,50.77%,25.49%)
rgb(32,94,98)
2.847.40
#237f84
hsl(183.09,58.08%,32.75%)
rgb(35,127,132)
4.444.73
#21a2a8
hsl(182.67,67.16%,39.41%)
rgb(33,162,168)
6.803.09
#45bbc1
hsl(182.9,50%,51.37%)
rgb(69,187,193)
9.132.30
#74c9cd
hsl(182.7,47.09%,62.94%)
rgb(116,201,205)
10.981.91
#9ad6d9
hsl(182.86,45.32%,72.75%)
rgb(154,214,217)
12.991.62
#bde4e6
hsl(182.93,45.05%,82.16%)
rgb(189,228,230)
15.401.36
#def2f2
hsl(180,43.48%,90.98%)
rgb(222,242,242)
18.091.16
#ffffff
hsl(0,0%,100%)
rgb(255,255,255)
21.001.00

Typefaces

DM Sans
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
$
%
^
&
100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

DM Sans
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
$
%
^
&
100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

Inconsolata
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
$
%
^
&
100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

Type Scale

AAAAAAAAAAAA
10px13px16px19px23px27px33px40px48px57px69px83px

Line Heights

solid: 1

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

heading: 1.25

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

body: 1.5

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Tracking

tracked: 0.1em

Tracked text example

negative: -0.05em

Tracked text example

large: 0.25em

Tracked text example

Spacing

Border Radius

0
4px
6px
8px
16px
9999px

Border Widths

0
1px
2px
4px

Box Shadows

00px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.16), 0px 8px 8px 0px rgba(0, 0, 0, 0.20)
10px 1px 1px 0px rgba(0, 0, 0, 0.11), 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 4px 0px rgba(0, 0, 0, 0.11), 0px 6px 8px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.11)
20px 1px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 8px 0px rgba(0, 0, 0, 0.15)

Durations

125ms
250ms
500ms

Easing Functions

0
cubic-bezier(0.543, 1.086, 0.5, -0.383)
1
ease
2
ease-out