Theme | Components AI

Theme

Color Groups

Color Modes

Gradients

Colors

DisplayContrast threshold

red

#fee9e9

hsl(0,91.3%,95.49%)

rgb(254,233,233)

18.051.16

#fac8c9

hsl(358.8,83.33%,88.24%)

rgb(250,200,201)

14.171.48

#f4a7a9

hsl(358.44,77.78%,80.59%)

rgb(244,167,169)

10.951.92

#eb868b

hsl(357.03,71.63%,72.35%)

rgb(235,134,139)

8.322.53

#e0636e

hsl(354.72,66.84%,63.33%)

rgb(224,99,110)

6.183.40

#d13e53

hsl(351.43,61.51%,53.14%)

rgb(209,62,83)

4.534.64

#a73544

hsl(352.11,51.82%,43.14%)

rgb(167,53,68)

3.246.49

#802c36

hsl(352.86,48.84%,33.73%)

rgb(128,44,54)

2.339.01

#5a2228

hsl(353.57,45.16%,24.31%)

rgb(90,34,40)

1.6912.40

#37181a

hsl(356.13,39.24%,15.49%)

rgb(55,24,26)

1.3116.05

pink

#fde9ee

hsl(345,83.33%,95.29%)

rgb(253,233,238)

18.071.16

#f7c7d2

hsl(346.25,75%,87.45%)

rgb(247,199,210)

14.051.49

#f0a8bb

hsl(344.17,70.59%,80%)

rgb(240,168,187)

11.021.90

#e786a2

hsl(342.68,66.9%,71.57%)

rgb(231,134,162)

8.332.52

#dc638a

hsl(340.66,63.35%,62.55%)

rgb(220,99,138)

6.193.39

#cb4073

hsl(337.99,57.2%,52.35%)

rgb(203,64,115)

4.524.65

#a3375d

hsl(338.89,49.54%,42.75%)

rgb(163,55,93)

3.266.44

#7d2d48

hsl(339.75,47.06%,33.33%)

rgb(125,45,72)

2.348.97

#582334

hsl(340.75,43.09%,24.12%)

rgb(88,35,52)

1.7012.32

#361922

hsl(341.38,36.71%,15.49%)

rgb(54,25,34)

1.3215.92

purple

#faeafa

hsl(300,61.54%,94.9%)

rgb(250,234,250)

18.211.15

#f2c8f3

hsl(298.6,64.18%,86.86%)

rgb(242,200,243)

14.331.47

#e8a6eb

hsl(297.39,63.3%,78.63%)

rgb(232,166,235)

11.091.89

#dc83e3

hsl(295.63,63.16%,70.2%)

rgb(220,131,227)

8.402.50

#d05edb

hsl(294.72,63.45%,61.37%)

rgb(208,94,219)

6.313.33

#ba3dc8

hsl(293.96,55.82%,51.18%)

rgb(186,61,200)

4.594.58

#9634a1

hsl(293.94,51.17%,41.76%)

rgb(150,52,161)

3.306.36

#732c7b

hsl(293.92,47.31%,32.75%)

rgb(115,44,123)

2.388.84

#522357

hsl(294.23,42.62%,23.92%)

rgb(82,35,87)

1.7412.09

#331935

hsl(295.71,35.9%,15.29%)

rgb(51,25,53)

1.3315.77

deep purple

#f0e7fb

hsl(267,71.43%,94.51%)

rgb(240,231,251)

17.531.20

#ddcaf5

hsl(266.51,68.25%,87.65%)

rgb(221,202,245)

13.841.52

#caadef

hsl(266.36,67.35%,80.78%)

rgb(202,173,239)

10.741.96

#b691e9

hsl(265.23,66.67%,74.12%)

rgb(182,145,233)

8.222.56

#a075e2

hsl(263.67,65.27%,67.25%)

rgb(160,117,226)

6.143.42

#8959db

hsl(262.15,64.36%,60.39%)

rgb(137,89,219)

4.524.65

#6f3ed1

hsl(260,61.51%,53.14%)

rgb(111,62,209)

3.296.39

#58329f

hsl(260.92,52.15%,40.98%)

rgb(88,50,159)

2.378.85

#412770

hsl(261.37,48.34%,29.61%)

rgb(65,39,112)

1.7512.01

#2b1b45

hsl(262.86,43.75%,18.82%)

rgb(43,27,69)

1.3515.61

indigo

#ece9fb

hsl(250,69.23%,94.9%)

rgb(236,233,251)

17.621.19

#d3cef5

hsl(247.69,66.1%,88.43%)

rgb(211,206,245)

13.921.51

#bab3ef

hsl(247,65.22%,81.96%)

rgb(186,179,239)

10.781.95

#a099e9

hsl(245.25,64.52%,75.69%)

