Visual

Color

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

Color system

Foundational Palette

Our name, Sprout, evokes strong imagery of growth in nature which is visually embodied within the confidence and relatability of our foundational and secondary colors. Spruce and Midnight, used primarily for CTAs and type, are identifiable attributes of the brand that recall and pay tribute to Sprout’s legacy.

Onyx and Snowcap provide intentional simplicity and accessibility throughout communications. These colors should be used for backgrounds, type and as accents.

  • Spruce

  • teal.900
  • Hex: #026661
  • RGB: 2, 102, 97
  • CMYK: 98%, 0%, 5%, 60%
  • Midnight

  • blue.1000
  • Hex: #0A2960
  • RGB: 10, 41, 96
  • CMYK: 90%, 57%, 0%, 62%
  • Onyx

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

  • neutral.0
  • Hex: #FFFFFF
  • RGB: 255, 255, 255
  • CMYK: 0%, 0%, 0%, 0%

Secondary Palette

Jewel Tones

Historically a symbol of wealth and power, jewel tones, when incorporated into designs provide a sense of distinction and mastery.

This palette, evocative of and distilled from nature, is high in color saturation making each value dynamic and eye-catching.

  • Emerald

  • green.900
  • Hex: #006b40
  • RGB: 0, 107, 64
  • CMYK: 100%, 0%, 40%, 58%
  • Jade

  • teal.1000
  • Hex: #083f3f
  • RGB: 8, 63, 63
  • CMYK: 87%, 0%, 0%, 75%
  • Sapphire

  • blue.900
  • Hex: #0C3F89
  • RGB: 12, 63, 137
  • CMYK: 91%, 54%, 0%, 46%
  • Tourmaline

  • neutral.0
  • Hex: #6c2277
  • RGB: 108, 34, 119
  • CMYK: 9%, 71%, 0%, 53%
  • Almadine

  • pink.900
  • Hex: #931847
  • RGB: 147, 24, 71
  • CMYK: 0%, 84%, 52%, 42%
  • Citrine

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

Accent Mid-Tones

Strong, bright colors can have a powerful and unexpected effect on emotions. These energizing values grab your attention and stand out in their surroundings.

  • 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%
  • Cobalt

  • blue.700
  • Hex: #205BC3
  • RGB: 32, 91, 195
  • CMYK: 84%, 53%, 0%, 24%
  • Orchid

  • magenta.700
  • Hex: #ac44a8
  • RGB: 172, 68, 168
  • CMYK: 0%, 60%, 2%, 33%
  • Rose

  • pink.700
  • Hex: #ce3665
  • RGB: 206, 54, 101
  • CMYK: 0%, 74%, 51%, 19%
  • Marigold

  • yellow.600
  • Hex: #ffbc00
  • RGB: 255, 188, 0
  • CMYK: 0%, 26%, 100%, 0%

Accent Light-Tones

Optimistic and happy, these relatable values bring harmony to designs when paired with darker and lighter tones. Their lively and upbeat presence embodies positivity and pride.

  • Fern

  • green.300
  • Hex: #98e58e
  • RGB: 152, 229, 142
  • CMYK: 34%, 0%, 38%, 10%
  • Glacier

  • teal.300
  • Hex: #7dead5
  • RGB: 125, 234, 213
  • CMYK: 47%, 0%, 9%, 8%
  • Cornflower

  • blue.300
  • Hex: #A1C2F8
  • RGB: 161, 194, 248
  • CMYK: 35%, 22%, 0%, 3%
  • Violet

  • magenta.350
  • Hex: #EC9AF1
  • RGB: 236, 154, 241
  • CMYK: 2%, 36%, 0%, 5%
  • Salmon

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

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

Muted Tones

A clear and graceful palette, the purity of these values elicits openness and relaxation. Their calming and peaceful demeanor provides intentional balance to deeper jewel tones and vibrant mid-tones.

  • Mint

  • green.0
  • Hex: #ebf9eb
  • RGB: 235, 249, 235
  • CMYK: 6%, 0%, 6%, 2%
  • Mist

  • teal.50
  • Hex: #CCF1EA
  • RGB: 204, 241, 234
  • CMYK: 15%, 0%, 3%, 5%
  • Sky

  • blue.200
  • Hex: #C7DBF9
  • RGB: 12, 125, 191
  • CMYK: 94%, 35%, 0%, 25%
  • Periwinkle

  • teal.50
  • Hex: #d8d7f9
  • RGB: 216, 215, 249
  • CMYK: 13%, 14%, 0%, 2%
  • Apricot

  • orange.100
  • Hex: #fcdccc
  • RGB: 252, 220, 204
  • CMYK: 0%, 13%, 19%, 1%
  • Canary

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

