Visual

Color

Sprout uses a dynamic and flexible color system to develop unexpected and relatable brand experiences with intention.

Foundational Palette

Sprout's foundational colors are utilized as the base for most backgrounds, text, and borders as grounding elements in Sprout's visual language.

These values provide intentional simplicity and accessibility throughout communications.

  • Onyx

  • Neutral 1100
  • Hex: #040404
  • RGB: 4, 4, 4
  • CMYK: 0%, 0%, 0%, 98%
  • Snowcap

  • Neutral 000
  • Hex: #FFFFFF
  • RGB: 255, 255, 255
  • CMYK: 0%, 0%, 0%, 0%
  • Background gray

  • Neutral 100
  • Hex: #f3f4f4
  • RGB: 243, 244, 244
  • CMYK: 0%, 0%, 0%, 4%
  • Border gray

  • Neutral 200
  • Hex: #dee1e1
  • RGB: 222, 225, 225
  • CMYK: 1%, 0%, 0%, 12%
  • Medium gray

  • Neutral 700
  • Hex: #515e5f
  • RGB: 81, 94, 95
  • CMYK: 15%, 1%, 0%, 63%

Core Palette

The core palette captures Sprout's evolution while staying true to its roots. The strategic blend of green, a color with enduring brand recognition, and the infusion of blue, symbolizing Sprout's authority and trust in the tech industry, effectively reshapes the notion of "core Sprout”.

These values should be used consistently across various brand applications to establish a strong and recognizable brand expression.

  • Jade

  • Teal 1000
  • Hex: #083f3f
  • RGB: 8, 63, 63
  • CMYK: 87%, 0%, 0%, 75%
  • Spruce

  • Teal 900
  • Hex: #026661
  • RGB: 2, 102, 97
  • CMYK: 98%, 0%, 5%, 60%
  • Emerald

  • Green 900
  • Hex: #006b40
  • RGB: 0, 107, 64
  • CMYK: 100%, 0%, 40%, 58%
  • Fern

  • Green 300
  • Hex: #98e58e
  • RGB: 152, 229, 142
  • CMYK: 34%, 0%, 38%, 10%
  • Mint

  • Green 000
  • Hex: #ebf9eb
  • RGB: 235, 249, 235
  • CMYK: 6%, 0%, 6%, 2%
  • Midnight

  • Blue 1000
  • Hex: #0a2960
  • RGB: 10, 41, 96
  • CMYK: 90%, 57%, 0%, 62%
  • Sapphire

  • Blue 900
  • Hex: #0c3f89
  • RGB: 12, 63, 137
  • CMYK: 91%, 54%, 0%, 46%
  • Cobalt

  • Blue 700
  • Hex: #205bc3
  • RGB: 32, 91, 195
  • CMYK: 84%, 53%, 0%, 24%
  • Cornflower

  • Blue 300
  • Hex: #a1c2f8
  • RGB: 161, 194, 248
  • CMYK: 35%, 22%, 0%, 3%
  • Sky

  • Blue 200
  • Hex: #c7dbf9
  • RGB: 199, 219, 249
  • CMYK: 20%, 12%, 0%, 2%

Secondary Palette

Sprout's secondary palette is comprised of jewel tones, accent mid plus light tones, and muted tones all of which are distilled from nature and compliment the distinction and mastery of the Core palette.