rgb(160,153,233)

8.232.55

#8480e2

hsl(242.45,62.82%,69.41%)

rgb(132,128,226)

6.173.41

#6468db

hsl(237.98,62.3%,62.55%)

rgb(100,104,219)

4.544.62

#3e51d0

hsl(232.19,60.83%,52.94%)

rgb(62,81,208)

3.296.38

#36409e

hsl(234.23,49.06%,41.57%)

rgb(54,64,158)

2.388.81

#2c2f70

hsl(237.35,43.59%,30.59%)

rgb(44,47,112)

1.7512.02

#202045

hsl(240,36.63%,19.8%)

rgb(32,32,69)

1.3515.51

blue

#ebeefa

hsl(228,60%,95.1%)

rgb(235,238,250)

18.141.16

#ccd5f3

hsl(226.15,61.9%,87.65%)

rgb(204,213,243)

14.381.46

#acbceb

hsl(224.76,61.17%,79.8%)

rgb(172,188,235)

11.151.88

#8ba4e4

hsl(223.15,62.24%,71.96%)

rgb(139,164,228)

8.532.46

#5a8ce4

hsl(218.26,71.88%,62.35%)

rgb(90,140,228)

6.313.33

#3e76cc

hsl(216.34,58.2%,52.16%)

rgb(62,118,204)

4.674.50

#3660a5

hsl(217.3,50.68%,42.94%)

rgb(54,96,165)

3.376.23

#2e4b7f

hsl(218.52,46.82%,33.92%)

rgb(46,75,127)

2.438.65

#26375b

hsl(220.75,41.09%,25.29%)

rgb(38,55,91)

1.7811.80

#1c2439

hsl(223.45,34.12%,16.67%)

rgb(28,36,57)

1.3615.43

light blue

#eaf3f7

hsl(198.46,44.83%,94.31%)

rgb(234,243,247)

18.661.13

#bfdce8

hsl(197.56,47.13%,82.94%)

rgb(191,220,232)

14.621.44

#93c5da

hsl(197.75,48.97%,71.57%)

rgb(147,197,218)

11.241.87

#62afcb

hsl(196,50.24%,59.02%)

rgb(98,175,203)

8.512.47

#2f97b8

hsl(194.45,59.31%,45.29%)

rgb(47,151,184)

6.243.37

#2c7e98

hsl(194.44,55.1%,38.43%)

rgb(44,126,152)

4.544.62

#28657a

hsl(195.37,50.62%,31.76%)

rgb(40,101,122)

3.236.50

#234d5c

hsl(195.79,44.88%,24.9%)

rgb(35,77,92)

2.299.18

#1c3741

hsl(196.22,39.78%,18.24%)

rgb(28,55,65)

1.6712.56

#152227

hsl(196.67,30%,11.76%)

rgb(21,34,39)

1.2916.28

cyan

#eaf6f7

hsl(184.62,44.83%,94.31%)

rgb(234,246,247)

19.021.10

#b7e1e5

hsl(185.22,46.94%,80.78%)

rgb(183,225,229)

14.911.41

#7fccd2

hsl(184.34,47.98%,66.08%)

rgb(127,204,210)

11.471.83

#32b7c0

hsl(183.8,58.68%,47.45%)

rgb(50,183,192)

8.672.42

#2e9ca4

hsl(184.07,56.19%,41.18%)

rgb(46,156,164)

6.413.28

#2b8188

hsl(184.52,51.96%,35.1%)

rgb(43,129,136)

4.604.57

#27686d

hsl(184.29,47.3%,29.02%)

rgb(39,104,109)

3.296.39

#224f53

hsl(184.9,41.88%,22.94%)

rgb(34,79,83)

2.319.09

#1c383b

hsl(185.81,35.63%,17.06%)

rgb(28,56,59)

1.6812.51

#142224

hsl(187.5,28.57%,10.98%)

rgb(20,34,36)

1.2816.35

teal

#eaf8f5

hsl(167.14,50%,94.51%)

rgb(234,248,245)

19.241.09

#b1e4da

hsl(168.24,48.57%,79.41%)

rgb(177,228,218)

14.981.40

#72d0c0

hsl(169.79,50%,63.14%)

rgb(114,208,192)

11.501.83

#2fb9a7

hsl(172.17,59.48%,45.49%)

rgb(47,185,167)

8.622.44

#2d9d8e

hsl(171.96,55.45%,39.61%)

rgb(45,157,142)

6.323.32

#2a8275

hsl(171.14,51.16%,33.73%)

rgb(42,130,117)

4.554.62

#26685e

hsl(170.91,46.48%,27.84%)

rgb(38,104,94)

3.226.51

#214f47

hsl(169.57,41.07%,21.96%)

