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

#000000e5

hsla(0,0%,0%,0.899)

rgba(0,0,0,0.899)

1.0021.00

#000000c8

hsla(0,0%,0%,0.785)

rgba(0,0,0,0.785)

1.0021.00

#000000b0

hsla(0,0%,0%,0.69)

rgba(0,0,0,0.69)

1.0021.00

#00000094

hsla(0,0%,0%,0.582)

rgba(0,0,0,0.582)

1.0021.00

#0000007a

hsla(0,0%,0%,0.48)

rgba(0,0,0,0.48)

1.0021.00

#00000066

hsla(0,0%,0%,0.4)

rgba(0,0,0,0.4)

1.0021.00

#00000052

hsla(0,0%,0%,0.32)

rgba(0,0,0,0.32)

1.0021.00

#00000038

hsla(0,0%,0%,0.22)

rgba(0,0,0,0.22)

1.0021.00

#00000024

hsla(0,0%,0%,0.14)

rgba(0,0,0,0.14)

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

#1b1b1b

hsl(0,0%,10.59%)

rgb(27,27,27)

1.2217.22

#363636

hsl(0,0%,21.18%)

rgb(54,54,54)

1.7412.08

#515151

hsl(0,0%,31.76%)

rgb(81,81,81)

2.657.94

#6b6b6b

hsl(0,0%,41.96%)

rgb(107,107,107)

3.945.33

#848484

hsl(0,0%,51.76%)

rgb(132,132,132)

5.613.74

#9b9b9b

hsl(0,0%,60.78%)

rgb(155,155,155)

7.562.78

#b1b1b1

hsl(0,0%,69.41%)

rgb(177,177,177)

9.792.14

#c5c5c5

hsl(0,0%,77.25%)

rgb(197,197,197)

12.171.73

#d8d8d8

hsl(0,0%,84.71%)

rgb(216,216,216)

14.731.43

#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

#25242d

hsl(246.67,11.11%,15.88%)

rgb(37,36,45)

1.3715.34

#3f3e4d

hsl(244,10.79%,27.25%)

rgb(63,62,77)

2.0110.46

#58576c

hsl(242.86,10.77%,38.24%)

rgb(88,87,108)

2.997.01

#716f89

hsl(244.62,10.48%,48.63%)

rgb(113,111,137)

4.344.84

#8886a3

hsl(244.14,13.62%,58.24%)

rgb(136,134,163)

5.993.51

#9d9bb8

hsl(244.14,16.96%,66.47%)

rgb(157,155,184)

7.812.69

#b1afc9

hsl(244.62,19.4%,73.73%)

rgb(177,175,201)

9.842.13

#c4c2d7

hsl(245.71,20.79%,80.2%)

rgb(196,194,215)

12.051.74

#d6d5e3

hsl(244.29,20%,86.27%)

rgb(214,213,227)

14.491.45

#e7e7ee

hsl(240,17.07%,91.96%)

rgb(231,231,238)

17.061.23

#faf9fb

hsl(270,20%,98.04%)

rgb(250,249,251)

20.011.05

blue

#070d1c

hsl(222.86,60%,6.86%)

rgb(7,13,28)

1.0819.38

#102351

hsl(222.46,67.01%,19.02%)

rgb(16,35,81)

1.3815.20

#193a89

hsl(222.32,69.14%,31.76%)

rgb(25,58,137)

2.0110.46

#2250bd

hsl(222.19,69.51%,43.73%)

rgb(34,80,189)

2.957.12

#2f66e6

hsl(221.97,78.54%,54.31%)

rgb(47,102,230)

4.165.04

#3f7bfd

hsl(221.05,97.94%,61.96%)

rgb(63,123,253)

5.463.84

#5590ff

hsl(219.18,100%,66.67%)

rgb(85,144,255)

6.823.08

#70a5ff

hsl(217.76,100%,71.96%)

rgb(112,165,255)

8.522.47

#8ebaff

hsl(216.64,100%,77.84%)

rgb(142,186,255)

10.621.98

#afceff

hsl(216.75,100%,84.31%)

rgb(175,206,255)

13.101.60