When using the Secondary palette, always include a presence of one of the Core colors. These values should be used to grab attention, bring harmony to designs and provide balance to the Foundational and Core palettes.

  • Cactus

  • Green 500
  • Hex: #59cb59
  • RGB: 89, 203, 89
  • CMYK: 56%, 0%, 56%, 20%
  • Ocean

  • Teal 500
  • Hex: #08c4b2
  • RGB: 8, 196, 178
  • CMYK: 96%, 0%, 9%, 23%
  • Glacier

  • Teal 300
  • Hex: #7dead5
  • RGB: 125, 234, 213
  • CMYK: 47%, 0%, 9%, 8%
  • Mist

  • Teal 050
  • Hex: #CCF1EA
  • RGB: 204, 241, 234
  • CMYK: 15%, 0%, 3%, 5%
  • Citrine

  • Yellow 700
  • Hex: #dd9903
  • RGB: 221, 153, 3
  • CMYK: 0%, 31%, 99%, 13%
  • Marigold

  • Yellow 600
  • Hex: #ffbc00
  • RGB: 255, 188, 0
  • CMYK: 0%, 26%, 100%, 0%
  • Sunrise

  • Yellow 300
  • Hex: #ffe16e
  • RGB: 255, 225, 110
  • CMYK: 0%, 12%, 57%, 0%
  • Canary

  • Yellow 100
  • Hex: #fdefcd
  • RGB: 253, 239, 205
  • CMYK: 0%, 6%, 19%, 1%
  • Almandine

  • Pink 900
  • Hex: #931847
  • RGB: 147, 24, 71
  • CMYK: 0%, 84%, 52%, 42%
  • Rose

  • Pink 700
  • Hex: #ce3665
  • RGB: 206, 54, 101
  • CMYK: 0%, 74%, 51%, 19%
  • Salmon

  • Orange 300
  • Hex: #ffb180
  • RGB: 255, 177, 128
  • CMYK: 0%, 31%, 50%, 0%
  • Apricot

  • Orange 100
  • Hex: #fcdccc
  • RGB: 252, 220, 204
  • CMYK: 0%, 13%, 19%, 1%
  • Tourmaline

  • Magenta 900
  • Hex: #6c2277
  • RGB: 108, 34, 119
  • CMYK: 9%, 71%, 0%, 53%
  • Orchid

  • Magenta 700
  • Hex: #ac44a8
  • RGB: 172, 68, 168
  • CMYK: 0%, 60%, 2%, 33%
  • Violet

  • Magenta 350
  • Hex: #EC9AF1
  • RGB: 236, 154, 241
  • CMYK: 2%, 36%, 0%, 5%
  • Periwinkle

  • Purple 200
  • Hex: #d8d7f9
  • RGB: 216, 215, 249
  • CMYK: 13%, 14%, 0%, 2%

Sprout's brand color system provides creators with a variety of flexible options to develop compelling and memorable visual communications. These recommended colorways ensure brand consistency and cohesion across all marketing channels while prioritizing accessibility.

The diagram below details how colorways work together to create intentional and balanced designs by combining colors through backgrounds, linework and typography.

Legend for interpreting colorways

Core brand

These recommended colorways should be incorporated across visual communications supporting the consideration and decision phases of the customer journey to build a strong and unified brand experience. When applied across a variety of marketing materials, the consistent application of these colorways ensures a seamless and recognizable brand presence.

A
body copy
  • Jade
  • B: Jade
  • L: Emerald
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Spruce
  • B: Spruce
  • L: Jade
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Emerald
  • B: Emerald
  • L: Cactus
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Fern
  • B: Fern
  • L: Emerald
  • H: Onyx
  • C: Onyx
A
body copy
  • Mint
  • B: Mint
  • L: Cactus
  • H: Onyx
  • C: Onyx
A
body copy
  • Midnight
  • B: Midnight
  • L: Cobalt
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Sapphire
  • B: Sapphire
  • L: Midnight
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Cobalt
  • B: Cobalt
  • L: Cornflower
  • H: Snowcap
  • C: Snowcap
A
body copy
  • Cornflower
  • B: Cornflower
  • L: Sapphire
  • H: Onyx
  • C: Onyx
A
body copy
  • Sky
  • B: Sky
  • L: Cobalt
  • H: Onyx
  • C: Onyx

Product focus

Product colorways should be employed across the entirety of the customer journey from awareness through decision when representing specific focuses, features and values of the product. After product adoption, continuing to maintain these colorways in customer onboarding and success communications will contribute to a consistent and visually cohesive post-purchase experience.

Publishing

A
body copy
  • Dark
  • B: Tourmaline
  • L: Orchid
  • H: Periwinkle
  • C: Snowcap
A
body copy
  • Light
  • B: Perwinkle
  • L: Orchid
  • H: Tourmaline
  • C: Onyx

