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 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
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
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
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
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
#0077b5
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
#bd081c
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

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