Log inSign up

Colors

gray

#000000
hsl(0,0%,0%)
rgb(0,0,0)
1.0021.00
#1c1c1c
hsl(0,0%,10.98%)
rgb(28,28,28)
1.2317.04
#303030
hsl(0,0%,18.82%)
rgb(48,48,48)
1.5913.20
#474747
hsl(0,0%,27.84%)
rgb(71,71,71)
2.269.29
#5d5d5d
hsl(0,0%,36.47%)
rgb(93,93,93)
3.196.58
#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

blue gray

#0e0e11
hsl(240,9.68%,6.08%)
rgb(14,14,17)
1.0919.27
#21222a
hsl(233.33,12%,14.71%)
rgb(33,34,42)
1.3315.83
#343544
hsl(236.25,13.33%,23.53%)
rgb(52,53,68)
1.7412.08
#484a5e
hsl(234.55,13.25%,32.55%)
rgb(72,74,94)
2.428.69
#5c5f78
hsl(233.57,13.21%,41.57%)
rgb(92,95,120)
3.366.24
#717490
hsl(234.19,12.25%,50.39%)
rgb(113,116,144)
4.604.56
#8789a6
hsl(236.13,14.83%,59.02%)
rgb(135,137,166)
6.163.41
#9c9eba
hsl(236,17.86%,67.06%)
rgb(156,158,186)
8.012.62
#b1b3cb
hsl(235.38,20%,74.51%)
rgb(177,179,203)
10.182.06
#c6c8db
hsl(234.29,22.58%,81.76%)
rgb(198,200,219)
12.691.66
#dcdce9
hsl(240,22.81%,88.82%)
rgb(220,220,233)
15.461.36
#f1f1f6
hsl(240,21.74%,95.49%)
rgb(241,241,246)
18.651.13

blue

#0d0e1a
hsl(235.38,33.33%,7.65%)
rgb(13,14,26)
1.0919.18
#182142
hsl(227.14,46.67%,17.65%)
rgb(24,33,66)
1.3415.73
#1e336d
hsl(224.05,56.83%,27.25%)
rgb(30,51,109)
1.7512.00
#254797
hsl(222.11,60.64%,36.86%)
rgb(37,71,151)
2.438.65
#325bbd
hsl(222.3,58.16%,46.86%)
rgb(50,91,189)
3.376.24
#476fde
hsl(224.11,69.59%,57.45%)
rgb(71,111,222)
4.604.57
#6284f6
hsl(226.22,89.16%,67.45%)
rgb(98,132,246)
6.153.41
#809aff
hsl(227.72,100%,75.1%)
rgb(128,154,255)
7.982.63
#9fb0ff
hsl(229.38,100%,81.18%)
rgb(159,176,255)
10.132.07
#bcc6ff
hsl(231.04,100%,86.86%)
rgb(188,198,255)
12.661.66
#d9deff
hsl(232.11,100%,92.55%)
rgb(217,222,255)
15.841.33
#f4f5ff
hsl(234.55,100%,97.84%)
rgb(244,245,255)
19.351.09

indigo

#120c1d
hsl(261.18,41.46%,8.04%)
rgb(18,12,29)
1.1019.16
#211b4d
hsl(247.2,48.08%,20.39%)
rgb(33,27,77)
1.3315.81
#2f297f
hsl(244.19,51.19%,32.94%)
rgb(47,41,127)
1.7412.04
#3e38b0
hsl(243,51.72%,45.49%)
rgb(62,56,176)
2.408.76
#5049dd
hsl(242.84,68.52%,57.65%)
rgb(80,73,221)
3.346.29
#675bff
hsl(244.39,100%,67.84%)
rgb(103,91,255)
4.524.65
#8170ff
hsl(247.13,100%,71.96%)
rgb(129,112,255)
5.703.69
#9d87ff
hsl(251,100%,76.47%)
rgb(157,135,255)
7.342.86
#b7a0ff
hsl(254.53,100%,81.37%)
rgb(183,160,255)
9.492.21
#d0baff
hsl(259.13,100%,86.47%)
rgb(208,186,255)
12.151.73
#e5d6ff
hsl(261.95,100%,91.96%)
rgb(229,214,255)
15.391.36
#f7f1ff
hsl(265.71,100%,97.25%)
rgb(247,241,255)
18.981.11

violet