Engagement

A
body copy
  • Dark
  • B: Emerald
  • L: Cactus
  • H: Mint
  • C: Snowcap
A
body copy
  • Light
  • B: Mint
  • L: Fern
  • H: Emerald
  • C: Onyx

Analytics

A
body copy
  • Dark
  • B: Almandine
  • L: Rose
  • H: Apricot
  • C: Snowcap
A
body copy
  • Light
  • B: Apricot
  • L: Rose
  • H: Almandine
  • C: Onyx

Listening

A
body copy
  • Dark
  • B: Midnight
  • L: Cobalt
  • H: Sky
  • C: Snowcap
A
body copy
  • Light
  • B: Sky
  • L: Cobalt
  • H: Sapphire
  • C: Onyx

Advocacy

A
body copy
  • Dark
  • B: Jade
  • L: Ocean
  • H: Mist
  • C: Snowcap
A
body copy
  • Light
  • B: Mist
  • L: Jade
  • H: Spruce
  • C: Onyx

Influencer marketing

A
body copy
  • Dark
  • B: Marigold
  • L: Citrine
  • H: Onyx
  • C: Onyx
A
body copy
  • Light
  • B: Canary
  • L: Marigold
  • H: Onyx
  • C: Onyx

Gradients

Gradients are extremely versatile in designs, they can be bold or subtle, the focal point or a background texture. Gradients should be strategically incorporated into designs to evoke a sense of depth and dimension, adding a layer of complexity and unexpectedness. Gradients are particularly effective in digital and web design, enhancing user experiences by creating a dynamic transition between colors that draws attention and guides the eye.

Core gradients

Core gradients are our most used gradients in Sprout's design ecosystem.

Legend for interpreting colorways

Product focus gradients

Product focus gradients are built from the product pillar color system and used primarily in spaces to add emphasis to product feature content, and within product images to bring attention to Sprout customers and social media users.

These product focused colorways can be used to build gradients on neutral backgrounds by using Onyx, Background Gray or Snowcap to add depth and dimension. Be mindful of the mood each neutral value conveys.

Legend for interpreting colorways

Tone on Tone Gradients

Monochromatic tone on tone gradients may be used to create subtle depth and dimension within designs and illuminate moments of emphasis.

Example of neutral background gradients

Example Tone on Tone Gradient Swatches

Example of tone on tone gradients

Human tones

In addition to the brand color system, we also employ the use of specialty human tones for illustration. These colors show our commitment to representing a diverse range of people with unique skin, hair, lip and eye colors. The values blend the authenticity of humanistic tones with the relatable nature of our brand color system.

Humanistic usage

In any situation where we are representing the human form—whether it’s an entire person or just a hand—use of the human tones is strongly recommended. The more representational the human form is in an illustration or graphic element, the more appropriate it is to use the human tones.

Skin color

Base tones work best as skin colors. Be mindful of a base color’s undertones (noted in the value name as Y-yellow, R-red, P-pink or B-blue) when selecting hair, lip, eye and clothing colors. For example, a skin tone with yellow undertones may not pair well with yellow clothing.

Base tones
  • Porcelain

  • br.100
  • Hex: #F5D7CD
  • RGB: 245, 215, 205
  • CMYK: 0%, 12%, 16%, 4%
  • Beige

  • by.100
  • Hex: #F2CDAE
  • RGB: 242, 205, 174
  • CMYK: 0%, 15%, 28%, 5%
  • Sand

  • br.300
  • Hex: #F2BD9E
  • RGB: 242, 189, 158
  • CMYK: 0%, 22%, 35%, 5%
  • Blush

  • bp.300
  • Hex: #EAADA4
  • RGB: 234, 173, 164
  • CMYK: 0%, 26%, 30%, 8%
  • Sienna

  • bp.500
  • Hex: #CE979A
  • RGB: 206, 151, 154
  • CMYK: 0%, 27%, 25%, 19%
  • Nude

  • br.500
  • Hex: #CF897C
  • RGB: 207, 137, 124
  • CMYK: 0%, 34%, 40%, 19%
  • Umber

  • bb.500
  • Hex: #B58A7C
  • RGB: 181, 138, 124
  • CMYK: 0%, 24%, 31%, 29%
  • Chestnut

  • by.500
  • Hex: #8D6A56
  • RGB: 141, 106, 86
  • CMYK: 0%, 25%, 39%, 45%
  • Hickory

  • bb.700
  • Hex: #725E5F
  • RGB: 114, 94, 95
  • CMYK: 0%, 18%, 17%, 55%
  • Bronze

  • by.700
  • Hex: #784F44
  • RGB: 120, 79, 68
  • CMYK: 0%, 34%, 43%, 53%