rgb(33,79,71)

2.279.23

#1a3732

hsl(169.66,35.8%,15.88%)

rgb(26,55,50)

1.6412.83

#13211e

hsl(167.14,26.92%,10.2%)

rgb(19,33,30)

1.2616.61

green

#eefaec

hsl(111.43,58.33%,95.29%)

rgb(238,250,236)

19.521.08

#b4e9ad

hsl(113,57.69%,79.61%)

rgb(180,233,173)

15.201.38

#72d66f

hsl(118.25,55.68%,63.73%)

rgb(114,214,111)

11.561.82

#58bb57

hsl(119.4,42.37%,53.73%)

rgb(88,187,87)

8.662.42

#4d9e4b

hsl(118.55,35.62%,45.69%)

rgb(77,158,75)

6.313.33

#418340

hsl(119.1,34.36%,38.24%)

rgb(65,131,64)

4.554.62

#366834

hsl(117.69,33.33%,30.59%)

rgb(54,104,52)

3.196.59

#2b4e29

hsl(116.76,31.09%,23.33%)

rgb(43,78,41)

2.229.44

#20361e

hsl(115,28.57%,16.47%)

rgb(32,54,30)

1.6113.06

#151f14

hsl(114.55,21.57%,10%)

rgb(21,31,20)

1.2416.96

light green

#f4faec

hsl(85.71,58.33%,95.29%)

rgb(244,250,236)

19.731.06

#c8e79e

hsl(85.48,60.33%,76.27%)

rgb(200,231,158)

15.381.37

#9bd15b

hsl(87.46,56.19%,58.82%)

rgb(155,209,91)

11.661.80

#88b551

hsl(87,40.32%,51.37%)

rgb(136,181,81)

8.782.39

#749a46

hsl(87.14,37.5%,43.92%)

rgb(116,154,70)

6.453.25

#617f3b

hsl(86.47,36.56%,36.47%)

rgb(97,127,59)

4.614.56

#4e6531

hsl(86.54,34.67%,29.41%)

rgb(78,101,49)

3.236.50

#3c4d27

hsl(86.84,32.76%,22.75%)

rgb(60,77,39)

2.289.20

#2b351d

hsl(85,29.27%,16.08%)

rgb(43,53,29)

1.6312.89

#1b2013

hsl(83.08,25.49%,10%)

rgb(27,32,19)

1.2616.63

yellow

#f9edd2

hsl(41.54,76.47%,90%)

rgb(249,237,210)

18.071.16

#ebd38d

hsl(44.68,70.15%,73.73%)

rgb(235,211,141)

14.231.48

#d7b946

hsl(47.59,64.44%,55.88%)

rgb(215,185,70)

10.921.92

#bca02c

hsl(48.33,62.07%,45.49%)

rgb(188,160,44)

8.202.56

#a08928

hsl(48.5,60%,39.22%)

rgb(160,137,40)

6.103.44

#887424

hsl(48,58.14%,33.73%)

rgb(136,116,36)

4.574.59

#6e5e20

hsl(47.69,54.93%,27.84%)

rgb(110,94,32)

3.286.39

#55491c

hsl(47.37,50.44%,22.16%)

rgb(85,73,28)

2.368.91

#3e3413

hsl(46.05,53.09%,15.88%)

rgb(62,52,19)

1.7112.31

#272211

hsl(46.36,39.29%,10.98%)

rgb(39,34,17)

1.3215.87

orange

#ffe8ce

hsl(31.84,100%,90.39%)

rgb(255,232,206)

17.691.19

#ffc88a

hsl(31.79,100%,77.06%)

rgb(255,200,138)

13.881.51

#fba83f

hsl(33.51,95.92%,61.57%)

rgb(251,168,63)

10.771.95

#e38e20

hsl(33.85,77.69%,50.78%)

rgb(227,142,32)

8.162.57

#c27a13

hsl(35.31,82.16%,41.76%)

rgb(194,122,19)

6.093.45

#a26615

hsl(34.47,77.05%,35.88%)

rgb(162,102,21)

4.454.72

#825315

hsl(34.13,72.19%,29.61%)

rgb(130,83,21)

3.206.57

#644014

hsl(33,66.67%,23.53%)

rgb(100,64,20)

2.299.19

#482f12

hsl(32.22,60%,17.65%)

rgb(72,47,18)

1.6912.42

#2d1e0d

hsl(31.88,55.17%,11.37%)

rgb(45,30,13)

1.3016.12

deep orange

#ffdaca

hsl(18.11,100%,89.61%)

rgb(255,218,202)

16.131.30

#ffbc9f

hsl(18.13,100%,81.18%)

rgb(255,188,159)

12.951.62

#ff9b73

hsl(17.14,100%,72.55%)

