Log inSign up

Colors

gray

#000000
hsl(0,0%,0%)
rgb(0,0,0)
1.0021.00
#181818
hsl(0,0%,9.41%)
rgb(24,24,24)
1.1817.76
#292929
hsl(0,0%,16.08%)
rgb(41,41,41)
1.4414.55
#3b3b3b
hsl(0,0%,23.14%)
rgb(59,59,59)
1.8711.20
#4f4f4f
hsl(0,0%,30.98%)
rgb(79,79,79)
2.568.19
#646464
hsl(0,0%,39.22%)
rgb(100,100,100)
3.555.92
#7a7a7a
hsl(0,0%,47.84%)
rgb(122,122,122)
4.894.29
#939393
hsl(0,0%,57.65%)
rgb(147,147,147)
6.843.07
#acacac
hsl(0,0%,67.45%)
rgb(172,172,172)
9.252.27
#c7c7c7
hsl(0,0%,78.04%)
rgb(199,199,199)
12.421.69
#e2e2e2
hsl(0,0%,88.63%)
rgb(226,226,226)
16.211.30
#ffffff
hsl(0,0%,100%)
rgb(255,255,255)
21.001.00

slate gray

#0d0d0e
hsl(240,3.7%,5.29%)
rgb(13,13,14)
1.0819.43
#1e1f20
hsl(210,3.23%,12.16%)
rgb(30,31,32)
1.2716.51
#2d3032
hsl(204,5.26%,18.63%)
rgb(45,48,50)
1.5813.29
#3e4145
hsl(214.29,5.34%,25.69%)
rgb(62,65,69)
2.0510.26
#505458
hsl(210,4.76%,32.94%)
rgb(80,84,88)
2.757.64
#63686d
hsl(210,4.81%,40.78%)
rgb(99,104,109)
3.735.63
#787d82
hsl(210,4%,49.02%)
rgb(120,125,130)
5.054.15
#8e9397
hsl(206.67,4.15%,57.45%)
rgb(142,147,151)
6.773.10
#a6aaae
hsl(210,4.71%,66.67%)
rgb(166,170,174)
8.982.34
#bec1c4
hsl(210,4.84%,75.69%)
rgb(190,193,196)
11.611.81
#d8dadc
hsl(210,5.41%,85.49%)
rgb(216,218,220)
14.981.40
#f2f3f3
hsl(180,4%,95.1%)
rgb(242,243,243)
18.891.11

blue

#0b0c15
hsl(234,31.25%,6.27%)
rgb(11,12,21)
1.0819.49
#181d31
hsl(228,34.25%,14.31%)
rgb(24,29,49)
1.2616.68
#222c4f
hsl(226.67,39.82%,22.16%)
rgb(34,44,79)
1.5413.63
#2e3d6d
hsl(225.71,40.65%,30.39%)
rgb(46,61,109)
2.0010.48
#3c4f8a
hsl(225.38,39.39%,38.82%)
rgb(60,79,138)
2.687.84
#4e62a5
hsl(226.21,35.8%,47.65%)
rgb(78,98,165)
3.615.81
#6476bc
hsl(227.73,39.64%,56.47%)
rgb(100,118,188)
4.864.32
#7e8dce
hsl(228.75,44.94%,65.1%)
rgb(126,141,206)
6.593.19
#99a4de
hsl(230.43,51.11%,73.53%)
rgb(153,164,222)
8.722.41
#b6bdea
hsl(231.92,55.32%,81.57%)
rgb(182,189,234)
11.461.83
#d3d7f3
hsl(232.5,57.14%,89.02%)
rgb(211,215,243)
14.781.42
#f1f2fb
hsl(234,55.56%,96.47%)
rgb(241,242,251)
18.831.12

indigo

#14101d
hsl(258.46,28.89%,8.82%)
rgb(20,16,29)
1.1218.72
#221e3a
hsl(248.57,31.82%,17.25%)
rgb(34,30,58)
1.3115.97
#322b59
hsl(249.13,34.85%,25.88%)
rgb(50,43,89)
1.6312.92
#433a78
hsl(248.71,34.83%,34.9%)
rgb(67,58,120)
2.129.93
#554b95
hsl(248.11,33.04%,43.92%)
rgb(85,75,149)
2.837.43
#695daf
hsl(248.78,33.88%,52.55%)
rgb(105,93,175)
3.795.55
#7f72c5
hsl(249.4,41.71%,60.98%)
rgb(127,114,197)
5.124.11
#9688d7
hsl(250.63,49.69%,68.82%)
rgb(150,136,215)
6.803.09
#aea0e4
hsl(252.35,55.74%,76.08%)
rgb(174,160,228)
8.952.35
#c5baef
hsl(252.45,62.35%,83.33%)
rgb(197,186,239)
11.641.80
#ddd5f6
hsl(254.55,64.71%,90%)
rgb(221,213,246)
14.921.41
#f4f1fc
hsl(256.36,64.71%,96.67%)
rgb(244,241,252)
18.831.11