Hair color

Hair colors can be selected from base tones, accent tones or the brand color system. Hair color should be visually distinct from the skin color to minimize color vibration. When showing multiple people together in a scene, limit the number of different hair colors to avoid an overly complex color scheme.

Accent tones
  • Blonde

  • ay.300
  • Hex: #F5D58F
  • RGB: 245, 213, 143
  • CMYK: 0%, 13%, 42%, 4%
  • Amber

  • ar.700
  • Hex: #B7574B
  • RGB: 183, 87, 75
  • CMYK: 0%, 52%, 59%, 28%
  • Steel

  • ab.900
  • Hex: #484D5C
  • RGB: 72, 77, 92
  • CMYK: 22%, 16%, 0%, 64%
  • Plum

  • ap.900
  • Hex: #604856
  • RGB: 96, 72, 86
  • CMYK: 0%, 25%, 10%, 62%

Lip color

Lip tones are pulled from the brand color system and may be used at full saturation or placed on top of the base skin color using a blending mode overlay.

  • Tourmaline

  • Neutral 0
  • Hex: #6c2277
  • RGB: 108, 34, 119
  • CMYK: 9%, 71%, 0%, 53%
  • Orchid

  • Magenta 700
  • Hex: #ac44a8
  • RGB: 172, 68, 168
  • CMYK: 0%, 60%, 2%, 33%
  • Violet

  • Magenta 350
  • Hex: #EC9AF1
  • RGB: 236, 154, 241
  • CMYK: 2%, 36%, 0%, 5%
  • Almadine

  • Pink 900
  • Hex: #931847
  • RGB: 147, 24, 71
  • CMYK: 0%, 84%, 52%, 42%
  • Rose

  • Pink 700
  • Hex: #ce3665
  • RGB: 206, 54, 101
  • CMYK: 0%, 74%, 51%, 19%
  • Salmon

  • Orange 300
  • Hex: #ffb180
  • RGB: 255, 177, 128
  • CMYK: 0%, 31%, 50%, 0%

Eye color

Eye tones for brighter, colored eyes (blues and greens) are pulled from the brand color system. For deeper, neutral eyes (hazels and browns) select from the base tones. However, in most cases because of the scale of the illustration and the people in it, there will be no visible iris and the eye color can simply be drawn as a circle filled in Midnight.

  • Emerald

  • Green 900
  • Hex: #006b40
  • RGB: 0, 107, 64
  • CMYK: 100%, 0%, 40%, 58%
  • Fern

  • Green 300
  • Hex: #98e58e
  • RGB: 152, 229, 142
  • CMYK: 34%, 0%, 38%, 10%
  • Jade

  • Teal 1000
  • Hex: #083f3f
  • RGB: 8, 63, 63
  • CMYK: 87%, 0%, 0%, 75%
  • Glacier

  • Teal 300
  • Hex: #7dead5
  • RGB: 125, 234, 213
  • CMYK: 47%, 0%, 9%, 8%
  • Sapphire

  • Blue 900
  • Hex: #0c3f89
  • RGB: 12, 63, 137
  • CMYK: 91%, 54%, 0%, 46%
  • Cornflower

  • Blue 300
  • Hex: #a1c2f8
  • RGB: 161, 194, 248
  • CMYK: 35%, 22%, 0%, 3%

Product color palette

Actions