rgb(255,155,115)

10.192.06

#fa7948

hsl(16.52,94.68%,63.14%)

rgb(250,121,72)

7.892.66

#ef571c

hsl(16.78,86.83%,52.35%)

rgb(239,87,28)

6.053.47

#ce4713

hsl(16.68,83.11%,44.12%)

rgb(206,71,19)

4.544.63

#aa3d13

hsl(16.69,79.89%,37.06%)

rgb(170,61,19)

3.396.20

#873313

hsl(16.55,75.32%,30.2%)

rgb(135,51,19)

2.518.36

#652811

hsl(16.43,71.19%,23.14%)

rgb(101,40,17)

1.8611.26

#451e0f

hsl(16.67,64.29%,16.47%)

rgb(69,30,15)

1.4514.53

gray

#f4f4f4

hsl(0,0%,95.69%)

rgb(244,244,244)

19.091.10

#d9d9da

hsl(240,1.33%,85.29%)

rgb(217,217,218)

14.891.41

#bebebf

hsl(240,0.78%,74.71%)

rgb(190,190,191)

11.311.86

#a4a4a6

hsl(240,1.11%,64.71%)

rgb(164,164,166)

8.442.49

#8a8a8d

hsl(240,1.3%,54.71%)

rgb(138,138,141)

6.103.44

#747577

hsl(220,1.28%,46.08%)

rgb(116,117,119)

4.554.61

#5a5a5c

hsl(240,1.1%,35.69%)

rgb(90,90,92)

3.056.88

#444545

hsl(180,0.73%,26.86%)

rgb(68,69,69)

2.189.62

#2e2e2f

hsl(240,1.08%,18.24%)

rgb(46,46,47)

1.5513.57

#1a1a1b

hsl(240,1.89%,10.39%)

rgb(26,26,27)

1.2117.39

blue gray

#f3f4f5

hsl(210,9.09%,95.69%)

rgb(243,244,245)

19.071.10

#d7d9de

hsl(222.86,9.59%,85.69%)

rgb(215,217,222)

14.871.41

#bbbfc8

hsl(221.54,10.57%,75.88%)

rgb(187,191,200)

11.401.84

#a0a5b1

hsl(222.35,9.83%,66.08%)

rgb(160,165,177)

8.512.47

#868d9c

hsl(220.91,10%,56.86%)

rgb(134,141,156)

6.303.33

#6d7585

hsl(220,9.92%,47.45%)

rgb(109,117,133)

4.534.63

#535964

hsl(218.82,9.29%,35.88%)

rgb(83,89,100)

2.987.05

#3e424a

hsl(220,8.82%,26.67%)

rgb(62,66,74)

2.0810.08

#2a2c31

hsl(222.86,7.69%,17.84%)

rgb(42,44,49)

1.5013.97

#17181a

hsl(220,6.12%,9.61%)

rgb(23,24,26)

1.1817.77

base

#000000

hsl(0,0%,0%)

rgb(0,0,0)

1.0021.00

#ffffff

hsl(0,0%,100%)

rgb(255,255,255)

21.001.00

Color Modes

Display

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

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

DisplayFont Weights Display

-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

+

=

!

@

#

$

%

^

&

-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

+

=

!

@

#

$

%

^

&

"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace

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

+

=

!

@

#

$

%

^

&

Type Scale

Display

A	A	A	A	A	A	A	A
0.75rem	0.875rem	1rem	1.25rem	1.5rem	2rem	3rem	4rem

Line Heights

Display

solid: 1

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

heading: 1.25

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

body: 1.5

Multi-line title at a larger font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Spacing

Display

Border Radius

Display

0

5px

9px

9999px

Border Widths

Display

0

1px

2px

4px

Box Shadows

Display

10px 1px 2px 0px rgba(0, 0, 0, 0.07), 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 4px 8px 0px rgba(0, 0, 0, 0.07), 0px 8px 16px 0px rgba(0, 0, 0, 0.07), 0px 16px 32px 0px rgba(0, 0, 0, 0.07), 0px 32px 64px 0px rgba(0, 0, 0, 0.07)

20px 1px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 8px 0px rgba(0, 0, 0, 0.15)

20px 1px 1px 0px rgba(0, 0, 0, 0.25), 0px 2px 2px 0px rgba(0, 0, 0, 0.20), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.05)

30px 1px 1px 0px rgba(0, 0, 0, 0.125), 0px 2px 2px 0px rgba(0, 0, 0, 0.125), 0px 4px 4px 0px rgba(0, 0, 0, 0.125), 0px 8px 8px 0px rgba(0, 0, 0, 0.125), 0px 16px 16px 0px rgba(0, 0, 0, 0.125)

Breakpoints

0 - Global (no media query)

1 32em

2 64em