Theme | Components AI

Theme

Color Groups

Color Modes

Gradients

Colors

DisplayContrast threshold

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

#000000e0

hsla(0,0%,0%,0.88)

rgba(0,0,0,0.88)

1.0021.00

#000000c4

hsla(0,0%,0%,0.77)

rgba(0,0,0,0.77)

1.0021.00

#000000a6

hsla(0,0%,0%,0.65)

rgba(0,0,0,0.65)

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

#0000005e

hsla(0,0%,0%,0.37)

rgba(0,0,0,0.37)

1.0021.00

#0000004a

hsla(0,0%,0%,0.29)

rgba(0,0,0,0.29)

1.0021.00

#00000033

hsla(0,0%,0%,0.2)

rgba(0,0,0,0.2)

1.0021.00

#00000021

hsla(0,0%,0%,0.13)

rgba(0,0,0,0.13)

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

#1e1e1e

hsl(0,0%,11.76%)

rgb(30,30,30)

1.2616.67

#3b3b3b

hsl(0,0%,23.14%)

rgb(59,59,59)

1.8711.20

#575757

hsl(0,0%,34.12%)

rgb(87,87,87)

2.917.23

#727272

hsl(0,0%,44.71%)

rgb(114,114,114)

4.374.81

#8b8b8b

hsl(0,0%,54.51%)

rgb(139,139,139)

6.163.41

#a2a2a2

hsl(0,0%,63.53%)

rgb(162,162,162)

8.232.55

#b8b8b8

hsl(0,0%,72.16%)

rgb(184,184,184)

10.591.98

#cbcbcb

hsl(0,0%,79.61%)

rgb(203,203,203)

12.941.62

#dddddd

hsl(0,0%,86.67%)

rgb(221,221,221)

15.461.36

#eeeeee

hsl(0,0%,93.33%)

rgb(238,238,238)

18.101.16

#ffffff

hsl(0,0%,100%)

rgb(255,255,255)

21.001.00

slate gray

#0c0b0e

hsl(260,12%,4.9%)

rgb(12,11,14)

1.0719.63

#24242b

hsl(240,8.86%,15.49%)

rgb(36,36,43)

1.3615.42

#3c3c47

hsl(240,8.4%,25.69%)

rgb(60,60,71)

1.9310.88

#545362

hsl(244,8.29%,35.49%)

rgb(84,83,98)

2.797.53

#6c6a7c

hsl(246.67,7.83%,45.1%)

rgb(108,106,124)

3.995.26

#828194

hsl(243.16,8.15%,54.31%)

rgb(130,129,148)

5.523.81

#9896a9

hsl(246.32,9.95%,62.55%)

rgb(152,150,169)

7.272.89

#acabbd

hsl(243.33,12%,70.59%)

rgb(172,171,189)

9.312.25

#c0bfce

hsl(244,13.27%,77.84%)

rgb(192,191,206)

11.581.81

#d4d3de

hsl(245.45,14.29%,84.9%)

rgb(212,211,222)

14.171.48

#e7e6ed

hsl(248.57,16.28%,91.57%)

rgb(231,230,237)

16.941.24

#f9f9fb

hsl(240,20%,98.04%)

rgb(249,249,251)

19.971.05

blue

#070e19

hsl(216.67,56.25%,6.27%)

rgb(7,14,25)

1.0919.34

#142443

hsl(219.57,54.02%,17.06%)

rgb(20,36,67)

1.3615.41

#213b6b

hsl(218.92,52.86%,27.45%)

rgb(33,59,107)

1.9011.04

#2f5190

hsl(218.97,50.79%,37.45%)

rgb(47,81,144)

2.707.78

#3f67b0

hsl(218.76,47.28%,46.86%)

rgb(63,103,176)

3.785.56

#527ccb

hsl(219.17,53.78%,55.88%)

rgb(82,124,203)

5.104.11

#6892e0

hsl(219,65.93%,64.31%)

rgb(104,146,224)

6.783.10

#80a6ee

hsl(219.27,76.39%,71.76%)

rgb(128,166,238)

8.612.44

#9abbf7

hsl(218.71,85.32%,78.63%)

rgb(154,187,247)

10.831.94

#b7cffc

hsl(219.13,92%,85.29%)

rgb(183,207,252)

13.341.57

#d4e3fe

hsl(218.57,95.45%,91.37%)

rgb(212,227,254)

16.221.29

#f2f7ff

hsl(216.92,100%,97.45%)

rgb(242,247,255)

19.521.08

indigo

#0a0a14

hsl(240,33.33%,5.88%)

rgb(10,10,20)

1.0719.69

#1f1f3e

