Core

Color

We use a flexible color palette that places emphasis on important elements.

Primary colorsCopy URL

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.

  • Hex: #0CA750
  • RGB: 12, 167, 80
  • CMYK: 93, 0, 52, 35
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.

  • Hex: #0797AE
  • RGB: 7, 151, 174
  • CMYK: 96, 13, 0, 32
Aqua 1100

Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.

  • Hex: #002838
  • RGB: 0, 40, 56
  • CMYK: 100, 29, 0, 78
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.

  • Hex: #6F5ED3
  • RGB: 111, 94, 211
  • CMYK: 47, 55, 0, 17

Color finderCopy URL

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

Enter a color

Color palettesCopy URL

GreenCopy URL

green 700
green 600
green 500
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 700
Hex
#0ca750
Sass
$Color-green--700
JavaScript
COLOR_GREEN_700
CSS
--color-green--700
Android
green_700

AquaCopy URL

aqua 600
aqua 1100
aqua 500
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

PurpleCopy URL

purple 700
purple 600
purple 500
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 700
Hex
#6f5ed3
Sass
$Color-purple--700
JavaScript
COLOR_PURPLE_700
CSS
--color-purple--700
Android
purple_700

NeutralCopy URL

neutral 600
neutral 700
neutral 500
Neutral 0
Neutral 100
Neutral 200
Neutral 300
Neutral 400
Neutral 500
Neutral 600
Neutral 700
Neutral 800
Neutral 900
Neutral 1000
Neutral 600
Hex
#6e797a
Sass
$Color-neutral--600
JavaScript
COLOR_NEUTRAL_600
CSS
--color-neutral--600
Android
neutral_600

TealCopy URL

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 0
Hex
#e5f9f5
Sass
$Color-teal--0
JavaScript
COLOR_TEAL_0
CSS
--color-teal--0
Android
teal_0

BlueCopy URL

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 0
Hex
#e9f8ff
Sass
$Color-blue--0
JavaScript
COLOR_BLUE_0
CSS
--color-blue--0
Android
blue_0

PinkCopy URL

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 0
Hex
#ffe9f3
Sass
$Color-pink--0
JavaScript
COLOR_PINK_0
CSS
--color-pink--0
Android
pink_0

RedCopy URL

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 0
Hex
#ffeae9
Sass
$Color-red--0
JavaScript
COLOR_RED_0
CSS
--color-red--0
Android
red_0

OrangeCopy URL

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 0
Hex
#ffede3
Sass
$Color-orange--0
JavaScript
COLOR_ORANGE_0
CSS
--color-orange--0
Android
orange_0

YellowCopy URL

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 0
Hex
#fff8e2
Sass
$Color-yellow--0
JavaScript
COLOR_YELLOW_0
CSS
--color-yellow--0
Android
yellow_0

MagentaCopy URL

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 0
Hex
#fef0ff
Sass
$Color-magenta--0
JavaScript
COLOR_MAGENTA_0
CSS
--color-magenta--0
Android
magenta_0

BambuCopy URL

Bambu Teal 400
Bambu Teal 500
Bambu Teal 600
Bambu Teal 700
Bambu Yellow 500
Bambu Yellow 600
BambuTeal 400
Hex
#11a7aa
Sass
$Color-bambuTeal--400
JavaScript
COLOR_BAMBU_TEAL_400
CSS
--color-bambuTeal--400
Android
bambu_teal_400

Network colorsCopy URL

Twitter
Twitter Like
Facebook
Facebook Audience Network
Linkedin
Google Plus
Instagram
Feedly
Analytics
Youtube
Messenger
Snapchat
Pinterest
Reddit
Tumblr
Twitter twitter
Hex
#1da1f2
Sass
$NetworkColor-twitter
JavaScript
NETWORK_COLOR_TWITTER
CSS
--network color-twitter
Android
twitter

UsageCopy URL

  • 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 codeCopy URL

Design token documentation