#d1e2ff

hsl(217.83,100%,90.98%)

rgb(209,226,255)

16.031.31

#f2f6ff

hsl(221.54,100%,97.45%)

rgb(242,246,255)

19.401.08

indigo

#090a15

hsl(235,40%,5.88%)

rgb(9,10,21)

1.0719.70

#1c2048

hsl(234.55,44%,19.61%)

rgb(28,32,72)

1.3515.56

#2f367f

hsl(234.75,45.98%,34.12%)

rgb(47,54,127)

1.9510.74

#424cb2

hsl(234.64,45.9%,47.84%)

rgb(66,76,178)

2.917.22

#5661db

hsl(235.04,64.88%,59.8%)

rgb(86,97,219)

4.135.09

#6a77f4

hsl(234.35,86.25%,68.63%)

rgb(106,119,244)

5.563.78

#808cf9

hsl(234.05,90.98%,73.92%)

rgb(128,140,249)

7.042.98

#96a2fb

hsl(232.87,92.66%,78.63%)

rgb(150,162,251)

8.862.37

#aeb7fc

hsl(233.08,92.86%,83.53%)

rgb(174,183,252)

10.981.91

#c5ccfd

hsl(232.5,93.33%,88.24%)

rgb(197,204,253)

13.431.56

#dde1fe

hsl(232.73,94.29%,93.14%)

rgb(221,225,254)

16.281.29

#f5f6ff

hsl(234,100%,98.04%)

rgb(245,246,255)

19.511.08

violet

#13091a

hsl(275.29,48.57%,6.86%)

rgb(19,9,26)

1.0819.41

#35174c

hsl(273.96,53.54%,19.41%)

rgb(53,23,76)

1.3815.24

#572480

hsl(273.26,56.1%,32.16%)

rgb(87,36,128)

1.9710.66

#7832b0

hsl(273.33,55.75%,44.31%)

rgb(120,50,176)

2.887.29

#9642d7

hsl(273.83,65.07%,55.1%)

rgb(150,66,215)

4.065.18

#b154ee

hsl(276.23,81.91%,63.14%)

rgb(177,84,238)

5.373.91

#c569f4

hsl(279.71,86.34%,68.43%)

rgb(197,105,244)

6.703.13

#d582f7

hsl(282.56,87.97%,73.92%)

rgb(213,130,247)

8.372.51

#e09df9

hsl(283.7,88.46%,79.61%)

rgb(224,157,249)

10.362.03

#e9bafb

hsl(283.38,89.04%,85.69%)

rgb(233,186,251)

12.881.63

#f1d7fc

hsl(282.16,86.05%,91.57%)

rgb(241,215,252)

15.871.32

#faf3fe

hsl(278.18,84.62%,97.45%)

rgb(250,243,254)

19.321.09

magenta

#150414

hsl(303.53,68%,4.9%)

rgb(21,4,20)

1.0619.82

#410b3e

hsl(303.33,71.05%,14.9%)

rgb(65,11,62)

1.3415.65

#6f116a

hsl(303.19,73.44%,25.1%)

rgb(111,17,106)

1.9610.69

#9a1893

hsl(303.23,73.03%,34.9%)

rgb(154,24,147)

2.937.18

#bf21b7

hsl(303.04,70.54%,43.92%)

rgb(191,33,183)

4.125.10

#d82ed0

hsl(302.82,68.55%,51.37%)

rgb(216,46,208)

5.224.02

#e441de

hsl(302.21,75.12%,57.45%)

rgb(228,65,222)

6.113.44

#ec5de7

hsl(302.1,79.01%,64.51%)

rgb(236,93,231)

7.292.88

#f180ee

hsl(301.59,80.14%,72.35%)

rgb(241,128,238)

9.062.32

#f5a6f3

hsl(301.52,79.8%,80.59%)

rgb(245,166,243)

11.631.81

#f9cdf7

hsl(302.73,78.57%,89.02%)

rgb(249,205,247)

15.101.39

#fdf3fd

hsl(300,71.43%,97.25%)

rgb(253,243,253)

19.421.08

red

#140508

hsl(348,60%,4.9%)