Extended Neutrals

Extended neutrals are reserved for web interface ui: as backgrounds or borders when a secondary color isn’t fitting and as an accessible type color for copy that requires less emphasis. Extended neutrals should be used sparingly.

  • 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%

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

Monochromatic

Monochromatic colorways include tints, shades and tones of a single color. Monochromatic schemes range between lighter and darker values of the base color to create interest and depth. These colorways are classic, elegant, and versatile. They can be used in a variety of designs to create a sense of mastery or to make a design feel relatable.

Monochromatic colorways example

Complementary

Complementary colorways use one primary color and that color’s direct complement from the opposite side of the color wheel. The primary color is dominant in designs while the complement performs as an accent. This relationship displays a high-contrast combination that is unexpected and pops. Complementary schemes are natural, balanced illusions that occur in nature. They add energy and draw attention to moments of emphasis in designs.

Complementary colorways example

Simplified Monochromatic or Complementary

Following the same reasoning and structure of the more complex monochromatic and complementary colorways above, these simplified schemes utilize a consistent color for both the headline and outline.

simplified colorways example

Gradients

Gradients are extremely versatile in designs, they can be bold or subtle, the focal point or a background texture. They provide visual interest and dimension that helps guide viewers through communications.

Gradients create new color combinations that feel unexpected and cutting edge, adding a unique feeling to designs. They provide endless opportunities and are not limited to two colors.

Inspired by regularly occurring analogous color groupings found in nature, these recommended colorways are composed of one dominant color, a supporting color and an accent color. These relatable color schemes have enough visual interest to create contrast while still feeling cohesive and complete. When using analogous colorways for gradient backgrounds, default to a simplified monochromatic treatment for linework and typography.

Gradient colorways example

Gradient swatches

Gradient swatches

Gradients on Neutral Backgrounds

These recommended colorways may also 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.

Example of gradients on neutral backgrounds
Example of gradients on neutral backgrounds

Example Neutral Background Gradient Swatches

Example of neutral background gradients

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

Examples of Sprout’s brand color system in use.

Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use
Example of Sprout's brand color system in use

Enterprise usage

While the entire Sprout color system intentionally caters to a sophisticated audience, the Enterprise palette—distilled from the brand color system—builds a stronger connection with this specific segment of our existing and future customer base. Seen as exclusive and reserved for brands of a certain prestige and status, this “black-label” treatment attracts new customers with intention - further deepening credibility and trust with Enterprise customers. An Enterprise specific palette makes it easier for our audience to quickly find the content and product set that is built specifically for them.

Enterprise Palette

Led by Midnight and Onyx, two colors indicative of sober authority and mastery, the enterprise palette uses an intentionally limited range of blues and teals. Blue is a color often associated with trust and intelligence that has been partnered with teal, a relatable color that promotes clarity, open communication and practical thinking.

  • Midnight

  • blue.1000
  • Hex: #0A2960
  • RGB: 10, 41, 96
  • CMYK: 90%, 57%, 0%, 62%
  • Onyx

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

  • neutral.0
  • Hex: #FFFFFF
  • RGB: 255, 255, 255
  • CMYK: 0%, 0%, 0%, 0%
  • 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: 12, 125, 191
  • CMYK: 94%, 35%, 0%, 25%
  • Jade

  • teal.1000
  • Hex: #083f3f
  • RGB: 8, 63, 63
  • CMYK: 87%, 0%, 0%, 75%
  • 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.50
  • Hex: #CCF1EA
  • RGB: 204, 241, 234
  • CMYK: 15%, 0%, 3%, 5%

These are some examples that show the Enterprise palette in use.

Example of Sprout's enterprise pallete in use
Example of Sprout's brand color system in use
Example of Sprout's enterprise pallete in use
Example of Sprout's enterprise pallete in use
Example of Sprout's enterprise pallete in use
Example of Sprout's enterprise pallete in use

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 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 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
#1da1f2
JS
Sass
CSS
Android
twitter like
#e0245e
JS
Sass
CSS
Android
facebook
#217bee
JS
Sass
CSS
Android
facebook audience network
#58409B
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
#0084ff
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
#25D366
JS
Sass
CSS
Android
tiktok
#000000
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