Color

Draft

Colors are defined as named tokens so they can be consistent throughout Protocol. When using these colors in Sass, use the token variable rather than the hex value. Avoid using colors outside this palette unless you have a good reason.

Green

Green 05

$color-green-05
#e3fff3

Green 10

$color-green-10
#d1ffee

Green 20

$color-green-20
#b3ffe3

Green 30

$color-green-30
#88ffd1

Green 40

$color-green-40
#54ffbd

Green 50

$color-green-50
#3fe1b0

Green 60

$color-green-60
#2ac3a2

Green 70

$color-green-70
#008787

Green 80

$color-green-80
#005e5e

Green 90

$color-green-90
#08403f

Blue

Blue 05

$color-blue-05
#aaf2ff

Blue 10

$color-blue-10
#80ebff

Blue 20

$color-blue-20
#00ddff

Blue 30

$color-blue-30
#00b3f4

Blue 40

$color-blue-40
#0090ed

Blue 50

$color-blue-50
#0060df

Blue 60

$color-blue-60
#0250bb

Blue 70

$color-blue-70
#054096

Blue 80

$color-blue-80
#073072

Blue 90

$color-blue-90
#09204d

Violet

Violet 05

$color-violet-05
#e7dfff

Violet 10

$color-violet-10
#d9bfff

Violet 20

$color-violet-20
#cb9eff

Violet 30

$color-violet-30
#c689ff

Violet 40

$color-violet-40
#ab71ff

Violet 50

$color-violet-50
#9059ff

Violet 60

$color-violet-60
#7542e5

Violet 70

$color-violet-70
#592acb

Violet 80

$color-violet-80
#45278d

Violet 90

$color-violet-90
#321c64

Purple

Purple 05

$color-purple-05
#f7e2ff

Purple 10

$color-purple-10
#f6b8ff

Purple 20

$color-purple-20
#f68fff

Purple 30

$color-purple-30
#f770ff

Purple 40

$color-purple-40
#d74cf0

Purple 50

$color-purple-50
#b833e1

Purple 60

$color-purple-60
#952bb9

Purple 70

$color-purple-70
#722291

Purple 80

$color-purple-80
#4e1a69

Purple 90

$color-purple-90
#2b1141

Pink

Pink 05

$color-pink-05
#ffdef0

Pink 10

$color-pink-10
#ffb4db

Pink 20

$color-pink-20
#ff8ac5

Pink 30

$color-pink-30
#ff6bba

Pink 40

$color-pink-40
#ff4aa2

Pink 50

$color-pink-50
#ff298a

Pink 60

$color-pink-60
#e31587

Pink 70

$color-pink-70
#c60084

Pink 80

$color-pink-80
#7f145b

Pink 90

$color-pink-90
#50134b

Red

Red 05

$color-red-05
#ffdfe7

Red 10

$color-red-10
#ffbdc5

Red 20

$color-red-20
#ff9aa2

Red 30

$color-red-30
#ff848b

Red 40

$color-red-40
#ff6a75

Red 50

$color-red-50
#ff4f5e

Red 60

$color-red-60
#e22850

Red 70

$color-red-70
#c50042

Red 80

$color-red-80
#810220

Red 90

$color-red-90
#440306

Orange

Orange 05

$color-orange-05
#fff4de

Orange 10

$color-orange-10
#ffd5b2

Orange 20

$color-orange-20
#ffb587

Orange 30

$color-orange-30
#ffa266

Orange 40

$color-orange-40
#ff8a50

Orange 50

$color-orange-50
#ff7139

Orange 60

$color-orange-60
#e25920

Orange 70

$color-orange-70
#cc3d00

Orange 80

$color-orange-80
#9e280b

Orange 90

$color-orange-90
#7c1504

Yellow

Yellow 05

$color-yellow-05
#ffffcc

Yellow 10

$color-yellow-10
#ffff98

Yellow 20

$color-yellow-20
#ffea80

Yellow 30