rgb(20,5,8)

1.0519.91

#430d17

hsl(348.89,67.5%,15.69%)

rgb(67,13,23)

1.3116.05

#761425

hsl(349.59,71.01%,27.06%)

rgb(118,20,37)

1.9011.07

#a51c34

hsl(349.49,70.98%,37.84%)

rgb(165,28,52)

2.827.46

#cc2745

hsl(349.09,67.9%,47.65%)

rgb(204,39,69)

3.945.33

#e53657

hsl(348.69,77.09%,55.49%)

rgb(229,54,87)

5.004.20

#ee4b6d

hsl(347.48,82.74%,61.37%)

rgb(238,75,109)

5.863.58

#f36785

hsl(347.14,85.37%,67.84%)

rgb(243,103,133)

7.092.96

#f687a0

hsl(346.49,86.05%,74.71%)

rgb(246,135,160)

8.892.36

#f9abbc

hsl(346.92,86.67%,82.35%)

rgb(249,171,188)

11.581.81

#fbced8

hsl(346.67,84.91%,89.61%)

rgb(251,206,216)

14.921.41

#fef1f4

hsl(346.15,86.67%,97.06%)

rgb(254,241,244)

19.101.10

red orange

#130603

hsl(11.25,72.73%,4.31%)

rgb(19,6,3)

1.0619.90

#411207

hsl(11.38,80.56%,14.12%)

rgb(65,18,7)

1.3115.98

#721e0c

hsl(10.59,80.95%,24.71%)

rgb(114,30,12)

1.9111.01

#a02910

hsl(10.42,81.82%,34.51%)

rgb(160,41,16)

2.827.45

#c63717

hsl(10.97,79.19%,43.33%)

rgb(198,55,23)

3.965.30

#e04820

hsl(12.5,75.59%,50.2%)

rgb(224,72,32)

5.124.10

#ea5e2e

hsl(15.32,81.74%,54.9%)

rgb(234,94,46)

6.143.42

#f07849

hsl(16.89,84.77%,61.37%)

rgb(240,120,73)

7.492.80

#f4956e

hsl(17.46,85.9%,69.41%)

rgb(244,149,110)

9.372.24

#f7b498

hsl(17.68,85.59%,78.24%)

rgb(247,180,152)

11.941.76

#fad4c5

hsl(16.98,84.13%,87.65%)

rgb(250,212,197)

15.291.37

#fdf3ef

hsl(17.14,77.78%,96.47%)

rgb(253,243,239)

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

#c88700

hsl(40.5,100%,39.22%)

rgb(200,135,0)

6.923.03

#f5a500

hsl(40.41,100%,48.04%)

rgb(245,165,0)

10.262.05

#ffbd03

hsl(44.29,100%,50.59%)

rgb(255,189,3)

12.531.68

#ffce27

hsl(46.39,100%,57.65%)

rgb(255,206,39)

14.111.49

#ffdd67

hsl(46.58,100%,70.2%)

rgb(255,221,103)

15.791.33

#ffecaf

hsl(45.75,100%,84.31%)

rgb(255,236,175)

17.871.18

#fffbf0

hsl(44,100%,97.06%)

rgb(255,251,240)

20.311.03

yellow

#161301

hsl(51.43,91.3%,4.51%)

rgb(22,19,1)

1.1318.62

#312b03

hsl(52.17,88.46%,10.2%)

rgb(49,43,3)

1.4814.21

#4d4305

hsl(51.67,87.8%,16.08%)

rgb(77,67,5)

2.129.90

#695b07

hsl(51.43,87.5%,21.96%)

rgb(105,91,7)

3.106.77

#837308

hsl(52.2,88.49%,27.25%)

rgb(131,115,8)

4.424.75

#9d8a09

hsl(52.3,89.16%,32.55%)

rgb(157,138,9)

6.073.46

#ccb209

hsl(52,91.55%,41.76%)

rgb(204,178,9)

9.942.11

#f3d609

hsl(52.56,92.86%,49.41%)

rgb(243,214,9)

14.431.45

#fdea0e

hsl(55.23,98.35%,52.35%)

rgb(253,234,14)

