Log inSign up

Colors

overlay 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

overlay shadow

#000000f0
hsla(0,0%,0%,0.94)
rgba(0,0,0,0.94)
1.0021.00
#000000e4
hsla(0,0%,0%,0.895)
rgba(0,0,0,0.895)
1.0021.00
#000000d0
hsla(0,0%,0%,0.815)
rgba(0,0,0,0.815)
1.0021.00
#000000ba
hsla(0,0%,0%,0.73)
rgba(0,0,0,0.73)
1.0021.00
#000000a3
hsla(0,0%,0%,0.64)
rgba(0,0,0,0.64)
1.0021.00
#0000008c
hsla(0,0%,0%,0.55)
rgba(0,0,0,0.55)
1.0021.00
#00000073
hsla(0,0%,0%,0.45)
rgba(0,0,0,0.45)
1.0021.00
#0000005c
hsla(0,0%,0%,0.36)
rgba(0,0,0,0.36)
1.0021.00
#00000047
hsla(0,0%,0%,0.28)
rgba(0,0,0,0.28)
1.0021.00
#00000030
hsla(0,0%,0%,0.19)
rgba(0,0,0,0.19)
1.0021.00
#0000001a
hsla(0,0%,0%,0.1)
rgba(0,0,0,0.1)
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
#171717
hsl(0,0%,9.02%)
rgb(23,23,23)
1.1717.93
#2f2f2f
hsl(0,0%,18.43%)
rgb(47,47,47)
1.5713.39
#464646
hsl(0,0%,27.45%)
rgb(70,70,70)
2.229.44
#5e5e5e
hsl(0,0%,36.86%)
rgb(94,94,94)
3.246.48
#757575
hsl(0,0%,45.88%)
rgb(117,117,117)
4.564.61
#8c8c8c
hsl(0,0%,54.9%)
rgb(140,140,140)
6.253.36
#a3a3a3
hsl(0,0%,63.92%)
rgb(163,163,163)
8.332.52
#bababa
hsl(0,0%,72.94%)
rgb(186,186,186)
10.821.94
#d1d1d1
hsl(0,0%,81.96%)
rgb(209,209,209)
13.751.53
#e8e8e8
hsl(0,0%,90.98%)
rgb(232,232,232)
17.141.23
#ffffff
hsl(0,0%,100%)
rgb(255,255,255)
21.001.00

slate gray

#09090b
hsl(240,10%,3.92%)
rgb(9,9,11)
1.0619.90
#1d1d22
hsl(240,7.94%,12.35%)
rgb(29,29,34)
1.2516.79
#313138
hsl(240,6.67%,20.59%)
rgb(49,49,56)
1.6312.91
#45444f
hsl(245.45,7.48%,28.82%)
rgb(69,68,79)
2.199.58
#595866
hsl(244.29,7.37%,37.25%)
rgb(89,88,102)
3.016.97
#6d6c7d
hsl(243.53,7.3%,45.69%)
rgb(109,108,125)
4.095.13
#838292
hsl(243.75,6.84%,54.12%)
rgb(131,130,146)
5.573.77
#9a9aa7
hsl(240,6.88%,62.94%)
rgb(154,154,167)
7.552.78
#b2b1bb
hsl(246,6.85%,71.37%)
rgb(178,177,187)
9.902.12
#c9c9d0
hsl(240,6.93%,80.2%)
rgb(201,201,208)
12.751.65
#e1e0e4
hsl(255,6.9%,88.63%)
rgb(225,224,228)
15.981.31
#f8f8f9
hsl(240,7.69%,97.45%)
rgb(248,248,249)
19.791.06

blue

