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

#000b1f
hsl(218.71,100%,6.08%)
rgb(0,11,31)
1.0719.67
#01215e
hsl(219.35,97.89%,18.63%)
rgb(1,33,94)
1.3815.21
#033799
hsl(219.2,96.15%,30.59%)
rgb(3,55,153)
2.0110.45
#084dcf
hsl(219.2,92.56%,42.16%)
rgb(8,77,207)
2.977.06
#1263fc
hsl(219.23,97.5%,52.94%)
rgb(18,99,252)
4.224.98
#2178ff
hsl(216.49,100%,56.47%)
rgb(33,120,255)
5.204.04
#378eff
hsl(213.9,100%,60.78%)
rgb(55,142,255)
6.483.24
#53a3ff
hsl(212.09,100%,66.27%)
rgb(83,163,255)
8.052.61
#75b8ff
hsl(210.87,100%,72.94%)
rgb(117,184,255)
10.062.09
#9acdff
hsl(209.7,100%,80.2%)
rgb(154,205,255)
12.551.67
#c3e2ff
hsl(209,100%,88.24%)
rgb(195,226,255)
15.641.34
#edf6ff
hsl(210,100%,96.47%)
rgb(237,246,255)
19.231.09

indigo

#0b081f
hsl(247.83,58.97%,7.65%)
rgb(11,8,31)
1.0719.65
#23195e
hsl(248.7,57.98%,23.33%)
rgb(35,25,94)
1.3715.30
#3a2a99
hsl(248.65,56.92%,38.24%)
rgb(58,42,153)
1.9710.65
#523ccf
hsl(248.98,60.49%,52.35%)
rgb(82,60,207)
2.917.23
#684ffc
hsl(248.67,96.65%,64.9%)
rgb(104,79,252)
4.115.11
#7e63ff
hsl(250.38,100%,69.41%)
rgb(126,99,255)
5.124.10
#9478ff
hsl(252.44,100%,73.53%)
rgb(148,120,255)
6.393.29
#a88fff
hsl(253.39,100%,78.04%)
rgb(168,143,255)
8.042.61
#bda7ff
hsl(255,100%,82.75%)
rgb(189,167,255)
10.142.07
#d0c0ff
hsl(255.24,100%,87.65%)
rgb(208,192,255)
12.671.66
#e4daff
hsl(256.22,100%,92.75%)
rgb(228,218,255)
15.771.33
#f7f4ff
hsl(256.36,100%,97.84%)
rgb(247,244,255)
19.341.09

violet

#1a0023
hsl(284.57,100%,6.86%)
rgb(26,0,35)
1.0719.66
#44015c
hsl(284.18,97.85%,18.24%)
rgb(68,1,92)
1.4014.95
#6c0392
hsl(284.06,95.97%,29.22%)
rgb(108,3,146)
2.0710.17
#9009c2
hsl(283.78,91.13%,39.8%)
rgb(144,9,194)
3.006.99
#b113eb
hsl(283.89,85.04%,49.8%)
rgb(177,19,235)
4.165.05
#cc22ff
hsl(286.15,100%,56.67%)
rgb(204,34,255)
5.244.01
#e138ff
hsl(290.95,100%,60.98%)
rgb(225,56,255)
6.213.38
#ef54ff
hsl(294.39,100%,66.47%)
rgb(239,84,255)
7.382.84
#f876ff
hsl(296.93,100%,73.14%)
rgb(248,118,255)
9.032.33
#fd9bff
hsl(298.8,100%,80.39%)
rgb(253,155,255)
11.311.86
#ffc3ff
hsl(300,100%,88.24%)
rgb(255,195,255)
14.501.45
#ffedff
hsl(300,100%,96.47%)
rgb(255,237,255)
18.811.12

magenta