hsl(240,33.33%,18.24%)

rgb(31,31,62)

1.3215.86

#343466

hsl(240,32.47%,30.2%)

rgb(52,52,102)

1.8311.48

#4a4a8c

hsl(240,30.84%,41.96%)

rgb(74,74,140)

2.657.93

#5f5fad

hsl(240,32.23%,52.55%)

rgb(95,95,173)

3.735.63

#7474c8

hsl(240,43.3%,61.96%)

rgb(116,116,200)

5.074.14

#8a8ade

hsl(240,56%,70.59%)

rgb(138,138,222)

6.773.10

#9f9fec

hsl(240,66.96%,77.45%)

rgb(159,159,236)

8.642.43

#b5b5f6

hsl(240,78.31%,83.73%)

rgb(181,181,246)

10.911.93

#cbcbfb

hsl(240,85.71%,89.02%)

rgb(203,203,251)

13.471.56

#e0e0fe

hsl(240,93.75%,93.73%)

rgb(224,224,254)

16.261.29

#f6f6ff

hsl(240,100%,98.24%)

rgb(246,246,255)

19.541.07

violet

#130918

hsl(280,45.45%,6.47%)

rgb(19,9,24)

1.0819.45

#331840

hsl(280.5,45.45%,17.25%)

rgb(51,24,64)

1.3515.61

#512866

hsl(279.68,43.66%,27.84%)

rgb(81,40,102)

1.8511.38

#6e3989

hsl(279.75,41.24%,38.04%)

rgb(110,57,137)

2.618.05

#894ba8

hsl(280,38.27%,47.65%)

rgb(137,75,168)

3.645.78

#a25fc3

hsl(280.2,45.45%,56.86%)

rgb(162,95,195)

4.964.23

#b674d7

hsl(280,55.31%,64.9%)

rgb(182,116,215)

6.473.25

#c88be6

hsl(280.22,64.54%,72.35%)

rgb(200,139,230)

8.292.53

#d7a4f1

hsl(279.74,73.33%,79.41%)

rgb(215,164,241)

10.472.01

#e4bef7

hsl(280,78.08%,85.69%)

rgb(228,190,247)

13.011.61

#f0d8fb

hsl(281.14,81.4%,91.57%)

rgb(240,216,251)

15.921.32

#fbf4fe

hsl(282,83.33%,97.65%)

rgb(251,244,254)

19.471.08

magenta

#160613

hsl(311.25,57.14%,5.49%)

rgb(22,6,19)

1.0719.63

#401336

hsl(313.33,54.22%,16.27%)

rgb(64,19,54)

1.3615.39

#672057

hsl(313.52,52.59%,26.47%)

rgb(103,32,87)

1.9210.93

#8c2e77

hsl(313.4,50.54%,36.47%)

rgb(140,46,119)

2.777.58

#ac3f94

hsl(313.21,46.38%,46.08%)

rgb(172,63,148)

3.895.39

#c751ad

hsl(313.22,51.3%,54.9%)

rgb(199,81,173)

5.214.03

#dc67c2

hsl(313.33,62.57%,63.33%)

rgb(220,103,194)

6.763.11

#eb80d3

hsl(313.46,72.79%,71.18%)

rgb(235,128,211)

8.562.45

#f49be1

hsl(312.81,80.18%,78.24%)

rgb(244,155,225)

10.621.98

#fab7eb

hsl(313.43,87.01%,84.9%)

rgb(250,183,235)

13.041.61

#fdd5f4

hsl(313.5,90.91%,91.37%)

rgb(253,213,244)

16.001.31

#fff4fc

hsl(316.36,100%,97.84%)

rgb(255,244,252)

19.601.07

red

#140609

hsl(347.14,53.85%,5.1%)

rgb(20,6,9)

1.0619.82

#3d141c

hsl(348.29,50.62%,15.88%)

rgb(61,20,28)

1.3215.97

#65222f

hsl(348.36,49.63%,26.47%)

rgb(101,34,47)

1.8211.52

#8a3143

hsl(347.87,47.59%,36.67%)

rgb(138,49,67)

2.608.07

#ab4257

hsl(348,44.3%,46.47%)

rgb(171,66,87)

3.655.76

#c6556c

hsl(347.79,49.78%,55.49%)

rgb(198,85,108)

4.924.27

#dc6a81

hsl(347.89,61.96%,63.92%)

rgb(220,106,129)

6.423.27

#eb8298

hsl(347.43,72.41%,71.57%)

rgb(235,130,152)

8.182.57

#f49cae

hsl(347.73,80%,78.43%)

rgb(244,156,174)

10.212.06

#fab8c6

