视觉

颜色

爱游戏体育官网首页Sprout使用灵活的调色板来实现干净的界面和迷人的品牌体验。

品牌配色">

爱游戏体育官网首页斯普劳特的品牌配色由我们的核心的颜色原色额外的色调和阴影,加上紫色色调。设计应该从核心和主要调色板开始,并利用额外的颜色作为强调来创造强调,多样性,深度和对比。

品牌调色板应用于所有的品牌设计工作,包括营销活动、网站设计、横幅广告、活动标识系统和插图。

在需要额外颜色的特殊用例中,属性中的值全色调色板可能会用到。全调色板使用的例子包括按钮悬停状态,内部程序/设计系统(即值,BRG标志),产品照片和数据可视化。爱游戏全站下载

在这里下载.ase文件

绿色
绿色300
# 98 e58e
JS
萨斯
CSS
安卓
绿色500
# 59 cb59
JS
萨斯
CSS
安卓
绿色700
# 0 ca750
JS
萨斯
CSS
安卓
绿色800
# 008 b46
JS
萨斯
CSS
安卓
绿色900
# 006 3
JS
萨斯
CSS
安卓
蓝色的
蓝色300
# a1d2f8
JS
萨斯
CSS
安卓
蓝色500
# 3896 e3
JS
萨斯
CSS
安卓
蓝色700
# 2079 c3
JS
萨斯
CSS
安卓
蓝色900
# 0 c5689
JS
萨斯
CSS
安卓
蓝色1100
# 002138
JS
萨斯
CSS
安卓
蒂尔
蒂尔300
# 7 dead5
JS
萨斯
CSS
安卓
蒂尔500
# 08年c4b2
JS
萨斯
CSS
安卓
蒂尔700
# 0 b968f
JS
萨斯
CSS
安卓
蒂尔900
# 026661
JS
萨斯
CSS
安卓
紫色的
紫色的300
# c1c1f7
JS
萨斯
CSS
安卓
紫色的500
# 9180 f4
JS
萨斯
CSS
安卓
紫色的700
# 6 f5ed3
JS
萨斯
CSS
安卓
紫色的900
# 483 a9c
JS
萨斯
CSS
安卓
黄色的
黄300年
# ffe16e
JS
萨斯
CSS
安卓
黄500年
# ffcd1c
JS
萨斯
CSS
安卓
红色的
400年红
# ff7f6e
JS
萨斯
CSS
安卓
700年红
# db3e3e
JS
萨斯
CSS
安卓
粉红色的
粉色300
# ff95c1
JS
萨斯
CSS
安卓
粉色500
# ef588b
JS
萨斯
CSS
安卓
粉色800
# b22f5b
JS
萨斯
CSS
安卓

核心的颜色">

我们的名字,Spro爱游戏体育官网首页ut,唤起了强烈的自然生长的意象。我们的绿色,是品牌的一个可识别属性,是这一进步的视觉表达。

此外还有嫩绿爱游戏体育官网首页,我们的核心颜色包括白色和海军.它们应该用于平衡、对比和衔接。

绿色700是我们品牌识别的核心。绿色700用于主要操作和按钮、链接,用于指示进度和表示身份验证。
白色应该在需要时使用,以便在整个通信过程中提供可访问性和简洁性。使用白色作为背景,字体和强调。
蓝色1100是一种基本色,可以被视为中性色。使用蓝色1100作为背景,装饰类型和作为强调。

核心色的使用">

使用核心颜色作为每个项目的基础。应该在与雇主品牌体验相关的创意中占据主导地位,如招聘,入职,爱游戏体育官网首页发芽值来见见斯普劳特队。爱游戏体育官网首页

目标是通过颜色填充、行动呼吁或叶子标志,在构图中包括芽绿(爱游戏体育官网首页green 700)的存在。
考虑图像出现的环境。绿色700可能已经出现在网站标题的标志或社交平台上的个人资料图像中。

原色">

大胆而精致,我们的原色应该与核心色相结合,散发出自信、活力和立体感。该家族由一系列类似的颜色领导,提高和补充萌芽绿色爱游戏体育官网首页.这些颜色 可以用于大的填充和背景。