#170112
hsl(313.64,91.67%,4.71%)
rgb(23,1,18)
1.0520.01
#410333
hsl(313.55,91.18%,13.33%)
rgb(65,3,51)
1.2916.33
#6b0555
hsl(312.94,91.07%,21.96%)
rgb(107,5,85)
1.7811.81
#960776
hsl(313.43,91.08%,30.78%)
rgb(150,7,118)
2.598.11
#c00998
hsl(313.11,91.04%,39.41%)
rgb(192,9,152)
3.735.62
#eb0bb9
hsl(313.39,91.06%,48.24%)
rgb(235,11,185)
5.283.98
#fc24cd
hsl(313.06,97.3%,56.47%)
rgb(252,36,205)
6.273.35
#fd4dd6
hsl(313.3,97.78%,64.71%)
rgb(253,77,214)
7.212.91
#fd76df
hsl(313.33,97.12%,72.75%)
rgb(253,118,223)
8.832.38
#fe9fe9
hsl(313.26,97.94%,80.98%)
rgb(254,159,233)
11.351.85
#fec8f2
hsl(313.33,96.43%,89.02%)
rgb(254,200,242)
14.761.42
#fff0fc
hsl(312,100%,97.06%)
rgb(255,240,252)
19.121.10

red

#140505
hsl(0,60%,4.9%)
rgb(20,5,5)
1.0519.93
#3f0f10
hsl(358.75,61.54%,15.29%)
rgb(63,15,16)
1.2916.31
#6a191b
hsl(358.52,61.83%,25.69%)
rgb(106,25,27)
1.7711.88
#942425
hsl(359.46,60.87%,36.08%)
rgb(148,36,37)
2.548.27
#bf2e30
hsl(359.17,61.18%,46.47%)
rgb(191,46,48)
3.655.76
#ea383b
hsl(358.99,80.91%,56.86%)
rgb(234,56,59)
5.134.10
#fe4e51
hsl(358.98,98.88%,65.1%)
rgb(254,78,81)
6.423.27
#fe6f71
hsl(359.16,98.62%,71.57%)
rgb(254,111,113)
7.732.72
#fe9091
hsl(359.45,98.21%,78.04%)
rgb(254,144,145)
9.612.18
#ffb0b1
hsl(359.24,100%,84.51%)
rgb(255,176,177)
12.101.74
#ffd1d2
hsl(358.7,100%,90.98%)
rgb(255,209,210)
15.301.37
#fff1f2
hsl(355.71,100%,97.25%)
rgb(255,241,242)
19.121.10

red orange

#140602
hsl(13.33,81.82%,4.31%)
rgb(20,6,2)
1.0619.87
#3d1407
hsl(14.44,79.41%,13.33%)
rgb(61,20,7)
1.3016.13
#66210c
hsl(14,78.95%,22.35%)
rgb(102,33,12)
1.7911.75
#8f2f10
hsl(14.65,79.87%,31.18%)
rgb(143,47,16)
2.588.13
#b83c15
hsl(14.36,79.51%,40.2%)
rgb(184,60,21)
3.705.68
#e24a1a
hsl(14.4,79.37%,49.41%)
rgb(226,74,26)
5.234.02
#f66030
hsl(14.55,91.67%,57.65%)
rgb(246,96,48)
6.633.17
#f87d56
hsl(14.44,92.05%,65.49%)
rgb(248,125,86)
8.062.61
#f99a7d
hsl(14.03,91.18%,73.33%)
rgb(249,154,125)
9.952.11
#fbb8a3
hsl(14.32,91.67%,81.18%)
rgb(251,184,163)
12.491.68
#fdd5c9
hsl(13.85,92.86%,89.02%)
rgb(253,213,201)
15.541.35
#fef3ef
hsl(16,88.24%,96.67%)
rgb(254,243,239)
19.281.09

orange

