Visual

Color

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

Brand colors

RGB: 12, 167, 80
CMYK: 93, 0, 52, 35
Green 700
Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
RGB: 7, 151, 174
CMYK: 96, 13, 0, 32
Aqua 600
Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.
RGB: 0, 40, 56
CMYK: 100, 29, 0, 78
Aqua 1100
Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.
RGB: 111, 94, 211
CMYK: 47, 55, 0, 17
Purple 700
Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.

Product colors

Actions

Primary CTA
Blue 700
Secondary CTA
Neutral 800
Link
Blue 700
Warning
yellow 600
Destructive
Red 800

Type

Headlines
Neutral 900
Body copy
Neutral 800
Subtexts
Neutral 700

Common UI

Border
Neutral 200
App background
Neutral 100
Container
Neutral 0

Color finder

Enter a hex color value to find the most similar Seeds color token.

Enter a color

Full color palette

Green

Green 0
Green 100
Green 200
Green 300
Green 400
Green 500
Green 600
Green 700
Green 800
Green 900
Green 1000
Green 1100
Green 600
Hex
#2bb656
Sass
$Color-green--600
JavaScript
COLOR_GREEN_600
CSS
--color-green--600
Android
green_600

Blue

Blue 0
Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900
Blue 1000
Blue 1100
Blue 600
Hex
#2b87d3
Sass
$Color-blue--600
JavaScript
COLOR_BLUE_600
CSS
--color-blue--600
Android
blue_600

Aqua

Aqua 0
Aqua 100
Aqua 200
Aqua 300
Aqua 400
Aqua 500
Aqua 600
Aqua 700
Aqua 800
Aqua 900
Aqua 1000
Aqua 1100
Aqua 600
Hex
#0797ae
Sass
$Color-aqua--600
JavaScript
COLOR_AQUA_600
CSS
--color-aqua--600
Android
aqua_600

Purple

Purple 0
Purple 100
Purple 200
Purple 300
Purple 400
Purple 500
Purple 600
Purple 700
Purple 800
Purple 900
Purple 1000
Purple 1100
Purple 600
Hex
#816fea
Sass
$Color-purple--600
JavaScript
COLOR_PURPLE_600
CSS
--color-purple--600
Android
purple_600

Neutral

Neutral 0
Neutral 100
Neutral 200
Neutral 300
Neutral 400
Neutral 500
Neutral 600
Neutral 700
Neutral 800
Neutral 900
Neutral 1000
Neutral 500
Hex
#929a9b
Sass
$Color-neutral--500
JavaScript
COLOR_NEUTRAL_500
CSS
--color-neutral--500
Android
neutral_500

Teal

Teal 0
Teal 100
Teal 200
Teal 300
Teal 400
Teal 500
Teal 600
Teal 700
Teal 800
Teal 900
Teal 1000
Teal 1100
Teal 600
Hex
#00a99c
Sass
$Color-teal--600
JavaScript
COLOR_TEAL_600
CSS
--color-teal--600
Android
teal_600

Pink

Pink 0
Pink 100
Pink 200
Pink 300
Pink 400
Pink 500
Pink 600
Pink 700
Pink 800
Pink 900
Pink 1000
Pink 1100
Pink 600
Hex
#e0447c
Sass
$Color-pink--600
JavaScript
COLOR_PINK_600
CSS
--color-pink--600
Android
pink_600

Red

Red 0
Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900
Red 1000
Red 1100
Red 600
Hex
#ed4c42
Sass
$Color-red--600
JavaScript
COLOR_RED_600
CSS
--color-red--600
Android
red_600

Orange

Orange 0
Orange 100
Orange 200
Orange 300
Orange 400
Orange 500
Orange 600
Orange 700
Orange 800
Orange 900
Orange 1000
Orange 1100
Orange 600
Hex
#f57d33
Sass
$Color-orange--600
JavaScript
COLOR_ORANGE_600
CSS
--color-orange--600
Android
orange_600

Yellow

Yellow 0
Yellow 100
Yellow 200
Yellow 300
Yellow 400
Yellow 500
Yellow 600
Yellow 700
Yellow 800
Yellow 900
Yellow 1000
Yellow 1100
Yellow 600
Hex
#ffbc00
Sass
$Color-yellow--600
JavaScript
COLOR_YELLOW_600
CSS
--color-yellow--600
Android
yellow_600

Magenta

Magenta 0
Magenta 100
Magenta 200
Magenta 300
Magenta 400
Magenta 500
Magenta 600
Magenta 700
Magenta 800
Magenta 900
Magenta 1000
Magenta 1100
Magenta 600
Hex
#c44eb9
Sass
$Color-magenta--600
JavaScript
COLOR_MAGENTA_600
CSS
--color-magenta--600
Android
magenta_600

Network colors

Twitter
Twitter Like
Facebook
Facebook Audience Network
Linkedin
Instagram
Feedly
Analytics
Youtube
Messenger
Snapchat
Pinterest
Reddit
Tumblr
Google My Business
Tripadvisor
Other youtube
Hex
#ff0000
Sass
$NetworkColor-youtube
JavaScript
NETWORK_COLOR_YOUTUBE
CSS
--networkcolor-youtube
Android
youtube

Usage

Do
Only use network colors to represent a network’s brand (such as the color of their logo)
Do
Only use solid hues in the color palette
Don't
Don’t use network colors for any actions (such as a button)
Don't
Don’t use network colors in data visualization
Don't
Don’t use opacity or gradients.

Using Color in code

Design token documentation