Visual

Color

Sprout uses a flexible color palette to achieve clean interfaces and captivating brand experiences.

Brand color palette

Sprout’s Brand color palette is comprised of our Core colors, Primary colors, additional tints and shades, plus purple hues. Designs should begin with the Core and Primary palettes, and utilize additional colors as accents to create emphasis, variety, depth and contrast.

The Brand color palette should be used for all brand design work, including marketing campaigns, website designs, banner ads, event identity systems, and illustration.

In specialty use cases where additional colors are necessary, values from the Full color palette may be used. Examples of Full palette usage include button hover states, internal programs/design systems (I.e values, BRG logos), product shots and data visualization.

Download the .ase file here.

green
Green 300
#98e58e
JS
Sass
CSS
Android
Green 500
#59cb59
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
blue
Blue 300
#a1d2f8
JS
Sass
CSS
Android
Blue 500
#3896e3
JS
Sass
CSS
Android
Blue 700
#2079c3
JS
Sass
CSS
Android
Blue 900
#0c5689
JS
Sass
CSS
Android
Blue 1100
#002138
JS
Sass
CSS
Android
teal
Teal 300
#7dead5
JS
Sass
CSS
Android
Teal 500
#08c4b2
JS
Sass
CSS
Android
Teal 700
#0b968f
JS
Sass
CSS
Android
Teal 900
#026661
JS
Sass
CSS
Android
purple
Purple 300
#c1c1f7
JS
Sass
CSS
Android
Purple 500
#9180f4
JS
Sass
CSS
Android
Purple 700
#6f5ed3
JS
Sass
CSS
Android
Purple 900
#483a9c
JS
Sass
CSS
Android
yellow
Yellow 300
#ffe16e
JS
Sass
CSS
Android
Yellow 500
#ffcd1c
JS
Sass
CSS
Android
red
Red 400
#ff7f6e
JS
Sass
CSS
Android
Red 700
#db3e3e
JS
Sass
CSS
Android
pink
Pink 300
#ff95c1
JS
Sass
CSS
Android
Pink 500
#ef588b
JS
Sass
CSS
Android
Pink 800
#b22f5b
JS
Sass
CSS
Android

Core colors

Our name, Sprout, evokes strong imagery of growth in nature. Our green, an identifiable attribute of the brand, is a visual expression of this progress.

In addition to Sprout green , our Core colors include white and navy . They should be used for balance, contrast and cohesion.

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
White should be used as needed to provide accessibility and simplicity throughout communications. Use white for backgrounds, type and as an accent.
Blue 1100 is a foundational color that can be treated as a neutral. Use Blue 1100 for backgrounds, decorative type and as an accent.

Core color usage

Use the Core colors as a foundation for every project. should have a dominant presence in creative linked to the employer brand experience such as recruiting, onboarding, Sprout Values and Meet Team Sprout.

do
Aim to include a presence of Sprout green (Green 700) in compositions either through a color fill, a call to action or the leaf logo.
don't
Consider the context of where your imagery will appear. Green 700 might already be present in the logo on the website header or the profile image on a social platform.

Primary colors

Bold and sophisticated, our Primary colors should be integrated with the Core colors to exude confidence, energy and dimension. The family is led by a series of analogous colors that elevate and complement Sprout green . These colors can be used for large fills and backgrounds.

The string of warm, inviting accents in the palette add a humanistic spirit that encourages approachability. These colors should be used selectively to add energetic variety to compositions.

Teal 900 is a strong complement to Green 700. It can be used when you want a heavy presence of green but Green 700 feels too vibrant.
Teal 500 is a primary color that can be used for backgrounds and large fills. It maintains contrast and pairs well with Teal 900 and Blue 1100.
Blue 700 is a primary color that can be used for backgrounds and large fills. Blue 700 works well alongside the warm accent colors.
Yellow 500 is an inviting primary color that adds energy. Pairing Yellow 500 with Blue 1100 creates striking contrast.
Pink 300 is a confident primary color that adds balance to the cool colors. Pink 300 pairs well with Teal 900 and Red 700.
Red 400 is an approachable primary color that has a welcoming allure. Use Red 400 sparingly and with intention.
Red 700 is a bold primary color that has a powerful presence. Use Red 700 sparingly and with intention.