#170a00
hsl(26.09,100%,4.51%)
rgb(23,10,0)
1.0819.45
#411a05
hsl(21,85.71%,13.73%)
rgb(65,26,5)
1.3715.28
#692a09
hsl(20.62,84.21%,22.35%)
rgb(105,42,9)
1.9410.85
#8e3b0a
hsl(22.27,86.84%,29.8%)
rgb(142,59,10)
2.787.55
#af4c08
hsl(24.43,91.26%,35.88%)
rgb(175,76,8)
3.865.44
#d76a00
hsl(29.58,100%,42.16%)
rgb(215,106,0)
5.953.53
#f79700
hsl(36.68,100%,48.43%)
rgb(247,151,0)
9.382.24
#ffb70d
hsl(42.15,100%,52.55%)
rgb(255,183,13)
12.031.75
#ffc836
hsl(43.58,100%,60.59%)
rgb(255,200,54)
13.571.55
#ffd96d
hsl(44.38,100%,71.37%)
rgb(255,217,109)
15.401.36
#ffeaac
hsl(44.82,100%,83.73%)
rgb(255,234,172)
17.621.19
#fffaf0
hsl(40,100%,97.06%)
rgb(255,250,240)
20.181.04

yellow

#0d0e01
hsl(64.62,86.67%,2.94%)
rgb(13,14,1)
1.0819.44
#2a2805
hsl(56.76,78.72%,9.22%)
rgb(42,40,5)
1.4014.96
#474308
hsl(56.19,79.75%,15.49%)
rgb(71,67,8)
2.0710.12
#635c0a
hsl(55.28,81.65%,21.37%)
rgb(99,92,10)
3.076.85
#7e750a
hsl(55.34,85.29%,26.67%)
rgb(126,117,10)
4.444.73
#998d07
hsl(55.07,91.25%,31.37%)
rgb(153,141,7)
6.173.40
#d5c200
hsl(54.65,100%,41.76%)
rgb(213,194,0)
11.551.82
#fde90d
hsl(55,98.36%,52.16%)
rgb(253,233,13)
16.841.25
#fff32f
hsl(56.54,100%,59.22%)
rgb(255,243,47)
18.111.16
#fff960
hsl(57.74,100%,68.82%)
rgb(255,249,96)
18.971.11
#fffc9c
hsl(58.18,100%,80.59%)
rgb(255,252,156)
19.661.07
#fbfedc
hsl(65.29,94.44%,92.94%)
rgb(251,254,220)
20.311.03

green

#011409
hsl(145.26,90.48%,4.12%)
rgb(1,20,9)
1.1119.00
#01311b
hsl(152.5,96%,9.8%)
rgb(1,49,27)
1.4614.42
#024d2d
hsl(154.4,94.94%,15.49%)
rgb(2,77,45)
2.109.99
#02683c
hsl(154.12,96.23%,20.78%)
rgb(2,104,60)
3.056.89
#018149
hsl(153.75,98.46%,25.49%)
rgb(1,129,73)
4.244.96
#009953
hsl(152.55,100%,30%)
rgb(0,153,83)
5.683.70
#00be5c
hsl(149.05,100%,37.25%)
rgb(0,190,92)
8.522.46
#03d662
hsl(147.01,97.24%,42.55%)
rgb(3,214,98)
10.801.94
#50eb94
hsl(146.32,79.49%,61.76%)
rgb(80,235,148)
13.651.54
#89f2b8
hsl(146.86,80.15%,74.31%)
rgb(137,242,184)
15.461.36
#b9f8d7
hsl(148.57,81.82%,84.9%)
rgb(185,248,215)
17.471.20
#ebfff7
hsl(156,100%,96.08%)
rgb(235,255,247)
20.181.04

teal