16.951.24

#fef243

hsl(56.15,98.94%,62.94%)

rgb(254,242,67)

18.001.17

#fef795

hsl(56,98.13%,79.02%)

rgb(254,247,149)

18.951.11

#fffde4

hsl(55.56,100%,94.71%)

rgb(255,253,228)

20.421.03

green

#001108

hsl(148.24,100%,3.33%)

rgb(0,17,8)

1.0819.38

#002d13

hsl(145.33,100%,8.82%)

rgb(0,45,19)

1.3815.17

#004a1e

hsl(144.32,100%,14.51%)

rgb(0,74,30)

2.0010.51

#006629

hsl(144.12,100%,20%)

rgb(0,102,41)

2.937.16

#008137

hsl(145.58,100%,25.29%)

rgb(0,129,55)

4.205.01

#009948

hsl(148.24,100%,30%)

rgb(0,153,72)

5.653.72

#05ae5d

hsl(151.24,94.41%,35.1%)

rgb(5,174,93)

7.222.91

#1fc077

hsl(152.8,72.2%,43.73%)

rgb(31,192,119)

8.862.37

#4acf95

hsl(153.83,58.08%,55.1%)

rgb(74,207,149)

10.651.97

#80ddb4

hsl(153.55,57.76%,68.43%)

rgb(128,221,180)

12.921.63

#b8ead4

hsl(153.6,54.35%,81.96%)

rgb(184,234,212)

15.761.33

#ecf9f3

hsl(152.31,52%,95.1%)

rgb(236,249,243)

19.411.08

teal

#000d0a

hsl(166.15,100%,2.55%)

rgb(0,13,10)

1.0619.77

#01281f

hsl(166.15,95.12%,8.04%)

rgb(1,40,31)

1.3215.85

#014435

hsl(166.57,97.1%,13.53%)

rgb(1,68,53)

1.8811.17

#02604a

hsl(165.96,95.92%,19.22%)

rgb(2,96,74)

2.777.57

#027a5f

hsl(166.5,96.77%,24.31%)

rgb(2,122,95)

3.955.31

#039274

hsl(167.41,95.97%,29.22%)

rgb(3,146,116)

5.373.91

#08a78a

hsl(169.06,90.86%,34.31%)

rgb(8,167,138)

6.903.04

#21ba9f

hsl(169.41,69.86%,42.94%)

rgb(33,186,159)

8.592.45

#4bcab4

hsl(169.61,54.51%,54.31%)

rgb(75,202,180)

10.412.02

#7fd9ca

hsl(170,54.22%,67.45%)

rgb(127,217,202)

12.681.66

#b6e8df

hsl(169.2,52.08%,81.18%)

rgb(182,232,223)

15.601.35

#e9f7f5

hsl(171.43,46.67%,94.12%)

rgb(233,247,245)

19.091.10

cyan

#000d0e

hsl(184.29,100%,2.75%)

rgb(0,13,14)

1.0619.74

#01282c

hsl(185.58,95.56%,8.82%)

rgb(1,40,44)

1.3415.66

#01454a

hsl(184.11,97.33%,14.71%)

rgb(1,69,74)

1.9510.76

#016068

hsl(184.66,98.1%,20.59%)

rgb(1,96,104)

2.877.31

#027b84

hsl(184.15,97.01%,26.27%)

rgb(2,123,132)

4.175.04

#03939e

hsl(184.26,96.27%,31.57%)

rgb(3,147,158)

5.673.70

#07a8b3

hsl(183.84,92.47%,36.47%)

rgb(7,168,179)

7.262.89

#20bbc4

hsl(183.29,71.93%,44.71%)

rgb(32,187,196)

8.972.34

#4acbd3

hsl(183.5,60.89%,55.88%)

rgb(74,203,211)

10.771.95

#7edae0

hsl(183.67,61.25%,68.63%)

rgb(126,218,224)

12.991.62

#b5e8ec

hsl(184.36,59.14%,81.76%)

rgb(181,232,236)

15.721.34

#e9f7f8

hsl(184,51.72%,94.31%)

rgb(233,247,248)

19.121.10

.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