Primary color usage

When pairing colors, strive to maintain a 2:1 balance between cool and warm colors with cool colors having the stronger presence. Limit the use of warm colors to one or two per composition. Incorporate and for balance and contrast.

do
Follow accessibility standards and maintain proper contrast when placing color on color.
don't
Allow color to vibrate when placing color on color.

Brand palette examples

screenshots of designs from the 2020 Index campaign
2020 Index campaign
screenshots of designs from the 2020 Sprout Summit event
Sprout Summit 2020 event design
screenshots of designs from the Year in Social campaign
Year in Social campaign
screenshots of designs from Insights art
Insights art

Humanistic palette

In addition to the Brand color palette, we also employ the use of a specialty Humanistic color palette for illustration. Our Brand palette communicates the boldness of our vision, but particularly within our Humanistic color palette it also communicates our authenticity.

Within these colors you will find our commitment to showing a diverse range of people with different skin, hair, lip and eye colors. These colors blend the authenticity of more naturalistic skin tones with the boldness of our Brand colors.

base
Base R100
#F5D7CD
JS
Base Y100
#F2CDAE
JS
Base R300
#F2BD9E
JS
Base P300
#EAADA4
JS
Base P500
#CE979A
JS
Base R500
#CF897C
JS
Base B500
#B58A7C
JS
Base Y500
#8D6A56
JS
Base B700
#725E5F
JS
Base Y700
#784F44
JS
accent
Accent Y300
#F5D58F
JS
Accent R700
#B7574B
JS
Accent B900
#484D5C
JS
Accent P900
#604856
JS

Humanistic color palette usage

Currently, the use case for the Humanistic color palette is primarily within the freehand illustration style. That said, in any situation where we are representing the human form—whether it’s an entire person or just a hand—use of the Humanistic color palette should be strongly considered.

As a general rule, the more representational the human form is in an illustration or graphic element, the more appropriate it is to use the Humanistic color palette. The more simplified, geometric or abstract the human form is in an illustration or graphic element, the more appropriate it would be to simply use colors from the Brand color palette.

character displayed in a variety of different color combinations
Example color combinations of skin, hair, lip and clothes
a group of people shopping together
Retail industry page recolored with new system
college student hanging out in in front of academic buildings at a college campus
Higher Ed industry page recolored with new system

Specific tips on usage

Skin color

Pick from the Humanistic base color palette. Make sure when using a specific base color that you are aware of underlying tone (either Y-yellow, R-red, P-pink or B-blue) and coordinate that with the clothing, hair and other associated colors on the person. A person with a skin tone that has a yellow undertone might not look great wearing a yellow shirt, for example.

Hair color

Hair colors can be pulled from base colors, accent colors, or the standard brand color palette. The key is to make sure that the hair color is visually distinct enough from the skin color to minimize color vibration. If there is a scene with a number of people, make sure to be selective in the amount of different hair colors you use because this could break down the cohesiveness of the color scheme. Try using some of the existing brand colors as hair colors to reduce the number of one-use hair colors.

Lip color

Since lip color can very so greatly and is a much visually smaller instance of color usage, it is easiest to pull from Brand and Humanistic colors and use directly (someone with bright red lipstick might use Accent R300) or overlay an existing Brand palette color on top of the skin tone being used on the person.

woman with different lip colors

Eye color

Eye colors can be sourced easily from the Brand color palette for brighter eye colors (green and blue eyes), or from the skin tones palette for more neutral eye colors (hazels and browns). 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.

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
#e9f8ff
JS
Sass
CSS
Android
Blue 100
#dcf2ff
JS
Sass
CSS
Android
Blue 200
#c7e4f9
JS
Sass
CSS
Android
Blue 300
#a1d2f8
JS
Sass
CSS
Android
Blue 400
#56adf5
JS
Sass
CSS
Android
Blue 500
#3896e3
JS
Sass
CSS
Android
Blue 600
#2b87d3
JS
Sass
CSS
Android
Blue 700
#2079c3
JS
Sass
CSS
Android
Blue 800
#116daa
JS
Sass
CSS
Android
Blue 900
#0c5689
JS
Sass
CSS
Android
Blue 1000
#0a3960
JS
Sass
CSS
Android
Blue 1100
#002138
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
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

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