FinallyReact Design Library

Color

Inspired by nature

FinallyReact's color palette will be included when you import the main CSS file, most likely in a top level app file:

In JSX

You can use these colors directly in JSX classNames. For example: className="purple-1" will add the color purple-1 to any text.

{color}-{#}

adds the color css property

{color}-{#}-bg

adds the background-color css property

border-{color}-{#}

adds the border-color css property

border-{t/r/b/l}-{color}-{#}

adds border-color to top, right, bottom, or left

hover:

can be prefixed for color on hover

focus:

can be prefixed for color on focus

active:

can be prefixed for color on active

after:

can be prefixed for color on an after element

In SASS

You can also use these colors in SASS/SCSS files by using @use. For example:

Palette

purple

purple-1

#f6f0ff

purple-2

#f3ebff

purple-3

#d8c2ff

purple-4

#bb99ff

purple-5

#9b70ff

purple-6

#7747fc

purple-7

#5831d6

purple-8

#3d20b0

purple-9

#26128a

purple-10

#180c63

violet

violet-1

#f8f0ff

violet-2

#e9d4ff

violet-3

#d2abff

violet-4

#b882ff

violet-5

#9c59ff

violet-6

#7a31fc

violet-7

#5b1ed6

violet-8

#4010b0

violet-9

#29068a

violet-10

#190363

lavender

lavender-1

#f9f0ff

lavender-2

#e1c6f7

lavender-3

#c296eb

lavender-4

#a26ade

lavender-5

#8443d2

lavender-6

#622eab

lavender-7

#451d85

lavender-8

#2b105e

lavender-9

#180938

lavender-10

#0e0522

grape

grape-1

#e5e1f0

grape-2

#d8d5e3

grape-3

#c1bcd6

grape-4

#9991c9

grape-5

#726abd

grape-6

#4d46b0

grape-7

#33308a

grape-8

#1e1e63

grape-9

#0f113d

grape-10

#060717

blue-rose

blue-rose-1

#f0fcff

blue-rose-2

#f0fbff

blue-rose-3

#ccf1ff

blue-rose-4

#a3e3ff

blue-rose-5

#7ad3ff

blue-rose-6

#4cb4f1

blue-rose-7

#3790cc

blue-rose-8

#246ea6

blue-rose-9

#164e80

blue-rose-10

#0e3459

sky

sky-1

#f0faff

sky-2

#e8f7ff

sky-3

#bfe7ff

sky-4

#95d1fc

sky-5

#67b2f0

sky-6

#3e94e3

sky-7

#2a71bd

sky-8

#1a5296

sky-9

#0d3770

sky-10

#08214a

blue

blue-1

#e6f7ff

blue-2

#9fd7f5

blue-3

#72bbe8

blue-4

#489edb

blue-5

#2381cf

blue-6

#0165c2

blue-7

#004b9c

blue-8

#003575

blue-9

#00214f

blue-10

#000c1f

ocean

ocean-1

#d3e8eb

ocean-2

#8ed3de

ocean-3

#64bfd1

ocean-4

#3faac4

ocean-5

#1d94b8

ocean-6

#007dac

ocean-7

#005d85

ocean-8

#003f5e

ocean-9

#002438

ocean-10

#000b12

leaf

leaf-1

#fefff0

leaf-2

#f0f5ce

leaf-3

#dde89e

leaf-4

#c8db72

leaf-5

#b2cf4a

leaf-6

#9bc327

leaf-7

#769c17

leaf-8

#54750c

leaf-9

#354f04

leaf-10

#1a2902

green

green-1

#eef5dc

green-2

#d1e89e

green-3

#b6db72

green-4

#9ccf4a

green-5

#81c227

green-6

#69b608

green-7

#4a8f00

green-8

#336900

green-9

#1e4200

green-10

#0c1c00

frog

frog-1

#C5D19E

frog-2

#b5c787

frog-3

#9eba61

frog-4

#87ad3e

frog-5

#6fa120

frog-6

#599406

frog-7

#3c6e00

frog-8

#254700

frog-9

#203D00

frog-10

#182E00

emerald

emerald-1

#92BF92

emerald-2

#79b07b

emerald-3

#56a35c

emerald-4

#389641

emerald-5

#1d8a2b

emerald-6

#067e1a

emerald-7

#005711

emerald-8

#00300b

emerald-9

#002409

emerald-10

#001A06

corn

corn-1

#fefff0

corn-2

#ffffed

corn-3

#fffec4

corn-4

#fffa9c

corn-5

#fff373

corn-6

#f8e447

corn-7

#d1b932

corn-8

#ab9120

corn-9

#856c13

corn-10

#5e4a0c

yellow

yellow-1

#ffffe6

yellow-2

#fffca6

yellow-3

#fff67d

yellow-4

#ffee54

yellow-5

#ffe32b

yellow-6

#fed602

yellow-7

#d9ad00

yellow-8

#b38900

yellow-9

#8c6700

yellow-10

#664700

sun

sun-1

#fffdf0

sun-2

#fffbe3

sun-3

#fff4ba

sun-4

#ffe991

sun-5

#ffdc69

sun-6

#fdc93f

sun-7

#d6a32b

sun-8

#b07e1a

sun-9

#8a5c0e

sun-10

#633f09

banana

banana-1

#fffdf0

banana-2

#fff6c9

banana-3

#ffeca1

banana-4

#ffdf78

banana-5

#fcce4e

banana-6

#efb325

banana-7

#c98d14

banana-8

#a36a08

banana-9

#7d4b00

banana-10

#573100

orange

orange-1

#fff7e6

orange-2

#ffe0a3

orange-3

#ffce7a

orange-4

#ffba52

orange-5

#ffa229

orange-6

#f68300

orange-7

#cf6700

orange-8

#a84f00

orange-9

#823800

orange-10

#5c2500

monarch

monarch-1

#fff6e6

monarch-2

#ffdca8

monarch-3

#ffc880

monarch-4

#ffb057

monarch-5

#ff962e

monarch-6

#fa7504

monarch-7

#d45c00

monarch-8

#ad4500

monarch-9

#873200

monarch-10

#612000

carrot

carrot-1

#fff2e6

carrot-2

#ffcda3

carrot-3

#ffb27a

carrot-4

#ff9452

carrot-5

#ff7429

carrot-6

#fd4f00

carrot-7

#d63d00

carrot-8

#b02c00

carrot-9

#8a1e00

carrot-10

#631200

pumpkin

pumpkin-1

#fff3e6

pumpkin-2

#ffd0a3

pumpkin-3

#fcb479

pumpkin-4

#f0914d

pumpkin-5

#e36d24

pumpkin-6

#d54b00

pumpkin-7

#b03800

pumpkin-8

#8a2700

pumpkin-9

#631900

pumpkin-10

#3d0d00

lotus

lotus-1

#fff0f4

lotus-2

#fff0f5

lotus-3

#ffd9e6

lotus-4

#ffb0ce

lotus-5

#ff87b9

lotus-6

#ff5fa8

lotus-7

#d9458d

lotus-8

#b33074

lotus-9

#8c1f5b

lotus-10

#661544

pink

pink-1

#fff0f4

pink-2

#ffd4e1

pink-3

#f7a6c2

pink-4

#eb78a4

pink-5

#de4e89

pink-6

#b83771

pink-7

#912459

pink-8

#6b1542

pink-9

#450d2c

pink-10

#290819

sakura

sakura-1

#fff0f6

sakura-2

#fae8f0

sakura-3

#edb7cf

sakura-4

#e089b3

sakura-5

#d45f9b

sakura-6

#c63986

sakura-7

#a1276e

sakura-8

#7a1754

sakura-9

#540c3b

sakura-10

#2e0621

flamingo

flamingo-1

#ffe9e6

flamingo-2

#ffc2ba

flamingo-3

#ff9a91

flamingo-4

#f56c64

flamingo-5

#e83d3a

flamingo-6

#dc1418

flamingo-7

#b50710

flamingo-8

#8f000c

flamingo-9

#69000c

flamingo-10

#42000a

ruby

ruby-1

#ffe7e6

ruby-2

#ffa5a3

ruby-3

#ff7a7d

ruby-4

#ff525a

ruby-5

#f52738

ruby-6

#e8001c

ruby-7

#c2001d

ruby-8

#9c001d

ruby-9

#750019

ruby-10

#4f0014

apple

apple-1

#ffe6e6

apple-2

#ffa3a6

apple-3

#ff7a83

apple-4

#f74f60

apple-5

#eb2640

apple-6

#dd0026

apple-7

#b80025

apple-8

#910022

apple-9

#6b001d

apple-10

#450015

red

red-1

#EFB3A9

red-2

#eba196

red-3

#de766a

red-4

#d14c43

red-5

#c4251f

red-6

#b80100

red-7

#910005

red-8

#6b0007

red-9

#450007

red-10

#1f0004

lava

lava-1

#D39C97

lava-2

#c98681

lava-3

#bd5e5b

lava-4

#b03838

lava-5

#a31a1f

lava-6

#960009

lava-7

#70000b

lava-8

#4a000a

lava-9

#3D0008

lava-10

#2E0005

calico

calico-1

#e3dfd5

calico-2

#d6d2c9

calico-3

#c9c5bd

calico-4

#bdb4a6

calico-5

#b09b7f

calico-6

#a2815a

calico-7

#7d5f40

calico-8

#573f28

calico-9

#302114

calico-10

#231910

desert

desert-1

#dbd5ce

desert-2

#cfc1b6

desert-3

#c2a28c

desert-4

#b58465

desert-5

#a86743

desert-6

#9c4c26

desert-7

#753116

desert-8

#4f1c0b

desert-9

#290c04

desert-10

#1D0702

brown

brown-1

#ccc6c0

brown-2

#bfb9b4

brown-3

#b3a59b

brown-4

#a68976

brown-5

#996d54

brown-6

#8c5236

brown-7

#663723

brown-8

#401f12

brown-9

#33190F

brown-10

#23110B

coffee

coffee-1

#b5b0aa

coffee-2

#a89e94

coffee-3

#9c8370

coffee-4

#8f6950

coffee-5

#825134

coffee-6

#763a1c

coffee-7

#4f220f

coffee-8

#290f06

coffee-9

#200B04

coffee-10

#170702

cloud

cloud-1

#f0f5ff

cloud-2

#ebeffa

cloud-3

#dfe2ed

cloud-4

#d3d6e0

cloud-5

#c7c9d4

cloud-6

#bfc0c6

cloud-7

#9294a1

cloud-8

#696b7a

cloud-9

#444554

cloud-10

#161B22

fog

fog-1

#fafafa

fog-2

#ededed

fog-3

#e0e0e0

fog-4

#d4d4d4

fog-5

#c7c7c7

fog-6

#b9b9b9

fog-7

#949494

fog-8

#6e6e6e

fog-9

#474747

fog-10

#212121

gray

gray-1

#ffffff

gray-2

#f2f2f2

gray-3

#e6e6e6

gray-4

#d9d9d9

gray-5

#cccccc

gray-6

#bfbfbf

gray-7

#999999

gray-8

#737373

gray-9

#4d4d4d

gray-10

#090b0e

stone

stone-1

#ffffff

stone-2

#f7f7f7

stone-3

#eaeaea

stone-4

#c4c4c4

stone-5

#9e9e9e

stone-6

#787878

stone-7

#525252

stone-8

#2e2e2e

stone-9

#262626

stone-10

#0d1117

Color

Inspired by nature

FinallyReact's color palette will be included when you import the main CSS file, most likely in a top level app file:

In JSX

You can use these colors directly in JSX classNames. For example: className="purple-1" will add the color purple-1 to any text.

{color}-{#}

adds the color css property

{color}-{#}-bg

adds the background-color css property

border-{color}-{#}

adds the border-color css property

border-{t/r/b/l}-{color}-{#}

adds border-color to top, right, bottom, or left

hover:

can be prefixed for color on hover

focus:

can be prefixed for color on focus

active:

can be prefixed for color on active

after:

can be prefixed for color on an after element

In SASS

You can also use these colors in SASS/SCSS files by using @use. For example:

Palette

purple

purple-1

#f6f0ff

purple-2

#f3ebff

purple-3

#d8c2ff

purple-4

#bb99ff

purple-5

#9b70ff

purple-6

#7747fc

purple-7

#5831d6

purple-8

#3d20b0

purple-9

#26128a

purple-10

#180c63

violet

violet-1

#f8f0ff

violet-2

#e9d4ff

violet-3

#d2abff

violet-4

#b882ff

violet-5

#9c59ff

violet-6

#7a31fc

violet-7

#5b1ed6

violet-8

#4010b0

violet-9

#29068a

violet-10

#190363

lavender

lavender-1

#f9f0ff

lavender-2

#e1c6f7

lavender-3

#c296eb

lavender-4

#a26ade

lavender-5

#8443d2

lavender-6

#622eab

lavender-7

#451d85

lavender-8

#2b105e

lavender-9

#180938

lavender-10

#0e0522

grape

grape-1

#e5e1f0

grape-2

#d8d5e3

grape-3

#c1bcd6

grape-4

#9991c9

grape-5

#726abd

grape-6

#4d46b0

grape-7

#33308a

grape-8

#1e1e63

grape-9

#0f113d

grape-10

#060717

blue-rose

blue-rose-1

#f0fcff

blue-rose-2

#f0fbff

blue-rose-3

#ccf1ff

blue-rose-4

#a3e3ff

blue-rose-5

#7ad3ff

blue-rose-6

#4cb4f1

blue-rose-7

#3790cc

blue-rose-8

#246ea6

blue-rose-9

#164e80

blue-rose-10

#0e3459

sky

sky-1

#f0faff

sky-2

#e8f7ff

sky-3

#bfe7ff

sky-4

#95d1fc

sky-5

#67b2f0

sky-6

#3e94e3

sky-7

#2a71bd

sky-8

#1a5296

sky-9

#0d3770

sky-10

#08214a

blue

blue-1

#e6f7ff

blue-2

#9fd7f5

blue-3

#72bbe8

blue-4

#489edb

blue-5

#2381cf

blue-6

#0165c2

blue-7

#004b9c

blue-8

#003575

blue-9

#00214f

blue-10

#000c1f

ocean

ocean-1

#d3e8eb

ocean-2

#8ed3de

ocean-3

#64bfd1

ocean-4

#3faac4

ocean-5

#1d94b8

ocean-6

#007dac

ocean-7

#005d85

ocean-8

#003f5e

ocean-9

#002438

ocean-10

#000b12

leaf

leaf-1

#fefff0

leaf-2

#f0f5ce

leaf-3

#dde89e

leaf-4

#c8db72

leaf-5

#b2cf4a

leaf-6

#9bc327

leaf-7

#769c17

leaf-8

#54750c

leaf-9

#354f04

leaf-10

#1a2902

green

green-1

#eef5dc

green-2

#d1e89e

green-3

#b6db72

green-4

#9ccf4a

green-5

#81c227

green-6

#69b608

green-7

#4a8f00

green-8

#336900

green-9

#1e4200

green-10

#0c1c00

frog

frog-1

#C5D19E

frog-2

#b5c787

frog-3

#9eba61

frog-4

#87ad3e

frog-5

#6fa120

frog-6

#599406

frog-7

#3c6e00

frog-8

#254700

frog-9

#203D00

frog-10

#182E00

emerald

emerald-1

#92BF92

emerald-2

#79b07b

emerald-3

#56a35c

emerald-4

#389641

emerald-5

#1d8a2b

emerald-6

#067e1a

emerald-7

#005711

emerald-8

#00300b

emerald-9

#002409

emerald-10

#001A06

corn

corn-1

#fefff0

corn-2

#ffffed

corn-3

#fffec4

corn-4

#fffa9c

corn-5

#fff373

corn-6

#f8e447

corn-7

#d1b932

corn-8

#ab9120

corn-9

#856c13

corn-10

#5e4a0c

yellow

yellow-1

#ffffe6

yellow-2

#fffca6

yellow-3

#fff67d

yellow-4

#ffee54

yellow-5

#ffe32b

yellow-6

#fed602

yellow-7

#d9ad00

yellow-8

#b38900

yellow-9

#8c6700

yellow-10

#664700

sun

sun-1

#fffdf0

sun-2

#fffbe3

sun-3

#fff4ba

sun-4

#ffe991

sun-5

#ffdc69

sun-6

#fdc93f

sun-7

#d6a32b

sun-8

#b07e1a

sun-9

#8a5c0e

sun-10

#633f09

banana

banana-1

#fffdf0

banana-2

#fff6c9

banana-3

#ffeca1

banana-4

#ffdf78

banana-5

#fcce4e

banana-6

#efb325

banana-7

#c98d14

banana-8

#a36a08

banana-9

#7d4b00

banana-10

#573100

orange

orange-1

#fff7e6

orange-2

#ffe0a3

orange-3

#ffce7a

orange-4

#ffba52

orange-5

#ffa229

orange-6

#f68300

orange-7

#cf6700

orange-8

#a84f00

orange-9

#823800

orange-10

#5c2500

monarch

monarch-1

#fff6e6

monarch-2

#ffdca8

monarch-3

#ffc880

monarch-4

#ffb057

monarch-5

#ff962e

monarch-6

#fa7504

monarch-7

#d45c00

monarch-8

#ad4500

monarch-9

#873200

monarch-10

#612000

carrot

carrot-1

#fff2e6

carrot-2

#ffcda3

carrot-3

#ffb27a

carrot-4

#ff9452

carrot-5

#ff7429

carrot-6

#fd4f00

carrot-7

#d63d00

carrot-8

#b02c00

carrot-9

#8a1e00

carrot-10

#631200

pumpkin

pumpkin-1

#fff3e6

pumpkin-2

#ffd0a3

pumpkin-3

#fcb479

pumpkin-4

#f0914d

pumpkin-5

#e36d24

pumpkin-6

#d54b00

pumpkin-7

#b03800

pumpkin-8

#8a2700

pumpkin-9

#631900

pumpkin-10

#3d0d00

lotus

lotus-1

#fff0f4

lotus-2

#fff0f5

lotus-3

#ffd9e6

lotus-4

#ffb0ce

lotus-5

#ff87b9

lotus-6

#ff5fa8

lotus-7

#d9458d

lotus-8

#b33074

lotus-9

#8c1f5b

lotus-10

#661544

pink

pink-1

#fff0f4

pink-2

#ffd4e1

pink-3

#f7a6c2

pink-4

#eb78a4

pink-5

#de4e89

pink-6

#b83771

pink-7

#912459

pink-8

#6b1542

pink-9

#450d2c

pink-10

#290819

sakura

sakura-1

#fff0f6

sakura-2

#fae8f0

sakura-3

#edb7cf

sakura-4

#e089b3

sakura-5

#d45f9b

sakura-6

#c63986

sakura-7

#a1276e

sakura-8

#7a1754

sakura-9

#540c3b

sakura-10

#2e0621

flamingo

flamingo-1

#ffe9e6

flamingo-2

#ffc2ba

flamingo-3

#ff9a91

flamingo-4

#f56c64

flamingo-5

#e83d3a

flamingo-6

#dc1418

flamingo-7

#b50710

flamingo-8

#8f000c

flamingo-9

#69000c

flamingo-10

#42000a

ruby

ruby-1

#ffe7e6

ruby-2

#ffa5a3

ruby-3

#ff7a7d

ruby-4

#ff525a

ruby-5

#f52738

ruby-6

#e8001c

ruby-7

#c2001d

ruby-8

#9c001d

ruby-9

#750019

ruby-10

#4f0014

apple

apple-1

#ffe6e6

apple-2

#ffa3a6

apple-3

#ff7a83

apple-4

#f74f60

apple-5

#eb2640

apple-6

#dd0026

apple-7

#b80025

apple-8

#910022

apple-9

#6b001d

apple-10

#450015

red

red-1

#EFB3A9

red-2

#eba196

red-3

#de766a

red-4

#d14c43

red-5

#c4251f

red-6

#b80100

red-7

#910005

red-8

#6b0007

red-9

#450007

red-10

#1f0004

lava

lava-1

#D39C97

lava-2

#c98681

lava-3

#bd5e5b

lava-4

#b03838

lava-5

#a31a1f

lava-6

#960009

lava-7

#70000b

lava-8

#4a000a

lava-9

#3D0008

lava-10

#2E0005

calico

calico-1

#e3dfd5

calico-2

#d6d2c9

calico-3

#c9c5bd

calico-4

#bdb4a6

calico-5

#b09b7f

calico-6

#a2815a

calico-7

#7d5f40

calico-8

#573f28

calico-9

#302114

calico-10

#231910

desert

desert-1

#dbd5ce

desert-2

#cfc1b6

desert-3

#c2a28c

desert-4

#b58465

desert-5

#a86743

desert-6

#9c4c26

desert-7

#753116

desert-8

#4f1c0b

desert-9

#290c04

desert-10

#1D0702

brown

brown-1

#ccc6c0

brown-2

#bfb9b4

brown-3

#b3a59b

brown-4

#a68976

brown-5

#996d54

brown-6

#8c5236

brown-7

#663723

brown-8

#401f12

brown-9

#33190F

brown-10

#23110B

coffee

coffee-1

#b5b0aa

coffee-2

#a89e94

coffee-3

#9c8370

coffee-4

#8f6950

coffee-5

#825134

coffee-6

#763a1c

coffee-7

#4f220f

coffee-8

#290f06

coffee-9

#200B04

coffee-10

#170702

cloud

cloud-1

#f0f5ff

cloud-2

#ebeffa

cloud-3

#dfe2ed

cloud-4

#d3d6e0

cloud-5

#c7c9d4

cloud-6

#bfc0c6

cloud-7

#9294a1

cloud-8

#696b7a

cloud-9

#444554

cloud-10

#161B22

fog

fog-1

#fafafa

fog-2

#ededed

fog-3

#e0e0e0

fog-4

#d4d4d4

fog-5

#c7c7c7

fog-6

#b9b9b9

fog-7

#949494

fog-8

#6e6e6e

fog-9

#474747

fog-10

#212121

gray

gray-1

#ffffff

gray-2

#f2f2f2

gray-3

#e6e6e6

gray-4

#d9d9d9

gray-5

#cccccc

gray-6

#bfbfbf

gray-7

#999999

gray-8

#737373

gray-9

#4d4d4d

gray-10

#090b0e

stone

stone-1

#ffffff

stone-2

#f7f7f7

stone-3

#eaeaea

stone-4

#c4c4c4

stone-5

#9e9e9e

stone-6

#787878

stone-7

#525252

stone-8

#2e2e2e

stone-9

#262626

stone-10

#0d1117