#07100c
hsl(153.33,39.13%,4.51%)
rgb(7,16,12)
1.0919.29
#13261c
hsl(148.42,33.33%,11.18%)
rgb(19,38,28)
1.3215.89
#1c3c2c
hsl(150,36.36%,17.25%)
rgb(28,60,44)
1.7312.12
#1d533e
hsl(156.67,48.21%,21.96%)
rgb(29,83,62)
2.368.90
#117156
hsl(163.13,73.85%,25.49%)
rgb(17,113,86)
3.525.97
#039474
hsl(166.76,96.03%,29.61%)
rgb(3,148,116)
5.493.82
#11b495
hsl(168.59,82.74%,38.63%)
rgb(17,180,149)
7.992.63
#2bc3a7
hsl(168.95,63.87%,46.67%)
rgb(43,195,167)
9.472.22
#51d1b9
hsl(168.75,58.18%,56.86%)
rgb(81,209,185)
11.171.88
#7fdecc
hsl(168.63,59.01%,68.43%)
rgb(127,222,204)
13.221.59
#b4ebdf
hsl(166.91,57.89%,81.37%)
rgb(180,235,223)
15.891.32
#ecf8f2
hsl(150,46.15%,94.9%)
rgb(236,248,242)
19.281.09

cyan

#021313
hsl(180,80.95%,4.12%)
rgb(2,19,19)
1.1119.00
#072f30
hsl(181.46,74.55%,10.78%)
rgb(7,47,48)
1.4614.40
#0c4b4d
hsl(181.85,73.03%,17.45%)
rgb(12,75,77)
2.139.86
#116568
hsl(182.07,71.9%,23.73%)
rgb(17,101,104)
3.096.81
#147e81
hsl(181.65,73.15%,29.22%)
rgb(20,126,129)
4.334.85
#169498
hsl(181.85,74.71%,34.12%)
rgb(22,148,152)
5.723.67
#14b8be
hsl(182.12,80.95%,41.18%)
rgb(20,184,190)
8.632.43
#1edae2
hsl(182.45,77.17%,50.2%)
rgb(30,218,226)
12.181.72
#56e8ef
hsl(182.75,82.7%,63.73%)
rgb(86,232,239)
14.181.48
#9eeff4
hsl(183.49,79.63%,78.82%)
rgb(158,239,244)
16.111.30
#ccf7f9
hsl(182.67,78.95%,88.82%)
rgb(204,247,249)
18.241.15
#e5ffff
hsl(180,100%,94.9%)
rgb(229,255,255)
20.081.05

Typefaces

Space Grotesk
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

Space Grotesk
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

AAAAAAAAAAA
10px12px14px16px20px24px48px64px96px128px192px

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
16px
9999px

Border Widths

0
1px
2px
4px

Box Shadows

00px 0px 1px 0px rgba(0, 0, 0, 0.125), 0px 0px 2px 0px rgba(0, 0, 0, 0.125), 0px 0px 4px 0px rgba(0, 0, 0, 0.125), 0px 0px 8px 0px rgba(0, 0, 0, 0.125), 0px 0px 16px 0px rgba(0, 0, 0, 0.125)
10px 0px 1px 0px hsla(0, 0%, 0%, 0.16), 0px 0px 2px 0px hsla(0, 0%, 0%, 0.16), 0px 0px 4px 0px hsla(0, 0%, 0%, 0.16), 0px 0px 8px 0px hsla(0, 0%, 0%, 0.16)
20px 0px 1px 0px hsla(0, 0%, 0%, 0.07), 0px 0px 2px 0px hsla(0, 0%, 0%, 0.07), 0px 0px 4px 0px hsla(0, 0%, 0%, 0.07), 0px 0px 8px 0px hsla(0, 0%, 0%, 0.07), 0px 0px 16px 0px hsla(0, 0%, 0%, 0.07)
30px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 0px 2px 0px rgba(0, 0, 0, 0.20), 0px 0px 4px 0px rgba(0, 0, 0, 0.15), 0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 0px 16px 0px rgba(0, 0, 0, 0.05)
40px 1px 2px 0px hsla(0, 0%, 0%, 0.035), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.07), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.07), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.07), 0px 32px 64px 0px hsla(0, 0%, 0%, 0.07)

Durations

125ms
250ms
500ms

Easing Functions

0
cubic-bezier(0.543, 1.086, 0.5, -0.383)
1
ease
2
ease-out
3
ease-in-out
4
linear