色调中一系列温暖、诱人的口音增添了人文精神,鼓励平易近人。这些颜色 应该有选择地使用,以增加成分的能量多样性。

蓝绿色900是绿色700的有力补充。当你想要大量的绿色,但绿色700感觉太有活力时,可以使用它。
蓝绿色500是一个主要的颜色,可用于背景和大填充。它与蓝绿色900和蓝色1100保持良好的对比。
蓝色700是一个主要的颜色,可以用于背景和大填充。蓝色700与暖色调搭配很好。
黄色500是一种诱人的原色,能增添活力。黄色500与蓝色1100的搭配形成了鲜明的对比。
粉色300是一个自信的原色,为冷色增添了平衡。粉色300双,蓝绿色900双,红色700双。
红400是一种平易近人的原色,具有欢迎的魅力。谨慎使用Red 400。
红700是一种大胆的原色,具有强大的存在感。谨慎使用红色700。

原色使用">

在配色时,尽量保持冷色和暖色的2:1的平衡,冷色的存在感更强。每篇文章只使用一到两种暖色。合并而且为了平衡和对比。

遵循无障碍标准,在颜色之间放置颜色时保持适当的对比度。
在颜色上放置颜色时,允许颜色振动。

品牌调色板示例">

2020年指数活动的设计截图
2020指数活动
2020年斯普劳特峰会的设计截图爱游戏体育官网首页
爱游戏体育官网首页Sprout峰会2020活动设计
社会年活动的设计截图
社会年活动
insight art的设计截图
艺术的见解

人文主义的调色板">

除了品牌调色板,我们还使用专业的人文调色板进行插图。我们的品牌调色板传达了我们大胆的愿景,但特别是在我们的人文调色板中,它也传达了我们的真实性。

在这些颜色中,你会发现我们致力于展示不同肤色、头发、嘴唇和眼睛颜色的不同人群。这些颜色融合了更自然的肤色的真实性和我们品牌颜色的大胆。

基地
基地R100中
# F5D7CD
JS
基地日圆
# F2CDAE
JS
基地R300
# F2BD9E
JS
基地P300
# EAADA4
JS
基地P500
# CE979A
JS
基地R500
# CF897C
JS
基地B500
# B58A7C
JS
基地Y500
# 8 d6a56
JS
基地B700
# 725 e5f
JS
基本每
# 784 f44
JS
口音
口音Y300
# F5D58F
JS
口音R700系列
# B7574B
JS
口音B900
# 484 d5c
JS
口音P900
# 604856
JS

人性化的调色板使用">

目前,人性化调色板的用例主要在写意插画风格.也就是说,在任何情况下,我们代表人类的形式-无论是整个人或只是一个手使用人文调色板应该被强烈考虑。

作为一般规则,插图或图形元素中人体形态的代表性越强,使用人文调色板就越合适。插图或图形元素中的人体形态越简化、几何或抽象,就越适合简单地使用品牌调色板中的颜色。

字符显示在各种不同的颜色组合
例如皮肤、头发、嘴唇和衣服的颜色组合
一群人一起购物
零售行业页面用新系统重新上色
大学生们在大学校园的教学楼前闲逛
高等教育行业页面与新系统重新着色

使用的具体提示">

皮肤的颜色">

从人性化的基础色调中挑选。确保在使用特定的基本色时,你知道潜在的色调(y黄,r红,p粉或b蓝),并将其与服装,头发和其他相关的颜色相协调。例如,一个肤色带有黄色底色的人穿黄色衬衫可能就不好看了。

头发的颜色">

头发的颜色可以从基础色、强调色或标准品牌调色板中提取。关键是要确保头发的颜色在视觉上与皮肤颜色有足够的区别,以减少颜色的波动。如果有一个有很多人的场景,一定要有选择性地使用不同的发色,因为这可能会破坏配色方案的凝聚力。尝试使用一些现有的品牌颜色作为发色,以减少一次性发色的数量。

唇色">

由于唇色的影响非常大,而且在视觉上是颜色使用的一个小得多的实例,所以最容易从品牌和人文色彩中提取并直接使用(涂大红色口红的人可能会使用Accent R300),或者在这个人的肤色上覆盖现有的品牌调色板颜色。

不同唇色的女人

眼睛的颜色">