#030b18
hsl(217.14,77.78%,5.29%)
rgb(3,11,24)
1.0619.72
#071e3f
hsl(215.36,80%,13.73%)
rgb(7,30,63)
1.2716.58
#0c3166
hsl(215.33,78.95%,22.35%)
rgb(12,49,102)
1.6512.75
#10448d
hsl(215.04,79.62%,30.78%)
rgb(16,68,141)
2.239.40
#1556b4
hsl(215.47,79.1%,39.41%)
rgb(21,86,180)
3.026.95
#1969db
hsl(215.26,79.51%,47.84%)
rgb(25,105,219)
4.085.14
#317fed
hsl(215.11,83.93%,56.08%)
rgb(49,127,237)
5.393.90
#5797f0
hsl(214.9,83.61%,64.12%)
rgb(87,151,240)
7.092.96
#7daef4
hsl(215.29,84.4%,72.35%)
rgb(125,174,244)
9.232.27
#a3c6f7
hsl(215,84%,80.39%)
rgb(163,198,247)
11.981.75
#c9ddfa
hsl(215.51,83.05%,88.43%)
rgb(201,221,250)
15.211.38
#eff5fe
hsl(216,88.24%,96.67%)
rgb(239,245,254)
19.161.10

indigo

#080614
hsl(248.57,53.85%,5.1%)
rgb(8,6,20)
1.0520.07
#19143f
hsl(246.98,51.81%,16.27%)
rgb(25,20,63)
1.2117.31
#2a216a
hsl(247.4,52.52%,27.25%)
rgb(42,33,106)
1.5213.78
#3a2e95
hsl(246.99,52.82%,38.24%)
rgb(58,46,149)
2.0010.48
#4b3bc0
hsl(247.22,52.99%,49.22%)
rgb(75,59,192)
2.697.82
#5c49eb
hsl(247.04,80.2%,60.39%)
rgb(92,73,235)
3.615.82
#725fff
hsl(247.13,100%,68.63%)
rgb(114,95,255)
4.804.38
#8c7cff
hsl(247.33,100%,74.31%)
rgb(140,124,255)
6.443.26
#a69aff
hsl(247.13,100%,80.2%)
rgb(166,154,255)
8.692.42
#c0b7ff
hsl(247.5,100%,85.88%)
rgb(192,183,255)
11.461.83
#dad5ff
hsl(247.14,100%,91.76%)
rgb(218,213,255)
14.941.41
#f4f3ff
hsl(245,100%,97.65%)
rgb(244,243,255)
19.111.10

violet

#110517
hsl(280,64.29%,5.49%)
rgb(17,5,23)
1.0619.85
#2e0d3e
hsl(280.41,65.33%,14.71%)
rgb(46,13,62)
1.2416.89
#4b1465
hsl(280.74,66.94%,23.73%)
rgb(75,20,101)
1.5913.23
#681c8c
hsl(280.71,66.67%,32.94%)
rgb(104,28,140)
2.139.84
#8424b3
hsl(280.28,66.51%,42.16%)
rgb(132,36,179)
2.887.28
#a12cda
hsl(280.34,70.16%,51.37%)
rgb(161,44,218)
3.895.40
#b543ec
hsl(280.47,81.64%,59.41%)
rgb(181,67,236)
4.984.22
#c366f0
hsl(280.43,82.14%,67.06%)
rgb(195,102,240)
6.483.24
#d089f3
hsl(280.19,81.54%,74.51%)
rgb(208,137,243)
8.552.45
#deabf7
hsl(280.26,82.61%,81.96%)
rgb(222,171,247)
11.271.86
#eccefa
hsl(280.91,81.48%,89.41%)
rgb(236,206,250)
14.781.42
#f9f0fe
hsl(278.57,87.5%,96.86%)
rgb(249,240,254)
18.921.11

magenta