Primary CTA
Secondary CTA
Link
Warning
Error

Type

Headlines
Body copy
Subtexts

Common UI

Border
App background
Container

Color finder

Enter a hex color value to find the closest Seeds color token match.

Preview

Full color palette

green
Green 0
#ebf9eb
JS
Sass
CSS
Android
Green 100
#d7f4d7
JS
Sass
CSS
Android
Green 200
#c2f2bd
JS
Sass
CSS
Android
Green 300
#98e58e
JS
Sass
CSS
Android
Green 400
#75dd66
JS
Sass
CSS
Android
Green 500
#59cb59
JS
Sass
CSS
Android
Green 600
#2bb656
JS
Sass
CSS
Android
Green 700
#0ca750
JS
Sass
CSS
Android
Green 800
#008b46
JS
Sass
CSS
Android
Green 900
#006b40
JS
Sass
CSS
Android
Green 1000
#08422f
JS
Sass
CSS
Android
Green 1100
#002b20
JS
Sass
CSS
Android
blue
Blue 0
#e9f4ff
JS
Sass
CSS
Android
Blue 100
#deebfe
JS
Sass
CSS
Android
Blue 200
#c7dbf9
JS
Sass
CSS
Android
Blue 300
#a1c2f8
JS
Sass
CSS
Android
Blue 400
#679eff
JS
Sass
CSS
Android
Blue 500
#3876e3
JS
Sass
CSS
Android
Blue 600
#2b68d3
JS
Sass
CSS
Android
Blue 700
#205bc3
JS
Sass
CSS
Android
Blue 800
#1150aa
JS
Sass
CSS
Android
Blue 900
#0c3f89
JS
Sass
CSS
Android
Blue 1000
#0a2960
JS
Sass
CSS
Android
Blue 1100
#001738
JS
Sass
CSS
Android
aqua
Aqua 0
#d9fcfb
JS
Sass
CSS
Android
Aqua 100
#c5f9f9
JS
Sass
CSS
Android
Aqua 200
#a5f2f2
JS
Sass
CSS
Android
Aqua 300
#76e5e2
JS
Sass
CSS
Android
Aqua 400
#33d6e2
JS
Sass
CSS
Android
Aqua 500
#17b8ce
JS
Sass
CSS
Android
Aqua 600
#0797ae
JS
Sass
CSS
Android
Aqua 700
#0b8599
JS
Sass
CSS
Android
Aqua 800
#0f6e84
JS
Sass
CSS
Android
Aqua 900
#035e73
JS
Sass
CSS
Android
Aqua 1000
#083d4f
JS
Sass
CSS
Android
Aqua 1100
#002838
JS
Sass
CSS
Android
purple
Purple 0
#f2f2f9
JS
Sass
CSS
Android
Purple 100
#eaeaf9
JS
Sass
CSS
Android
Purple 200
#d8d7f9
JS
Sass
CSS
Android
Purple 300
#c1c1f7
JS
Sass
CSS
Android
Purple 400
#a193f2
JS
Sass
CSS
Android
Purple 500
#9180f4
JS
Sass
CSS
Android
Purple 600
#816fea
JS
Sass
CSS
Android
Purple 700
#6f5ed3
JS
Sass
CSS
Android
Purple 800
#5e4eba
JS
Sass
CSS
Android
Purple 900
#483a9c
JS
Sass
CSS
Android
Purple 1000
#2d246b
JS
Sass
CSS
Android
Purple 1100
#1d1d38
JS
Sass
CSS
Android
neutral
Neutral 0
#FFFFFF
JS
Sass
CSS
Android
Neutral 100
#f3f4f4
JS
Sass
CSS
Android
Neutral 200
#dee1e1
JS
Sass
CSS
Android
Neutral 300
#c8cccc
JS
Sass
CSS
Android
Neutral 400
#b0b6b7
JS
Sass
CSS
Android
Neutral 500
#929a9b
JS
Sass
CSS
Android
Neutral 600
#6e797a
JS
Sass
CSS
Android
Neutral 700
#515e5f
JS
Sass
CSS
Android
Neutral 800
#364141
JS
Sass
CSS
Android
Neutral 900
#273333
JS
Sass
CSS
Android
Neutral 1000
#162020
JS
Sass
CSS
Android
Neutral 1100
#040404
JS
Sass
CSS
Android
teal
Teal 0
#e5f9f5
JS
Sass
CSS
Android
Teal 50
#CCF1EA
JS
Sass
CSS
Android
Teal 100
#cdf7ef
JS
Sass
CSS
Android
Teal 200
#b3f2e6
JS
Sass
CSS
Android
Teal 300
#7dead5
JS
Sass
CSS
Android
Teal 400
#24e0c5
JS
Sass
CSS
Android
Teal 500
#08c4b2
JS
Sass
CSS
Android
Teal 600
#00a99c
JS
Sass
CSS
Android
Teal 700
#0b968f
JS
Sass
CSS
Android
Teal 800
#067c7c
JS
Sass
CSS
Android
Teal 900
#026661
JS
Sass
CSS
Android
Teal 1000
#083f3f
JS
Sass
CSS
Android
Teal 1100
#002528
JS
Sass
CSS
Android
pink
Pink 0
#ffe9f3
JS
Sass
CSS
Android
Pink 100
#fcdbeb
JS
Sass
CSS
Android
Pink 200
#ffb5d5
JS
Sass
CSS
Android
Pink 300
#ff95c1
JS
Sass
CSS
Android
Pink 400
#ff76ae
JS
Sass
CSS
Android
Pink 500
#ef588b
JS
Sass
CSS
Android
Pink 600
#e0447c
JS
Sass
CSS
Android
Pink 700
#ce3665
JS
Sass
CSS
Android
Pink 800
#b22f5b
JS
Sass
CSS
Android
Pink 900
#931847
JS
Sass
CSS
Android
Pink 1000
#561231
JS
Sass
CSS
Android
Pink 1100
#2b1721
JS
Sass
CSS
Android
red
Red 0
#ffeae9
JS
Sass
CSS
Android
Red 100
#ffd5d2
JS
Sass
CSS
Android
Red 200
#ffb8b1
JS
Sass
CSS
Android
Red 300
#ff9c8f
JS
Sass
CSS
Android
Red 400
#ff7f6e
JS
Sass
CSS
Android
Red 500
#f76054
JS
Sass
CSS
Android
Red 600
#ed4c42
JS
Sass
CSS
Android
Red 700
#db3e3e
JS
Sass
CSS
Android
Red 800
#c63434
JS
Sass
CSS
Android
Red 900
#992222
JS
Sass
CSS
Android
Red 1000
#6d1313
JS
Sass
CSS
Android
Red 1100
#2b1111
JS
Sass
CSS
Android
orange
Orange 0
#ffede3
JS
Sass
CSS
Android
Orange 100
#fcdccc
JS
Sass
CSS
Android
Orange 200
#ffc6a4
JS
Sass
CSS
Android
Orange 300
#ffb180
JS
Sass
CSS
Android
Orange 400
#ff9c5d
JS
Sass
CSS
Android
Orange 500
#fc8943
JS
Sass
CSS
Android
Orange 600
#f57d33
JS
Sass
CSS
Android
Orange 700
#ed7024
JS
Sass
CSS
Android
Orange 800
#ce5511
JS
Sass
CSS
Android
Orange 900
#962c0b
JS
Sass
CSS
Android
Orange 1000
#601700
JS
Sass
CSS
Android
Orange 1100
#2d130e
JS
Sass
CSS
Android
yellow
Yellow 0
#fff8e2
JS
Sass
CSS
Android
Yellow 100
#fdefcd
JS
Sass
CSS
Android
Yellow 200
#ffe99a
JS
Sass
CSS
Android
Yellow 300
#ffe16e
JS
Sass
CSS
Android
Yellow 400
#ffd943
JS
Sass
CSS
Android
Yellow 500
#ffcd1c
JS
Sass
CSS
Android
Yellow 600
#ffbc00
JS
Sass
CSS
Android
Yellow 700
#dd9903
JS
Sass
CSS
Android
Yellow 800
#ba7506
JS
Sass
CSS
Android
Yellow 900
#944c0c
JS
Sass
CSS
Android
Yellow 1000
#542a00
JS
Sass
CSS
Android
Yellow 1100
#2d1a05
JS
Sass
CSS
Android
magenta
Magenta 0
#fef0ff
JS
Sass
CSS
Android
Magenta 100
#f9e3fc
JS
Sass
CSS
Android
Magenta 200
#f4c4f7
JS
Sass
CSS
Android
Magenta 300
#edadf2
JS
Sass
CSS
Android
Magenta 350
#EC9AF1
JS
Sass
CSS
Android
Magenta 400
#f282f5
JS
Sass
CSS
Android
Magenta 500
#db61db
JS
Sass
CSS
Android
Magenta 600
#c44eb9
JS
Sass
CSS
Android
Magenta 700
#ac44a8
JS
Sass
CSS
Android
Magenta 800
#8f3896
JS
Sass
CSS
Android
Magenta 900
#6c2277
JS
Sass
CSS
Android
Magenta 1000
#451551
JS
Sass
CSS
Android
Magenta 1100
#29192d
JS
Sass
CSS
Android
network
twitter
#000000
JS
Sass
CSS
Android
twitter like
#e0245e
JS
Sass
CSS
Android
x
#000000
JS
Sass
CSS
Android
x like
#e0245e
JS
Sass
CSS
Android
facebook
#1877F2
JS
Sass
CSS
Android
facebook audience network
#58409B
JS
Sass
CSS
Android
paypal gold
#FFD140
JS
Sass
CSS
Android
linkedin
#0A66C2
JS
Sass
CSS
Android
instagram
#e4405f
JS
Sass
CSS
Android
feedly
#2bb24c
JS
Sass
CSS
Android
analytics
#ef6c00
JS
Sass
CSS
Android
youtube
#ff0000
JS
Sass
CSS
Android
messenger
#000000
JS
Sass
CSS
Android
snapchat
#fffc00
JS
Sass
CSS
Android
pinterest
#E60023
JS
Sass
CSS
Android
reddit
#ff4500
JS
Sass
CSS
Android
tumblr
#35465c
JS
Sass
CSS
Android
google my business
#4285F4
JS
Sass
CSS
Android
tripadvisor
#00B087
JS
Sass
CSS
Android
glassdoor
#0CAA41
JS
Sass
CSS
Android
apple app store
#17C8F5
JS
Sass
CSS
Android
google play store
#01875F
JS
Sass
CSS
Android
google business messages
#1A73EA
JS
Sass
CSS
Android
salesforce
#1589EE
JS
Sass
CSS
Android
zendesk
#03363D
JS
Sass
CSS
Android
hubspot
#FF7A59
JS
Sass
CSS
Android
microsoft dynamics
#002050
JS
Sass
CSS
Android
shopify
#96bf48
JS
Sass
CSS
Android
yelp
#FF1A1A
JS
Sass
CSS
Android
whatsapp
#59CE72
JS
Sass
CSS
Android
tiktok
#000000
JS
Sass
CSS
Android
threads
#000000
JS
Sass
CSS
Android
trustpilot
#04DA8D
JS
Sass
CSS
Android
trustpilot 0 star
#DCDCE6
JS
Sass
CSS
Android
trustpilot 1 star
#FF3722
JS
Sass
CSS
Android
trustpilot 2 star
#FF8622
JS
Sass
CSS
Android
trustpilot 3 star
#FFCE00
JS
Sass
CSS
Android
trustpilot 4 star
#73CF11
JS
Sass
CSS
Android
trustpilot 5 star
#00B67A
JS
Sass
CSS
Android

Usage

do
Only use network colors to represent a network’s brand (such as the color of their logo)
do
Only use the solid hues provided in the color palette
don't
Use network colors for any actions (such as a button)
don't
Use network colors in data visualization
don't
Use opacity to create tints and shades of a hue

Using Color in code

Design token documentation