眼睛的颜色可以很容易地从品牌调色板中获得更明亮的眼睛颜色(绿色和蓝色眼睛),或从肤色调色板中获得更中性的眼睛颜色(榛色和棕色)。然而,在大多数情况下,由于插图的比例和其中的人,将不会有可见的虹膜和眼睛的颜色可以简单地画作为一个圆。

爱游戏全站下载产品配色">

行动">

主要CTA
二次CTA
链接
警告
错误

类型">

头条新闻
广告正文
潜台词

常见的UI">

边境
应用背景
容器

色仪">

输入十六进制颜色值以查找最接近的种子颜色令牌匹配。

预览

全色调色板">

绿色
绿色0
# ebf9eb
JS
萨斯
CSS
安卓
绿色100
# d7f4d7
JS
萨斯
CSS
安卓
绿色200
# c2f2bd
JS
萨斯
CSS
安卓
绿色300
# 98 e58e
JS
萨斯
CSS
安卓
绿色400
# 75 dd66
JS
萨斯
CSS
安卓
绿色500
# 59 cb59
JS
萨斯
CSS
安卓
绿色600
# 2 bb656
JS
萨斯
CSS
安卓
绿色700
# 0 ca750
JS
萨斯
CSS
安卓
绿色800
# 008 b46
JS
萨斯
CSS
安卓
绿色900
# 006 3
JS
萨斯
CSS
安卓
绿色1000
# 08422 f
JS
萨斯
CSS
安卓
绿色1100
# 002 b20
JS
萨斯
CSS
安卓
蓝色的
蓝色的0
# e9f8ff
JS
萨斯
CSS
安卓
蓝色100
# dcf2ff
JS
萨斯
CSS
安卓
蓝色200
# c7e4f9
JS
萨斯
CSS
安卓
蓝色300
# a1d2f8
JS
萨斯
CSS
安卓
蓝色400
# 56 adf5
JS
萨斯
CSS
安卓
蓝色500
# 3896 e3
JS
萨斯
CSS
安卓
蓝色600
# 2 b87d3
JS
萨斯
CSS
安卓
蓝色700
# 2079 c3
JS
萨斯
CSS
安卓
蓝色800
# 116 daa
JS
萨斯
CSS
安卓
蓝色900
# 0 c5689
JS
萨斯
CSS
安卓
蓝色1000
# 0 a3960
JS
萨斯
CSS
安卓
蓝色1100
# 002138
JS
萨斯
CSS
安卓
阿卡
水0
# d9fcfb
JS
萨斯
CSS
安卓
水100
# c5f9f9
JS
萨斯
CSS
安卓
水200
# a5f2f2
JS
萨斯
CSS
安卓
水300
# 76 e5e2
JS
萨斯
CSS
安卓
水400
# 33 d6e2
JS
萨斯
CSS
安卓
水500
# 17 b8ce
JS
萨斯
CSS
安卓
水600
# 0797 ae
JS
萨斯
CSS
安卓
水700
# 0 b8599
JS
萨斯
CSS
安卓
水800
# 0 f6e84
JS
萨斯
CSS
安卓
水900
# 035药剂
JS
萨斯
CSS
安卓
水1000
# 083 d4f
JS
萨斯
CSS
安卓
水1100
# 002838
JS
萨斯
CSS
安卓
紫色的
紫色的0
# f2f2f9
JS
萨斯
CSS
安卓
紫色的100
# eaeaf9
JS
萨斯
CSS
安卓
紫色的200
# d8d7f9
JS
萨斯
CSS
安卓
紫色的300
# c1c1f7
JS
萨斯
CSS
安卓
紫色的400
# a193f2
JS
萨斯
CSS
安卓
紫色的500
# 9180 f4
JS
萨斯
CSS
安卓
紫色的600
# 816有限元分析
JS
萨斯
CSS
安卓
紫色的700
# 6 f5ed3
JS
萨斯
CSS
安卓
紫色的800
# 5 e4eba
JS
萨斯
CSS
安卓
紫色的900
# 483 a9c
JS
萨斯
CSS
安卓
紫色的1000
# 2 d246b
JS
萨斯
CSS
安卓
紫色的1100
# 1 d1d38
JS
萨斯
CSS
安卓
中性
中性0
# FFFFFF
JS
萨斯
CSS
安卓
中性的100
# f3f4f4
JS
萨斯
CSS
安卓
中性的200
# dee1e1
JS
萨斯
CSS
安卓
中性的300
# c8cccc
JS
萨斯
CSS
安卓
中性的400
# b0b6b7
JS
萨斯
CSS
安卓
中性的500
# 929 a9b
JS
萨斯
CSS
安卓
中性的600
# 6 e797a
JS
萨斯
CSS
安卓
中性的700
# 515 e5f
JS
萨斯
CSS
安卓
中性的800
# 364141
JS
萨斯
CSS
安卓
中性的900
# 273333
JS
萨斯
CSS
安卓
中性的1000
# 162020
JS
萨斯
CSS
安卓
中性的1100
# 040404
JS
萨斯
CSS
安卓
蒂尔
蒂尔0
# e5f9f5
JS
萨斯
CSS
安卓
蒂尔100
# cdf7ef
JS
萨斯
CSS
安卓
蒂尔200
# b3f2e6
JS
萨斯
CSS
安卓
蒂尔300
# 7 dead5
JS
萨斯
CSS
安卓
蒂尔400
# 24 e0c5
JS
萨斯
CSS
安卓
蒂尔500
# 08年c4b2
JS
萨斯
CSS
安卓
蒂尔600
# 00 a99c
JS
萨斯
CSS
安卓
蒂尔700
# 0 b968f
JS
萨斯
CSS
安卓
蒂尔800
# 067 c7c
JS
萨斯
CSS
安卓
蒂尔900
# 026661
JS
萨斯
CSS
安卓
蒂尔1000
# 083 f3f
JS
萨斯
CSS
安卓
蒂尔1100
# 002528
JS
萨斯
CSS
安卓
粉红色的
粉红色的0
# ffe9f3
JS
萨斯
CSS
安卓
粉色100
# fcdbeb
JS
萨斯
CSS
安卓
粉色200
# ffb5d5
JS
萨斯
CSS
安卓
粉色300
# ff95c1
JS
萨斯
CSS
安卓
粉色400
# ff76ae
JS
萨斯
CSS
安卓
粉色500
# ef588b
JS
萨斯
CSS
安卓
粉色600
# e0447c
JS
萨斯
CSS
安卓
粉色700
# ce3665
JS
萨斯
CSS
安卓
粉色800
# b22f5b
JS
萨斯
CSS
安卓
粉色900
# 931847
JS
萨斯
CSS
安卓
粉色1000
# 561231
JS
萨斯
CSS
安卓
粉色1100
# 2 b1721
JS
萨斯
CSS
安卓
红色的
红0
# ffeae9
JS
萨斯
CSS
安卓
100年红
# ffd5d2
JS
萨斯
CSS
安卓
200年红
# ffb8b1
JS
萨斯
CSS
安卓
300年红
# ff9c8f
JS
萨斯
CSS
安卓
400年红
# ff7f6e
JS
萨斯
CSS
安卓
500年红
# f76054
JS
萨斯
CSS
安卓
600年红
# ed4c42
JS
萨斯
CSS
安卓
700年红
# db3e3e
JS
萨斯
CSS
安卓
800年红
# c63434
JS
萨斯
CSS
安卓
900年红
# 992222
JS
萨斯
CSS
安卓
1000年红
# 6 d1313
JS
萨斯
CSS
安卓
1100年红
# 2 b1111
JS
萨斯
CSS
安卓
橙色
橙色0
# ffede3
JS
萨斯
CSS
安卓
橙色100
# fcdccc
JS
萨斯
CSS
安卓
橙色200
# ffc6a4
JS
萨斯
CSS
安卓
橙色300
# ffb180
JS
萨斯
CSS
安卓
橙色400
# ff9c5d
JS
萨斯
CSS
安卓
橙色500
# fc8943
JS
萨斯
CSS
安卓
橙色600
# f57d33
JS
萨斯
CSS
安卓
橙色700
# ed7024
JS
萨斯
CSS
安卓
橙色800
# ce5511
JS
萨斯
CSS
安卓
橙色900
# 962 c0b
JS
萨斯
CSS
安卓
橙色1000
# 601700
JS
萨斯
CSS
安卓
橙色1100
# 2 d130e
JS
萨斯
CSS
安卓
黄色的
黄色的0
# fff8e2
JS
萨斯
CSS
安卓
黄100年
# fdefcd
JS
萨斯
CSS
安卓
黄200年
# ffe99a
JS
萨斯
CSS
安卓
黄300年
# ffe16e
JS
萨斯
CSS
安卓
黄400年
# ffd943
JS
萨斯
CSS
安卓
黄500年
# ffcd1c
JS
萨斯
CSS
安卓
黄600年
# ffbc00
JS
萨斯
CSS
安卓
黄700年
# dd9903
JS
萨斯
CSS
安卓
黄800年
# ba7506
JS
萨斯
CSS
安卓
黄900年
# 944 c0c
JS
萨斯
CSS
安卓
黄1000年
# 542 a00
JS
萨斯
CSS
安卓
黄1100年
# 2 d1a05
JS
萨斯
CSS
安卓
品红色的
洋红色的0
# fef0ff
JS
萨斯
CSS
安卓
红色100
# f9e3fc
JS
萨斯
CSS
安卓
红色200
# f4c4f7
JS
萨斯
CSS
安卓
红色300
# edadf2
JS
萨斯
CSS
安卓
红色400
# f282f5
JS
萨斯
CSS
安卓
红色500
# db61db
JS
萨斯
CSS
安卓
红色600
# c44eb9
JS
萨斯
CSS
安卓
红色700
# ac44a8
JS
萨斯
CSS
安卓
红色800
# 8 f3896
JS
萨斯
CSS
安卓
红色900
# 6 c2277
JS
萨斯
CSS
安卓
红色1000
# 451551
JS
萨斯
CSS
安卓
红色1100
# 29192 d
JS
萨斯
CSS
安卓
网络
推特
# 1 da1f2
JS
萨斯
CSS
安卓
推特像
# e0245e
JS
萨斯
CSS
安卓
脸谱网
# 217只蜜蜂
JS
萨斯
CSS
安卓
Facebook用户网络
# 58409 b
JS
萨斯
CSS
安卓
linkedin
# 0 a66c2
JS
萨斯
CSS
安卓
instagram
# e4405f
JS
萨斯
CSS
安卓
feedly
# 2 bb24c
JS
萨斯
CSS
安卓
分析
# ef6c00
JS
萨斯
CSS
安卓
youtube
# ff0000
JS
萨斯
CSS
安卓
信使
# 0084 ff
JS
萨斯
CSS
安卓
snapchat
# fffc00
JS
萨斯
CSS
安卓
pinterest
# E60023
JS
萨斯
CSS
安卓
reddit
# ff4500
JS
萨斯
CSS
安卓
tumblr
# 35465 c
JS
萨斯
CSS
安卓
我的事
# 4285 f4
JS
萨斯
CSS
安卓
tripadvisor
# 00 b087
JS
萨斯
CSS
安卓
glassdoor网站
# 0 caa41
JS
萨斯
CSS
安卓
苹果应用商店
# 17 c8f5
JS
萨斯
CSS
安卓
谷歌播放商店
# 01875 f
JS
萨斯
CSS
安卓
谷歌业务消息
# 1 a73ea
JS
萨斯
CSS
安卓
salesforce
# 1589 ee
JS
萨斯
CSS
安卓
zendesk
# 03363 d
JS
萨斯
CSS
安卓
hubspot的
# FF7A59
JS
萨斯
CSS
安卓
微软动态
# 002050
JS
萨斯
CSS
安卓
shopify
# 96 bf48
JS
萨斯
CSS
安卓
yelp
# FF1A1A
JS
萨斯
CSS
安卓
whatsapp
# 25 d366
JS
萨斯
CSS
安卓
tiktok
# 000000
JS
萨斯
CSS
安卓

使用">

只使用网络颜色来代表网络的品牌(例如他们的标志的颜色)
只使用调色板中提供的纯色调
为任何动作(如按钮)使用网络颜色
在数据可视化中使用网络颜色
使用不透明度创建色调的色调和阴影

在代码中使用颜色">

设计令牌文档

Baidu
map