violet

#170f19
hsl(288,25%,7.84%)
rgb(23,15,25)
1.1218.77
#2c1c32
hsl(283.64,28.21%,15.29%)
rgb(44,28,50)
1.3215.92
#41284c
hsl(281.67,31.03%,22.75%)
rgb(65,40,76)
1.6312.86
#583666
hsl(282.5,30.77%,30.59%)
rgb(88,54,102)
2.139.84
#6e4580
hsl(281.69,29.95%,38.63%)
rgb(110,69,128)
2.837.43
#845798
hsl(281.54,27.2%,46.86%)
rgb(132,87,152)
3.805.53
#9a6cae
hsl(281.82,28.95%,55.29%)
rgb(154,108,174)
5.134.09
#af83c0
hsl(283.28,32.62%,63.33%)
rgb(175,131,192)
6.833.07
#c29cd1
hsl(283.02,36.55%,71.57%)
rgb(194,156,209)
8.972.34
#d5b7e0
hsl(283.9,39.81%,79.8%)
rgb(213,183,224)
11.681.80
#e6d3ed
hsl(283.85,41.94%,87.84%)
rgb(230,211,237)
14.911.41
#f7f0f9
hsl(286.67,42.86%,95.88%)
rgb(247,240,249)
18.791.12

magenta

#1c0f14
hsl(336.92,30.23%,8.43%)
rgb(28,15,20)
1.1318.62
#361925
hsl(335.17,36.71%,15.49%)
rgb(54,25,37)
1.3215.88
#522337
hsl(334.47,40.17%,22.94%)
rgb(82,35,55)
1.6512.69
#6e2f4a
hsl(334.29,40.13%,30.78%)
rgb(110,47,74)
2.179.68
#893d5e
hsl(333.95,38.38%,38.82%)
rgb(137,61,94)
2.897.26
#a24f72
hsl(334.7,34.44%,47.25%)
rgb(162,79,114)
3.905.39
#b96487
hsl(335.29,37.78%,55.88%)
rgb(185,100,135)
5.244.01
#cc7c9c
hsl(336,43.96%,64.31%)
rgb(204,124,156)
6.933.03
#dc97b1
hsl(337.39,49.64%,72.75%)
rgb(220,151,177)
9.102.31
#e9b4c7
hsl(338.49,54.64%,80.98%)
rgb(233,180,199)
11.821.78
#f4d1dd
hsl(339.43,61.4%,88.82%)
rgb(244,209,221)
15.011.40
#fcf0f4
hsl(340,66.67%,96.47%)
rgb(252,240,244)
18.911.11

red

#1f0e0b
hsl(9,47.62%,8.24%)
rgb(31,14,11)
1.1318.65
#3d1716
hsl(1.54,46.99%,16.27%)
rgb(61,23,22)
1.3315.76
#5d1e1f
hsl(359.05,51.22%,24.12%)
rgb(93,30,31)
1.6712.57
#7c282a
hsl(358.57,51.22%,32.16%)
rgb(124,40,42)
2.199.57
#9a3537
hsl(358.81,48.79%,40.59%)
rgb(154,53,55)
2.947.15
#b64647
hsl(359.46,44.44%,49.41%)
rgb(182,70,71)
3.965.31
#ce5c5b
hsl(0.52,53.99%,58.24%)
rgb(206,92,91)
5.313.96
#e17672
hsl(2.16,64.91%,66.47%)
rgb(225,118,114)
7.042.98
#ef938d
hsl(3.67,75.38%,74.51%)
rgb(239,147,141)
9.232.28
#f9b1ab
hsl(4.62,86.67%,82.35%)
rgb(249,177,171)
11.901.76
#ffd0cb
hsl(5.77,100%,89.8%)
rgb(255,208,203)
15.141.39
#ffefee
hsl(3.53,100%,96.67%)
rgb(255,239,238)
18.831.12

orange

