Theme | Components AI

Theme

Color Groups

Color Modes

Gradients

Colors

DisplayContrast threshold

overlay tint

#ffffff09

#ffffff1a

#ffffff30

#ffffff47

#ffffff5c

#ffffff73

#ffffff8c

#ffffffa3

#ffffffba

#ffffffd0

#ffffffe4

#fffffff0

overlay shadow

#000000f0

#000000e5

#000000cc

#000000b0

#00000099

#00000080

#00000069

#00000052

#0000003d

#00000029

#00000012

#00000009

gray

#000000

#1a1a1a

#353535

#4e4e4e

#686868

#808080

#979797

#adadad

#c2c2c2

#d7d7d7

#ebebeb

#ffffff

slate gray

#0c0c0e

#26262c

#403f49

#595865

#71707f

#878697

#9d9cad

#b1b0c0

#c4c4d0

#d7d6e0

#e8e8ee

#fafafb

blue

#020d23

#05235b

#0b3991

#134fc1

#1e64e9

#2e7aff

#448fff

#5fa4ff

#7fb9ff

#a2cdff

#c7e2ff

#eef6ff

indigo

#09091c

#1d1b55

#312e8a

#4541bb

#5a55e5

#6e6aff

#847fff

#9a95ff

#b0adff

#c7c4ff

#dedcff

#f5f5ff

violet

#180222

#3f075b

#640d8f

#8715bf

#a621e8

#c031ff

#d547ff

#e462ff

#ef81ff

#f6a4ff

#fbc9ff

#feefff

magenta

#150311

#3c0a31

#631051

#8b1771

#b21d91

#d923b1

#eb3cc4

#ef60cf

#f384da

#f6a9e5

#facdf0

#fef2fb

red

#140407

#3f0c17

#691526

#941d35

#be2644

#e92e54

#fd446a

#fe6785

#fe89a1

#feacbc

#ffced8

#fff1f4

red orange

#140602

#3d1407

#66210c

#8f2f10

#b83c15

#e24a1a

#f66030

#f87d56

#f99a7d

#fbb8a3

#fdd5c9

#fef3ef

orange

#170a00

#411f05

#693309

#8e440a

#af5108

#ec5f00

#ff780d

#ff8b2c

#ffa355

#ffbe85

#ffdbb9

#fffaf0

gold

#0f0b00

#2d2204

#4c3806

#6d5005

#936900

#c38800

#eda500

#ffbd0b

#ffce34

#ffde6b

#ffecab

#fffbf0

yellow

#0d0e01

#2a2905

#474309

#625c0b

#7c730c

#93880a

#d7c500

#eada21

#f0e345

#f4ec72

#f8f5a6

#fbfedc

green

#011409

#01311b

#024d2d

#02683c

#018149

#009953

#00be5c

#03d662

#50eb94

#89f2b8

#b9f8d7

#ebfff7

teal

#07100c

#13261c

#1c3c2c

#1d533e

#117156

#039474

#11b495

#2bc3a7

#51d1b9

#7fdecc

#b4ebdf

#ecf8f2

cyan

#031111

#092e2f

#0e4a4c

#126568

#157e81

#169498

#12b8be

#1cdae2

#40e6ed

#6feff4

#a7f7fa

#e5ffff

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

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

Color Groups