$color-yellow-30
#ffd567

Yellow 40

$color-yellow-40
#ffbd4f

Yellow 50

$color-yellow-50
#ffa436

Yellow 60

$color-yellow-60
#e27f2e

Yellow 70

$color-yellow-70
#c45a27

Yellow 80

$color-yellow-80
#a7341f

Yellow 90

$color-yellow-90
#960e18

Light Gray

Light Gray 05

$color-light-gray-05
#ffffff

Light Gray 10

$color-light-gray-10
#f9f9fb

Light Gray 20

$color-light-gray-20
#f0f0f4

Light Gray 30

$color-light-gray-30
#e0e0e6

Light Gray 40

$color-light-gray-40
#cfcfd8

Light Gray 50

$color-light-gray-50
#bfbfc9

Light Gray 60

$color-light-gray-60
#afafba

Light Gray 70

$color-light-gray-70
#9f9fad

Light Gray 80

$color-light-gray-80
#8f8f9e

Light Gray 90

$color-light-gray-90
#80808f

Dark Gray

Dark Gray 05

$color-dark-gray-05
#5b5b66

Dark Gray 10

$color-dark-gray-10
#52525e

Dark Gray 20

$color-dark-gray-20
#4a4a55

Dark Gray 30

$color-dark-gray-30
#42414d

Dark Gray 40

$color-dark-gray-40
#3a3944

Dark Gray 50

$color-dark-gray-50
#32313c

Dark Gray 60

$color-dark-gray-60
#2b2a33

Dark Gray 70

$color-dark-gray-70
#23222b

Dark Gray 80

$color-dark-gray-80
#1c1b22

Dark Gray 90

$color-dark-gray-90
#15141a

Marketing Gray

Marketing Gray 10

$color-marketing-gray-10
#f9f9fa

Marketing Gray 20

$color-marketing-gray-20
#ededf0

Marketing Gray 30

$color-marketing-gray-30
#cdcdd4

Marketing Gray 40

$color-marketing-gray-40
#b1b1bc

Marketing Gray 50

$color-marketing-gray-50
#9595a2

Marketing Gray 60

$color-marketing-gray-60
#7a7a8b

Marketing Gray 70

$color-marketing-gray-70
#5e5e72

Marketing Gray 80

$color-marketing-gray-80
#42425a

Marketing Gray 90

$color-marketing-gray-90
#1f2033

Marketing Gray 99

$color-marketing-gray-99
#20123a

Ink

Ink 05

$color-ink-05
#393473

Ink 10

$color-ink-10
#342f6d

Ink 20

$color-ink-20
#312a64

Ink 30

$color-ink-30
#2e255d

Ink 40

$color-ink-40
#2b2156

Ink 50

$color-ink-50
#291d4f

Ink 60

$color-ink-60
#271948

Ink 70

$color-ink-70
#241541

Ink 80

$color-ink-80
#20123a

Ink 90

$color-ink-90
#1d1133

Utility Colors

Black

$color-black
#000000

White

$color-white
#ffffff

Link

$color-link
#0060df

Link:Hover

$color-link-hover
#0250bb

Link:Visited

$color-link-visited
#b833e1

Link:Visited:Hover

$color-link-visited-hover
#952bb9

Mozilla Brand Colors

Mozilla Neon Blue

$color-moz-neon-blue
#00ffff

Mozilla Lemon Yellow

$color-moz-lemon-yellow
#fff44f

Mozilla Warm Red

$color-moz-warm-red
#ff4f5e

Mozilla Neon Green

$color-moz-neon-green
#54ffbd

Mozilla Dark Purple

$color-moz-dark-purple
#6e008b

Mozilla Dark Green

$color-moz-dark-green
#005e5e

Mozilla Dark Blue

$color-moz-dark-blue
#00458b

Mozilla Dark Gray

$color-moz-dark-gray
#959595

Mozilla Light Gray

$color-moz-light-gray
#e7e5e2