#170a1b
hsl(285.88,45.95%,7.25%)
rgb(23,10,27)
1.1019.17
#321545
hsl(276.25,53.33%,17.65%)
rgb(50,21,69)
1.3315.80
#501b71
hsl(276.98,61.43%,27.45%)
rgb(80,27,113)
1.7412.09
#6d239d
hsl(276.39,63.54%,37.65%)
rgb(109,35,157)
2.388.83
#8a2fc5
hsl(276.4,61.48%,47.84%)
rgb(138,47,197)
3.296.38
#a641e7
hsl(276.51,77.57%,58.04%)
rgb(166,65,231)
4.534.63
#be58ff
hsl(276.65,100%,67.25%)
rgb(190,88,255)
6.033.48
#d374ff
hsl(281.01,100%,72.75%)
rgb(211,116,255)
7.712.72
#e392ff
hsl(284.59,100%,78.63%)
rgb(227,146,255)
9.822.14
#f0b1ff
hsl(288.46,100%,84.71%)
rgb(240,177,255)
12.441.69
#f9d0ff
hsl(292.34,100%,90.78%)
rgb(249,208,255)
15.491.36
#fef0ff
hsl(296,100%,97.06%)
rgb(254,240,255)
19.121.10

magenta

#170915
hsl(308.57,43.75%,6.27%)
rgb(23,9,21)
1.0919.33
#381436
hsl(303.33,47.37%,14.9%)
rgb(56,20,54)
1.3215.89
#5b1859
hsl(301.79,58.26%,22.55%)
rgb(91,24,89)
1.7212.21
#7f1e7c
hsl(301.86,61.78%,30.78%)
rgb(127,30,124)
2.388.83
#a0289d
hsl(301.5,60%,39.22%)
rgb(160,40,157)
3.296.39
#bf3abb
hsl(301.8,53.41%,48.82%)
rgb(191,58,187)
4.544.63
#d853d2
hsl(302.71,63.03%,58.63%)
rgb(216,83,210)
6.093.45
#ea70e4
hsl(302.95,74.39%,67.84%)
rgb(234,112,228)
7.942.65
#f78ff0
hsl(304.04,86.67%,76.47%)
rgb(247,143,240)
10.142.07
#ffaef8
hsl(305.19,100%,84.12%)
rgb(255,174,248)
12.661.66
#ffcefc
hsl(303.67,100%,90.39%)
rgb(255,206,252)
15.491.36
#ffeefe
hsl(303.53,100%,96.67%)
rgb(255,238,254)
18.911.11

red

#19090a
hsl(356.25,47.06%,6.67%)
rgb(25,9,10)
1.0819.36
#3e131a
hsl(350.23,53.09%,15.88%)
rgb(62,19,26)
1.3116.00
#651829
hsl(346.75,61.6%,24.51%)
rgb(101,24,41)
1.7212.24
#8d1d38
hsl(345.54,65.88%,33.33%)
rgb(141,29,56)
2.378.88
#b22749
hsl(345.32,64.06%,42.55%)
rgb(178,39,73)
3.286.40
#d23a5b
hsl(346.97,62.81%,52.55%)
rgb(210,58,91)
4.504.67
#ec5370
hsl(348.63,80.1%,62.55%)
rgb(236,83,112)
6.043.48
#ff7086
hsl(350.77,100%,71.96%)
rgb(255,112,134)
7.912.65
#ff909e
hsl(352.43,100%,78.24%)
rgb(255,144,158)
9.742.16
#ffb0b9
hsl(353.16,100%,84.51%)
rgb(255,176,185)
12.161.73
#ffd0d4
hsl(354.89,100%,90.78%)
rgb(255,208,212)
15.231.38
#fff0f1
hsl(356,100%,97.06%)
rgb(255,240,241)
18.991.11

orange

#200d02
hsl(22,88.24%,6.67%)
rgb(32,13,2)
1.1218.75
#431706
hsl(16.72,83.56%,14.31%)
rgb(67,23,6)
1.3615.40
#691e0a
hsl(12.63,82.61%,22.55%)
rgb(105,30,10)
1.7911.73
#8e280d
hsl(12.56,83.23%,30.39%)
rgb(142,40,13)
2.468.54
#b13514
hsl(12.61,79.7%,38.63%)
rgb(177,53,20)
3.396.20
#d14721
hsl(12.95,72.73%,47.45%)
rgb(209,71,33)
4.634.53
#ea5e36
hsl(13.33,81.08%,56.47%)
rgb(234,94,54)
6.153.41
#fd7950
hsl(14.22,97.74%,65.29%)
rgb(253,121,80)
8.032.62
#ff9670
hsl(15.94,100%,71.96%)
rgb(255,150,112)
9.852.13
#ffb495
hsl(17.55,100%,79.22%)
rgb(255,180,149)
12.211.72
#ffd2be
hsl(18.46,100%,87.25%)
rgb(255,210,190)
15.211.38
#fff0e9
hsl(19.09,100%,95.69%)
rgb(255,240,233)
18.891.11

