Skip to main content

Theme Generator

primary

100

#e4ebfd

200

#b5c8fa

300

#8dadf8

400

#548df6

500

#1a7af5

600

#1974e8

700

#1666cd

800

#1256ad

900

#0c376e

transparent

100

#1a7af51a

200

#1a7af533

300

#1a7af54d

400

#1a7af566

500

#1a7af580

accent

100

#ebe5f8

200

#c8b7ed

300

#ad91e6

400

#8e5cde

500

#7b2eda

600

#752ccf

700

#6726b6

800

#57219a

900

#371561

transparent

100

#7b2eda1a

200

#7b2eda33

300

#7b2eda4d

400

#7b2eda66

500

#7b2eda80

success

100

#e5f3e5

200

#b6e0b8

300

#8fd292

400

#57c35e

500

#22bb33

600

#20b130

700

#1c9c2b

800

#188424

900

#0f5417

transparent

100

#22bb331a

200

#22bb3333

300

#22bb334d

400

#22bb3366

500

#22bb3380

info

100

#e5effa

200

#b7d4f2

300

#91c0ed

400

#5ba9e8

500

#2d9de5

600

#2b95d9

700

#2683c0

800

#206fa2

900

#144666

transparent

100

#2d9de51a

200

#2d9de533

300

#2d9de54d

400

#2d9de566

500

#2d9de580

warning

100

#fef9e7

200

#fcf0be

300

#fbea9c

400

#fae471

500

#f9e154

600

#ecd550

700

#d0bc46

800

#b09f3b

900

#6f6526

transparent

100

#f9e1541a

200

#f9e15433

300

#f9e1544d

400

#f9e15466

500

#f9e15480

error

100

#ffe5e5

200

#ffb8b8

300

#ff9292

400

#ff5e5e

500

#ff3333

600

#f23030

700

#d52b2b

800

#b42424

900

#721717

transparent

100

#ff33331a

200

#ff333333

300

#ff33334d

400

#ff333366

500

#ff333380

background

100

#ffffff

200

#dfdfdf

300

#bfbfc0

400

#a1a1a2

500

#838385

600

#676769

700

#4c4c4e

800

#333334

900

#1b1b1d

transparent

100

#dfdfdf1a

200

#dfdfdf33

300

#dfdfdf4d

400

#dfdfdf66

500

#dfdfdf80

text

100

#000000

200

#212121

300

#3b3b3b

400

#585858

500

#777777

600

#979797

700

#b9b9b9

800

#dbdbdb

900

#ffffff

bgLight

100

#ffffff

200

#eeeeee

300

#dedede

400

#cecece

500

#bdbdbd

600

#aeaeae

700

#9e9e9e

800

#8f8f8f

900

#808080

bgDark

100

#808080

200

#6f6f6f

300

#5f5f5f

400

#4f4f4f

500

#3f3f3f

600

#303030

700

#222222

800

#151515

900

#000000

lightTheme.json
{
    "background100": "#ffffff",
    "background200": "#dfdfdf",
    "background300": "#bfbfc0",
    "background400": "#a1a1a2",
    "background500": "#838385",
    "background600": "#676769",
    "background700": "#4c4c4e",
    "background800": "#333334",
    "background900": "#1b1b1d",
    "backgroundTransparent100": "#dfdfdf1a",
    "backgroundTransparent200": "#dfdfdf33",
    "backgroundTransparent300": "#dfdfdf4d",
    "backgroundTransparent400": "#dfdfdf66",
    "backgroundTransparent500": "#dfdfdf80",
    "text100": "#000000",
    "text200": "#212121",
    "text300": "#3b3b3b",
    "text400": "#585858",
    "text500": "#777777",
    "text600": "#979797",
    "text700": "#b9b9b9",
    "text800": "#dbdbdb",
    "text900": "#ffffff"
}
darkTheme.json
{
    "background100": "#1b1b1d",
    "background200": "#333334",
    "background300": "#4c4c4e",
    "background400": "#676769",
    "background500": "#838385",
    "background600": "#a1a1a2",
    "background700": "#bfbfc0",
    "background800": "#dfdfdf",
    "background900": "#ffffff",
    "backgroundTransparent100": "#3333341a",
    "backgroundTransparent200": "#33333433",
    "backgroundTransparent300": "#3333344d",
    "backgroundTransparent400": "#33333466",
    "backgroundTransparent500": "#33333480",
    "text100": "#ffffff",
    "text200": "#dbdbdb",
    "text300": "#b9b9b9",
    "text400": "#979797",
    "text500": "#777777",
    "text600": "#585858",
    "text700": "#3b3b3b",
    "text800": "#212121",
    "text900": "#000000"
}