hsl(347.27,86.84%,85.1%)

rgb(250,184,198)

12.741.65

#fdd5dd

hsl(348,90.91%,91.37%)

rgb(253,213,221)

15.741.33

#fff3f5

hsl(350,100%,97.65%)

rgb(255,243,245)

19.391.08

red orange

#140703

hsl(14.12,73.91%,4.51%)

rgb(20,7,3)

1.0619.78

#3c1509

hsl(14.12,73.91%,13.53%)

rgb(60,21,9)

1.3016.11

#632411

hsl(13.9,70.69%,22.75%)

rgb(99,36,17)

1.7911.73

#87351b

hsl(14.44,66.67%,31.76%)

rgb(135,53,27)

2.568.22

#a84628

hsl(14.06,61.54%,40.78%)

rgb(168,70,40)

3.575.88

#c35939

hsl(13.91,54.76%,49.41%)

rgb(195,89,57)

4.814.37

#d86f4f

hsl(14.01,63.72%,57.84%)

rgb(216,111,79)

6.313.33

#e88769

hsl(14.17,73.41%,66.08%)

rgb(232,135,105)

8.102.59

#f2a087

hsl(14.02,80.45%,73.92%)

rgb(242,160,135)

10.152.07

#f8bba8

hsl(14.25,85.11%,81.57%)

rgb(248,187,168)

12.661.66

#fcd7cb

hsl(14.69,89.09%,89.22%)

rgb(252,215,203)

15.721.34

#fef3f0

hsl(12.86,87.5%,96.86%)

rgb(254,243,240)

19.291.09

orange

#170a00

hsl(26.09,100%,4.51%)

rgb(23,10,0)

1.0819.45

#3c1b01

hsl(26.44,96.72%,11.96%)

rgb(60,27,1)

1.3515.56

#5f2b02

hsl(26.45,95.88%,19.02%)

rgb(95,43,2)

1.8311.46

#813a03

hsl(26.19,95.45%,25.88%)

rgb(129,58,3)

2.548.27

#9f4703

hsl(26.15,96.3%,31.76%)

rgb(159,71,3)

3.386.22

#dc6508

hsl(26.32,92.98%,44.71%)

rgb(220,101,8)

5.913.55

#f78b36

hsl(26.42,92.34%,59.02%)

rgb(247,139,54)

8.702.41

#fb9e52

hsl(26.98,95.48%,65.29%)

rgb(251,158,82)

10.112.08

#fdb275

hsl(26.91,97.14%,72.55%)

rgb(253,178,117)

11.801.78

#fec99b

hsl(27.88,98.02%,80.2%)

rgb(254,201,155)

14.041.50

#ffe1c5

hsl(28.97,100%,88.63%)

rgb(255,225,197)

16.831.25

#fffaf0

hsl(40,100%,97.06%)

rgb(255,250,240)

20.181.04

gold

#0f0b00

hsl(44,100%,2.94%)

rgb(15,11,0)

1.0719.66

#2f2200

hsl(43.4,100%,9.22%)

rgb(47,34,0)

1.3515.56

#4f3900

hsl(43.29,100%,15.49%)

rgb(79,57,0)

1.9210.95

#6f5000

hsl(43.24,100%,21.76%)

rgb(111,80,0)

2.827.44

#926900

hsl(43.15,100%,28.63%)

rgb(146,105,0)

4.244.95

#b98603

hsl(43.19,96.81%,36.86%)

rgb(185,134,3)

6.473.24

#dba313

hsl(43.2,84.03%,46.67%)

rgb(219,163,19)

9.262.27

#f0ba33

hsl(42.86,86.3%,57.06%)

rgb(240,186,51)

11.781.78

#f8cb58

hsl(43.12,91.95%,65.88%)

rgb(248,203,88)

13.671.54

#fddc86

hsl(43.36,96.75%,75.88%)

rgb(253,220,134)

15.761.33

#ffebb9

hsl(42.86,100%,86.27%)

rgb(255,235,185)

17.841.18

#fffbf0

hsl(44,100%,97.06%)

rgb(255,251,240)

20.311.03

yellow

#0d0e01

hsl(64.62,86.67%,2.94%)

rgb(13,14,1)

1.0819.44

#272602

hsl(58.38,90.24%,8.04%)

rgb(39,38,2)

1.3615.39

#413e04

hsl(57.05,88.41%,13.53%)

rgb(65,62,4)

1.9210.96

#5a5405

hsl(55.76,89.47%,18.63%)

rgb(90,84,5)

2.717.76

#726a07

hsl(55.51,88.43%,23.73%)

rgb(114,106,7)

3.785.56

#887e08