gold

#160f05
hsl(35.29,62.96%,5.29%)
rgb(22,15,5)
1.1019.01
#402e11
hsl(37.02,58.02%,15.88%)
rgb(64,46,17)
1.6212.99
#6e4d14
hsl(38,69.23%,25.49%)
rgb(110,77,20)
2.737.68
#9c6c18
hsl(38.18,73.33%,35.29%)
rgb(156,108,24)
4.574.59
#c68a20
hsl(38.31,72.17%,45.1%)
rgb(198,138,32)
7.062.98
#eba62e
hsl(38.1,82.53%,55.1%)
rgb(235,166,46)
10.032.09
#ffbe44
hsl(39.14,100%,63.33%)
rgb(255,190,68)
12.701.65
#ffd15e
hsl(42.86,100%,68.43%)
rgb(255,209,94)
14.531.44
#ffe07c
hsl(45.8,100%,74.31%)
rgb(255,224,124)
16.211.30
#ffeb9b
hsl(48,100%,80.39%)
rgb(255,235,155)
17.611.19
#fff3bc
hsl(49.25,100%,86.86%)
rgb(255,243,188)
18.801.12
#fffade
hsl(50.91,100%,93.53%)
rgb(255,250,222)
19.981.05

yellow

#0d0c04
hsl(53.33,52.94%,3.33%)
rgb(13,12,4)
1.0719.60
#332f11
hsl(52.94,50%,13.33%)
rgb(51,47,17)
1.5613.50
#585315
hsl(55.52,61.47%,21.37%)
rgb(88,83,21)
2.667.89
#7f7719
hsl(55.29,67.11%,29.8%)
rgb(127,119,25)
4.564.61
#a49a20
hsl(55.45,67.35%,38.43%)
rgb(164,154,32)
7.222.91
#c5ba2c
hsl(55.69,63.49%,47.25%)
rgb(197,186,44)
10.432.01
#e1d43f
hsl(55.19,72.97%,56.47%)
rgb(225,212,63)
13.691.53
#f6e857
hsl(54.72,89.83%,65.29%)
rgb(246,232,87)
16.601.27
#fff673
hsl(56.14,100%,72.55%)
rgb(255,246,115)
18.681.12
#fffe90
hsl(59.46,100%,78.24%)
rgb(255,254,144)
19.831.06
#ffffae
hsl(60,100%,84.12%)
rgb(255,255,174)
20.171.04
#ffffcc
hsl(60,100%,90%)
rgb(255,255,204)
20.431.03

lime

#161708
hsl(64,48.39%,6.08%)
rgb(22,23,8)
1.1618.10
#323711
hsl(67.89,52.78%,14.12%)
rgb(50,55,17)
1.6912.42
#505a15
hsl(68.7,62.16%,21.76%)
rgb(80,90,21)
2.817.46
#6e7c19
hsl(68.48,66.44%,29.22%)
rgb(110,124,25)
4.564.61
#8b9c22
hsl(68.36,64.21%,37.25%)
rgb(139,156,34)
6.883.05
#a6b932
hsl(68.44,57.45%,46.08%)
rgb(166,185,50)
9.612.19
#bed049
hsl(68,58.95%,55.1%)
rgb(190,208,73)
12.311.71
#d1e264
hsl(68.1,68.48%,63.92%)
rgb(209,226,100)
14.771.42
#e1ee83
hsl(67.29,75.89%,72.35%)
rgb(225,238,131)
16.761.25
#edf6a3
hsl(66.51,82.18%,80.2%)
rgb(237,246,163)
18.311.15
#f6fbc4
hsl(65.45,87.3%,87.65%)
rgb(246,251,196)
19.511.08
#fcfee6
hsl(65,92.31%,94.9%)
rgb(252,254,230)
20.461.03

green

#071209
hsl(130.91,44%,4.9%)
rgb(7,18,9)
1.1019.10
#102816
hsl(135,42.86%,10.98%)
rgb(16,40,22)
1.3415.71
#133f21
hsl(139.09,53.66%,16.08%)
rgb(19,63,33)
1.7611.93
#18572d
hsl(140,56.76%,21.76%)
rgb(24,87,45)
2.448.61
#216f3b
hsl(140,54.17%,28.24%)
rgb(33,111,59)
3.406.17
#32864b
hsl(137.86,45.65%,36.08%)
rgb(50,134,75)
4.654.52
#499c60
hsl(136.63,36.24%,44.9%)
rgb(73,156,96)
6.213.38
#66b178
hsl(134.4,32.47%,54.71%)
rgb(102,177,120)
8.132.58
#85c492
hsl(132.38,34.81%,64.51%)
rgb(133,196,146)
10.312.04
#a7d6af
hsl(130.21,36.43%,74.71%)
rgb(167,214,175)
12.881.63
#cae7cf
hsl(130.34,37.66%,84.9%)
rgb(202,231,207)
15.841.33
#eef7ef
hsl(126.67,36%,95.1%)
rgb(238,247,239)
19.191.09