#211106
hsl(24.44,69.23%,7.65%)
rgb(33,17,6)
1.1518.30
#3d1c0d
hsl(18.75,64.86%,14.51%)
rgb(61,28,13)
1.3715.32
#5b2711
hsl(17.84,68.52%,21.18%)
rgb(91,39,17)
1.7412.05
#793315
hsl(18,70.42%,27.84%)
rgb(121,51,21)
2.309.14
#96401b
hsl(18.05,69.49%,34.71%)
rgb(150,64,27)
3.056.89
#b15024
hsl(18.72,66.2%,41.76%)
rgb(177,80,36)
4.045.19
#c96232
hsl(19.07,60.16%,49.22%)
rgb(201,98,50)
5.283.98
#e07b4a
hsl(19.6,70.75%,58.43%)
rgb(224,123,74)
7.102.96
#f1986a
hsl(20.44,82.82%,68.04%)
rgb(241,152,106)
9.442.22
#fcb590
hsl(20.56,94.74%,77.65%)
rgb(252,181,144)
12.151.73
#ffd4bc
hsl(21.49,100%,86.86%)
rgb(255,212,188)
15.401.36
#fff2eb
hsl(21,100%,96.08%)
rgb(255,242,235)
19.151.10

yellow

#131007
hsl(45,46.15%,5.1%)
rgb(19,16,7)
1.1019.01
#252011
hsl(45,37.04%,10.59%)
rgb(37,32,17)
1.2916.24
#383016
hsl(45.88,43.59%,15.29%)
rgb(56,48,22)
1.6013.10
#4b421b
hsl(48.75,47.06%,20%)
rgb(75,66,27)
2.0910.03
#605420
hsl(48.75,50%,25.1%)
rgb(96,84,32)
2.797.54
#7b6c26
hsl(49.41,52.8%,31.57%)
rgb(123,108,38)
4.025.23
#a59433
hsl(51.05,52.78%,42.35%)
rgb(165,148,51)
6.883.05
#cdba4d
hsl(51.09,56.14%,55.29%)
rgb(205,186,77)
10.731.96
#e6d370
hsl(50.34,70.24%,67.06%)
rgb(230,211,112)
13.921.51
#f4e296
hsl(48.51,81.03%,77.25%)
rgb(244,226,150)
16.171.30
#fcefc2
hsl(46.55,90.63%,87.45%)
rgb(252,239,194)
18.261.15
#fefaef
hsl(44,88.24%,96.67%)
rgb(254,250,239)
20.131.04

green

#10180a
hsl(94.29,41.18%,6.67%)
rgb(16,24,10)
1.1618.15
#1a2a15
hsl(105.71,33.33%,12.35%)
rgb(26,42,21)
1.3915.15
#223e1e
hsl(112.5,34.78%,18.04%)
rgb(34,62,30)
1.7811.83
#2b5329
hsl(117.14,33.87%,24.31%)
rgb(43,83,41)
2.378.85
#346735
hsl(121.18,32.9%,30.39%)
rgb(52,103,53)
3.146.69
#407c43
hsl(123,31.91%,36.86%)
rgb(64,124,67)
4.185.02
#509054
hsl(123.75,28.57%,43.92%)
rgb(80,144,84)
5.463.85
#69a76a
hsl(120.97,26.05%,53.33%)
rgb(105,167,106)
7.342.86
#89bd86
hsl(116.73,29.41%,63.33%)
rgb(137,189,134)
9.692.17
#acd1a5
hsl(110.45,32.35%,73.33%)
rgb(172,209,165)
12.421.69
#cfe5c7
hsl(104,36.59%,83.92%)
rgb(207,229,199)
15.691.34
#f1f8ed
hsl(98.18,44%,95.1%)
rgb(241,248,237)
19.391.08

teal

#060b09
hsl(156,29.41%,3.33%)
rgb(6,11,9)
1.0619.82
#14201c
hsl(160,23.08%,10.2%)
rgb(20,32,28)
1.2516.76
#1c342c
hsl(160,30%,15.69%)
rgb(28,52,44)
1.5813.32
#24493d
hsl(160.54,33.94%,21.37%)
rgb(36,73,61)
2.1010.02
#2d5d4f
hsl(162.5,34.78%,27.06%)
rgb(45,93,79)
2.797.53
#377261
hsl(162.71,34.91%,33.14%)
rgb(55,114,97)
3.745.61
#438572
hsl(162.73,33%,39.22%)
rgb(67,133,114)
4.844.34
#519883
hsl(162.25,30.47%,45.69%)
rgb(81,152,131)
6.173.40
#6db29e
hsl(162.61,30.94%,56.27%)
rgb(109,178,158)
8.512.47
#94cdbc
hsl(162.11,36.31%,69.22%)
rgb(148,205,188)
11.721.79
#bfe3d7
hsl(160,39.13%,81.96%)
rgb(191,227,215)
15.181.38
#eaf6f2
hsl(160,40%,94.12%)
rgb(234,246,242)
18.961.11

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

5284 accessible combinations



New theme

Start with a template
Color systems
Themes