#13040f
hsl(316,65.22%,4.51%)
rgb(19,4,15)
1.0519.96
#350a2c
hsl(312.56,68.25%,12.35%)
rgb(53,10,44)
1.2317.06
#581148
hsl(313.52,67.62%,20.59%)
rgb(88,17,72)
1.5913.22
#7b1765
hsl(313.2,68.49%,28.63%)
rgb(123,23,101)
2.159.76
#9e1e82
hsl(313.13,68.09%,36.86%)
rgb(158,30,130)
2.967.09
#c1249e
hsl(313.38,68.56%,44.9%)
rgb(193,36,158)
4.015.23
#d43cb2
hsl(313.42,63.87%,53.33%)
rgb(212,60,178)
5.094.13
#dc61c1
hsl(313.17,63.73%,62.16%)
rgb(220,97,193)
6.523.22
#e485cf
hsl(313.26,63.76%,70.78%)
rgb(228,133,207)
8.552.45
#eca9dd
hsl(313.43,63.81%,79.41%)
rgb(236,169,221)
11.291.86
#f4ceec
hsl(312.63,63.33%,88.24%)
rgb(244,206,236)
14.891.41
#fcf2fa
hsl(312,62.5%,96.86%)
rgb(252,242,250)
19.221.09

red

#120205
hsl(348.75,80%,3.92%)
rgb(18,2,5)
1.0420.26
#39050f
hsl(348.46,83.87%,12.16%)
rgb(57,5,15)
1.2017.46
#5f0819
hsl(348.28,84.47%,20.2%)
rgb(95,8,25)
1.5413.68
#860b24
hsl(347.8,84.83%,28.43%)
rgb(134,11,36)
2.0910.06
#ac0e2e
hsl(347.85,84.95%,36.47%)
rgb(172,14,46)
2.867.35
#d31138
hsl(347.94,85.09%,44.71%)
rgb(211,17,56)
3.915.37
#e7284e
hsl(348.06,79.92%,53.14%)
rgb(231,40,78)
4.814.36
#ec506f
hsl(348.08,80.41%,61.96%)
rgb(236,80,111)
5.943.53
#f07790
hsl(347.6,80.13%,70.39%)
rgb(240,119,144)
7.752.71
#f49fb0
hsl(348,79.44%,79.02%)
rgb(244,159,176)
10.432.01
#f9c7d1
hsl(348,80.65%,87.84%)
rgb(249,199,209)
14.121.49
#fdeef1
hsl(348,78.95%,96.27%)
rgb(253,238,241)
18.681.12

red orange

#190b05
hsl(18,66.67%,5.88%)
rgb(25,11,5)
1.0919.24
#3d1307
hsl(13.33,79.41%,13.33%)
rgb(61,19,7)
1.2916.22
#601b0a
hsl(11.86,81.13%,20.78%)
rgb(96,27,10)
1.6612.66
#84240c
hsl(12,83.33%,28.24%)
rgb(132,36,12)
2.249.38
#a72c0e
hsl(11.76,84.53%,35.49%)
rgb(167,44,14)
3.016.98
#cb3411
hsl(11.29,84.55%,43.14%)
rgb(203,52,17)
4.045.20
#ee3c13
hsl(11.23,86.56%,50.39%)
rgb(238,60,19)
5.293.97
#fe562f
hsl(11.3,99.04%,59.02%)
rgb(254,86,47)
6.593.19
#fe7d5e
hsl(11.62,98.77%,68.24%)
rgb(254,125,94)
8.312.53
#ffa48e
hsl(11.68,100%,77.84%)
rgb(255,164,142)
10.951.92
#ffccbe
hsl(12.92,100%,87.25%)
rgb(255,204,190)
14.631.44
#fff3ee
hsl(17.65,100%,96.67%)
rgb(255,243,238)
19.311.09

orange