teal

#07110f
hsl(168,41.67%,4.71%)
rgb(7,17,15)
1.1019.16
#102722
hsl(166.96,41.82%,10.78%)
rgb(16,39,34)
1.3415.73
#133d35
hsl(168.57,52.5%,15.69%)
rgb(19,61,53)
1.7512.02
#18544a
hsl(170,55.56%,21.18%)
rgb(24,84,74)
2.418.73
#216b5e
hsl(169.46,52.86%,27.45%)
rgb(33,107,94)
3.336.31
#328173
hsl(169.37,44.13%,35.1%)
rgb(50,129,115)
4.524.64
#499789
hsl(169.23,34.82%,43.92%)
rgb(73,151,137)
6.073.46
#65ac9e
hsl(168.17,29.96%,53.53%)
rgb(101,172,158)
7.952.64
#85c0b3
hsl(166.78,31.89%,63.73%)
rgb(133,192,179)
10.192.06
#a7d3c9
hsl(166.36,33.33%,74.12%)
rgb(167,211,201)
12.801.64
#cae5de
hsl(164.44,34.18%,84.51%)
rgb(202,229,222)
15.771.33
#eef7f4
hsl(160,36%,95.1%)
rgb(238,247,244)
19.251.09

cyan

#081111
hsl(180,36%,4.9%)
rgb(8,17,17)
1.1019.12
#112627
hsl(182.73,39.29%,10.98%)
rgb(17,38,39)
1.3315.79
#143c3e
hsl(182.86,51.22%,16.08%)
rgb(20,60,62)
1.7512.03
#185356
hsl(182.9,56.36%,21.57%)
rgb(24,83,86)
2.418.71
#226a6d
hsl(182.4,52.45%,28.04%)
rgb(34,106,109)
3.356.27
#338084
hsl(182.96,44.26%,35.88%)
rgb(51,128,132)
4.564.60
#4b969a
hsl(183.04,34.5%,44.9%)
rgb(75,150,154)
6.133.43
#67abae
hsl(182.54,30.47%,54.31%)
rgb(103,171,174)
8.012.62
#87bfc1
hsl(182.07,31.87%,64.31%)
rgb(135,191,193)
10.252.05
#a8d2d4
hsl(182.73,33.85%,74.51%)
rgb(168,210,212)
12.831.64
#cbe4e5
hsl(182.31,33.33%,84.71%)
rgb(203,228,229)
15.771.33
#eef6f7
hsl(186.67,36%,95.1%)
rgb(238,246,247)
19.161.10

blue

#0f1113
hsl(210,11.76%,6.67%)
rgb(15,17,19)
1.1118.92
#21262d
hsl(215,15.38%,15.29%)
rgb(33,38,45)
1.3815.22
#333c48
hsl(214.29,17.07%,24.12%)
rgb(51,60,72)
1.8811.17
#455364
hsl(212.9,18.34%,33.14%)
rgb(69,83,100)
2.677.85
#59697f
hsl(214.74,17.59%,42.35%)
rgb(89,105,127)
3.755.60
#6e8098
hsl(214.29,16.94%,51.37%)
rgb(110,128,152)
5.204.04
#8396ae
hsl(213.49,20.98%,59.8%)
rgb(131,150,174)
6.943.03
#99aac1
hsl(214.5,24.39%,67.84%)
rgb(153,170,193)
8.872.37
#b0bed2
hsl(215.29,27.42%,75.69%)
rgb(176,190,210)
11.141.88
#c6d1e1
hsl(215.56,31.03%,82.94%)
rgb(198,209,225)
13.611.54
#dde4ed
hsl(213.75,30.77%,89.8%)
rgb(221,228,237)
16.391.28
#f4f6f9
hsl(216,29.41%,96.67%)
rgb(244,246,249)
19.401.08

Color modes

Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example
Text color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PrimaryPrimarySome muted text as an example

Typefaces

-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif
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

Log inSign up
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

8878 accessible combinations



New theme

Start with a template
Color systems
Themes