hsl(55.31,88.89%,28.24%)

rgb(136,126,8)

5.034.17

#cdbf1a

hsl(55.31,77.49%,45.29%)

rgb(205,191,26)

11.061.90

#e3d742

hsl(55.53,74.19%,57.45%)

rgb(227,215,66)

14.071.49

#eae162

hsl(56.03,76.4%,65.1%)

rgb(234,225,98)

15.441.36

#f1eb88

hsl(56.57,78.95%,73.92%)

rgb(241,235,136)

16.981.24

#f6f5b1

hsl(59.13,79.31%,82.94%)

rgb(246,245,177)

18.611.13

#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

#012e18

hsl(150.67,95.74%,9.22%)

rgb(1,46,24)

1.4114.94

#014826

hsl(151.27,97.26%,14.31%)

rgb(1,72,38)

1.9610.73

#016033

hsl(151.58,97.94%,19.02%)

rgb(1,96,51)

2.727.71

#01773f

hsl(151.53,98.33%,23.53%)

rgb(1,119,63)

3.715.66

#018f4b

hsl(151.27,98.61%,28.24%)

rgb(1,143,75)

5.034.17

#07bb5e

hsl(149,92.78%,38.04%)

rgb(7,187,94)

8.282.54

#1fd873

hsl(147.24,74.9%,48.43%)

rgb(31,216,115)

11.131.89

#5eeb9d

hsl(146.81,77.9%,64.51%)

rgb(94,235,157)

13.851.52

#8ef2bb

hsl(147,79.37%,75.29%)

rgb(142,242,187)

15.571.35

#bbf9d8

hsl(148.06,83.78%,85.49%)

rgb(187,249,216)

17.651.19

#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

#0d271d

hsl(156.92,50%,10.2%)

rgb(13,39,29)

1.3315.85

#123e2f

hsl(159.55,55%,15.69%)

rgb(18,62,47)

1.7611.96

#155542

hsl(162.19,60.38%,20.78%)

rgb(21,85,66)

2.418.71

#17725a

hsl(164.18,66.42%,26.86%)

rgb(23,114,90)

3.595.85

#1d9278

hsl(166.67,66.86%,34.31%)

rgb(29,146,120)

5.443.86

#37b197

hsl(167.21,52.59%,45.49%)

rgb(55,177,151)

7.902.66

#51c0a9

hsl(167.57,46.84%,53.53%)

rgb(81,192,169)

9.462.22

#71cebb

hsl(167.74,48.69%,62.55%)

rgb(113,206,187)

11.251.87

#97dccd

hsl(166.96,49.64%,72.75%)

rgb(151,220,205)

13.431.56

#c1eadf

hsl(163.9,49.4%,83.73%)

rgb(193,234,223)

16.101.30

#ecf8f2

hsl(150,46.15%,94.9%)

rgb(236,248,242)

19.281.09

cyan

#031111

hsl(180,70%,3.92%)

rgb(3,17,17)

1.0919.23

#072c2d

hsl(181.58,73.08%,10.2%)

rgb(7,44,45)

1.4114.92

#0c4749

hsl(181.97,71.76%,16.67%)

rgb(12,71,73)

2.0110.43

#106163

hsl(181.45,72.17%,22.55%)

rgb(16,97,99)

2.917.21

#13797c

hsl(181.71,73.43%,28.04%)

rgb(19,121,124)

4.055.18

#178f93

hsl(181.94,72.94%,33.33%)

rgb(23,143,147)

5.393.90

#1db6bb

hsl(181.9,73.15%,42.35%)

rgb(29,182,187)

8.462.48

#38dee4

hsl(182.09,76.11%,55.69%)

rgb(56,222,228)

12.741.65

#5cecf0

hsl(181.62,83.15%,65.1%)

rgb(92,236,240)

14.711.43

#84f3f7

hsl(182.09,87.79%,74.31%)

rgb(132,243,247)

16.141.30

#b3fafb

hsl(180.83,90%,84.31%)

rgb(179,250,251)

17.981.17

#e5ffff

hsl(180,100%,94.9%)

rgb(229,255,255)

20.081.05

.css-i2jc99{margin-left:auto;font-size:0.75rem;-webkit-text-decoration:none;text-decoration:none;color:var(--theme-ui-colors-text);-webkit-transition:color 250ms ease-in-out;transition:color 250ms ease-in-out;}.css-i2jc99:hover{color:var(--theme-ui-colors-primary);}Color Groups

Color Modes

Gradients

Colors

overlay tint

overlay shadow

gray

slate gray

blue

indigo

violet

magenta

red

red orange

orange

gold

yellow

green

teal

cyan

Color Groups