#150d04
hsl(31.76,68%,4.9%)
rgb(21,13,4)
1.0919.24
#2e1c08
hsl(31.58,70.37%,10.59%)
rgb(46,28,8)
1.2916.33
#472a0c
hsl(30.51,71.08%,16.27%)
rgb(71,42,12)
1.6013.09
#603910
hsl(30.75,71.43%,21.96%)
rgb(96,57,16)
2.0910.05
#794714
hsl(30.3,71.63%,27.65%)
rgb(121,71,20)
2.727.71
#a65d13
hsl(30.2,79.46%,36.27%)
rgb(166,93,19)
4.205.00
#d37413
hsl(30.31,83.48%,45.1%)
rgb(211,116,19)
6.283.35
#ff8a14
hsl(30.13,100%,53.92%)
rgb(255,138,20)
8.902.36
#ffa54a
hsl(30.17,100%,64.51%)
rgb(255,165,74)
10.731.96
#ffc081
hsl(30,100%,75.29%)
rgb(255,192,129)
13.111.60
#ffdab7
hsl(29.17,100%,85.88%)
rgb(255,218,183)
15.961.32
#fff5ed
hsl(26.67,100%,96.47%)
rgb(255,245,237)
19.541.07

gold

#140e05
hsl(36,60%,4.9%)
rgb(20,14,5)
1.0919.18
#2c1f0a
hsl(37.06,62.96%,10.59%)
rgb(44,31,10)
1.3116.06
#432f0e
hsl(37.36,65.43%,15.88%)
rgb(67,47,14)
1.6512.71
#5b4013
hsl(37.5,65.45%,21.57%)
rgb(91,64,19)
2.199.60
#725118
hsl(38,65.22%,27.06%)
rgb(114,81,24)
2.917.23
#946818
hsl(38.71,72.09%,33.73%)
rgb(148,104,24)
4.254.94
#d4950d
hsl(41.01,88.44%,44.12%)
rgb(212,149,13)
8.102.59
#eeb028
hsl(41.21,85.34%,54.51%)
rgb(238,176,40)
10.881.93
#f2c259
hsl(41.18,85.47%,64.9%)
rgb(242,194,89)
12.641.66
#f7d38a
hsl(40.18,87.2%,75.49%)
rgb(247,211,138)
14.641.43
#fbe5bc
hsl(39.05,88.73%,86.08%)
rgb(251,229,188)
17.041.23
#fff5e9
hsl(32.73,100%,95.69%)
rgb(255,245,233)
19.491.08

yellow

#111006
hsl(54.55,47.83%,4.51%)
rgb(17,16,6)
1.1019.08
#252405
hsl(58.13,76.19%,8.24%)
rgb(37,36,5)
1.3315.75
#3a3804
hsl(57.78,87.1%,12.16%)
rgb(58,56,4)
1.7512.02
#4e4d03
hsl(59.2,92.59%,15.88%)
rgb(78,77,3)
2.398.80
#636101
hsl(58.78,98%,19.61%)
rgb(99,97,1)
3.246.48
#777500
hsl(58.99,100%,23.33%)
rgb(119,117,0)
4.334.85
#ccc500
hsl(57.94,100%,40%)
rgb(204,197,0)
11.551.82
#fcf433
hsl(57.61,97.1%,59.41%)
rgb(252,244,51)
18.131.16
#fdf67a
hsl(56.79,97.04%,73.53%)
rgb(253,246,122)
18.641.13
#fdf89b
hsl(56.94,96.08%,80%)
rgb(253,248,155)
19.081.10
#fef9bb
hsl(55.52,97.1%,86.47%)
rgb(254,249,187)
19.481.08
#fefadb
hsl(53.14,94.59%,92.75%)
rgb(254,250,219)
19.911.05

green

#091108
hsl(113.33,36%,4.9%)
rgb(9,17,8)
1.1019.17
#0f2611
hsl(125.22,43.4%,10.39%)
rgb(15,38,17)
1.3116.08
#153c1a
hsl(127.69,48.15%,15.88%)
rgb(21,60,26)
1.6912.40
#1b5122
hsl(127.78,50%,21.18%)
rgb(27,81,34)
2.259.35
#21662b
hsl(128.7,51.11%,26.47%)
rgb(33,102,43)
3.007.00
#25833a
hsl(133.4,55.95%,32.94%)
rgb(37,131,58)
4.394.79
#26b056
hsl(140.87,64.49%,41.96%)
rgb(38,176,86)
7.432.83
#35d272
hsl(143.31,63.56%,51.57%)
rgb(53,210,114)
10.611.98
#63dd90
hsl(142.13,64.21%,62.75%)
rgb(99,221,144)
12.281.71
#90e8ae
hsl(140.45,65.67%,73.73%)
rgb(144,232,174)
14.341.46
#bdf3cc
hsl(136.67,69.23%,84.71%)
rgb(189,243,204)
16.861.25
#eafeea
hsl(120,90.91%,95.69%)
rgb(234,254,234)
19.861.06

teal

#07100c
hsl(153.33,39.13%,4.51%)
rgb(7,16,12)
1.0919.29
#0c231a
hsl(156.52,48.94%,9.22%)
rgb(12,35,26)
1.2716.52
#113628
hsl(157.3,52.11%,13.92%)
rgb(17,54,40)
1.5813.27
#164936
hsl(157.65,53.68%,18.63%)
rgb(22,73,54)
2.0410.29
#1b5b45
hsl(159.38,54.24%,23.14%)
rgb(27,91,69)
2.637.99
#177f63
hsl(163.85,69.33%,29.41%)
rgb(23,127,99)
4.254.94
#12a282
hsl(166.67,80%,35.29%)
rgb(18,162,130)
6.523.22
#2abb9b
hsl(166.76,63.32%,44.9%)
rgb(42,187,155)
8.682.42
#5acab1
hsl(166.61,51.38%,57.25%)
rgb(90,202,177)
10.522.00
#8bdac7
hsl(165.57,51.63%,70%)
rgb(139,218,199)
12.951.62
#bbe9dc
hsl(163.04,51.11%,82.35%)
rgb(187,233,220)
15.801.33
#ecf8f2
hsl(150,46.15%,94.9%)
rgb(236,248,242)
19.281.09

cyan

#0a1211
hsl(172.5,28.57%,5.49%)
rgb(10,18,17)
1.1118.96
#102425
hsl(182.86,39.62%,10.39%)
rgb(16,36,37)
1.3016.14
#153639
hsl(185,46.15%,15.29%)
rgb(21,54,57)
1.6212.97
#1b484c
hsl(184.9,47.57%,20.2%)
rgb(27,72,76)
2.0810.11
#215a60
hsl(185.71,48.84%,25.29%)
rgb(33,90,96)
2.707.79
#247981
hsl(185.16,56.36%,32.35%)
rgb(36,121,129)
4.135.09
#24a9b6
hsl(185.34,66.97%,42.75%)
rgb(36,169,182)
7.432.83
#28d6e6
hsl(185.05,79.17%,52.94%)
rgb(40,214,230)
11.851.77
#57e0ec
hsl(184.83,79.68%,63.33%)
rgb(87,224,236)
13.281.58
#85eaf2
hsl(184.4,80.74%,73.53%)
rgb(133,234,242)
15.051.40
#b4f5f9
hsl(183.48,85.19%,84.12%)
rgb(180,245,249)
17.371.21
#e2ffff
hsl(180,100%,94.31%)
rgb(226,255,255)
19.981.05

Typefaces

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

Box Shadows

0
Card titleI thought the most beautiful thing in the world must be shadows

Text Shadows

Aa
035px 58px 52px hsla(184.1,68.51%,46.08%,0.262)

Breakpoints

0 - Global (no media query)
1 16em
Color groups

Color modes

Gradients
Font Sizes

Font Families

Line Heights

Letter Spacing

Text Styles
Space
Border Radius

Border Widths

Border Styles
Box Shadows

Text Shadows
Media queries

Min-width based media queries for setting responsive styles. These values are used when generating responsive css styles as well as within theme definitions.

0
Global - All screen sizes

9332 accessible combinations



New theme

Start with a template
Color systems
Themes