UI组件
按钮、输入框、徽章等组件展示您的调色板颜色
提示
| 实心 | 柔和 | |
|---|---|---|
主色 | 有可用更新 | 有可用更新 |
辅色 | 有可用更新 | 有可用更新 |
第三色 | 有可用更新 | 有可用更新 |
强调色 | 有可用更新 | 有可用更新 |
表面色 | 有可用更新 | 有可用更新 |
主色#264653
实心
有可用更新
柔和
有可用更新
辅色#2A9D8F
实心
有可用更新
柔和
有可用更新
第三色#E9C46A
实心
有可用更新
柔和
有可用更新
强调色#F4A261
实心
有可用更新
柔和
有可用更新
表面色#E76F51
实心
有可用更新
柔和
有可用更新
标注
| 实心 | 柔和 | 表面 | 轮廓 | |
|---|---|---|---|---|
主色 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 |
辅色 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 |
第三色 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 |
强调色 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 |
表面色 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 | 有反馈？ 我们很想听听您的想法。 |
主色#264653
实心
有反馈？
我们很想听听您的想法。
柔和
有反馈？
我们很想听听您的想法。
表面
有反馈？
我们很想听听您的想法。
轮廓
有反馈？
我们很想听听您的想法。
辅色#2A9D8F
实心
有反馈？
我们很想听听您的想法。
柔和
有反馈？
我们很想听听您的想法。
表面
有反馈？
我们很想听听您的想法。
轮廓
有反馈？
我们很想听听您的想法。
第三色#E9C46A
实心
有反馈？
我们很想听听您的想法。
柔和
有反馈？
我们很想听听您的想法。
表面
有反馈？
我们很想听听您的想法。
轮廓
有反馈？
我们很想听听您的想法。
强调色#F4A261
实心
有反馈？
我们很想听听您的想法。
柔和
有反馈？
我们很想听听您的想法。
表面
有反馈？
我们很想听听您的想法。
轮廓
有反馈？
我们很想听听您的想法。
表面色#E76F51
实心
有反馈？
我们很想听听您的想法。
柔和
有反馈？
我们很想听听您的想法。
表面
有反馈？
我们很想听听您的想法。
轮廓
有反馈？
我们很想听听您的想法。
徽章
| 实心 | 柔和 | 表面 | 轮廓 | |
|---|---|---|---|---|
主色 | 新 | 新 | 新 | 新 |
辅色 | 新 | 新 | 新 | 新 |
第三色 | 新 | 新 | 新 | 新 |
强调色 | 新 | 新 | 新 | 新 |
表面色 | 新 | 新 | 新 | 新 |
主色#264653
实心
新
柔和
新
表面
新
轮廓
新
辅色#2A9D8F
实心
新
柔和
新
表面
新
轮廓
新
第三色#E9C46A
实心
新
柔和
新
表面
新
轮廓
新
强调色#F4A261
实心
新
柔和
新
表面
新
轮廓
新
表面色#E76F51
实心
新
柔和
新
表面
新
轮廓
新
头像
| 实心 | 柔和 | 实心渐变 | 柔和渐变 | |
|---|---|---|---|---|
主色 | E EV | E EV | E EV | E EV |
辅色 | E EV | E EV | E EV | E EV |
第三色 | E EV | E EV | E EV | E EV |
强调色 | E EV | E EV | E EV | E EV |
表面色 | E EV | E EV | E EV | E EV |
主色#264653
实心
E
EV
柔和
E
EV
实心渐变
E
EV
柔和渐变
E
EV
辅色#2A9D8F
实心
E
EV
柔和
E
EV
实心渐变
E
EV
柔和渐变
E
EV
第三色#E9C46A
实心
E
EV
柔和
E
EV
实心渐变
E
EV
柔和渐变
E
EV
强调色#F4A261
实心
E
EV
柔和
E
EV
实心渐变
E
EV
柔和渐变
E
EV
表面色#E76F51
实心
E
EV
柔和
E
EV
实心渐变
E
EV
柔和渐变
E
EV
进度
| 实心 | 柔和 | |
|---|---|---|
主色 | 进度55% | 进度55% |
辅色 | 进度55% | 进度55% |
第三色 | 进度55% | 进度55% |
强调色 | 进度55% | 进度55% |
表面色 | 进度55% | 进度55% |
主色#264653
实心
进度55%
柔和
进度55%
辅色#2A9D8F
实心
进度55%
柔和
进度55%
第三色#E9C46A
实心
进度55%
柔和
进度55%
强调色#F4A261
实心
进度55%
柔和
进度55%
表面色#E76F51
实心
进度55%
柔和
进度55%
按钮
| 现代 | 经典 | 实心 | 柔和 | 表面 | 轮廓 | |
|---|---|---|---|---|---|---|
主色 | ||||||
辅色 | ||||||
第三色 | ||||||
强调色 | ||||||
表面色 |
主色#264653
现代
经典
实心
柔和
表面
轮廓
辅色#2A9D8F
现代
经典
实心
柔和
表面
轮廓
第三色#E9C46A
现代
经典
实心
柔和
表面
轮廓
强调色#F4A261
现代
经典
实心
柔和
表面
轮廓
表面色#E76F51
现代
经典
实心
柔和
表面
轮廓
表单控件
| 实心 | 柔和 | |
|---|---|---|
主色 | ||
辅色 | ||
第三色 | ||
强调色 | ||
表面色 |
主色#264653
实心
柔和
辅色#2A9D8F
实心
柔和
第三色#E9C46A
实心
柔和
强调色#F4A261
实心
柔和
表面色#E76F51
实心
柔和
输入框
| 默认 | 聚焦 | |
|---|---|---|
主色 | 占位符 | 占位符 帮助文本 |
辅色 | 占位符 | 占位符 帮助文本 |
第三色 | 占位符 | 占位符 帮助文本 |
强调色 | 占位符 | 占位符 帮助文本 |
表面色 | 占位符 | 占位符 帮助文本 |
主色#264653
默认
占位符
聚焦
占位符
帮助文本辅色#2A9D8F
默认
占位符
聚焦
占位符
帮助文本第三色#E9C46A
默认
占位符
聚焦
占位符
帮助文本强调色#F4A261
默认
占位符
聚焦
占位符
帮助文本表面色#E76F51
默认
占位符
聚焦
占位符
帮助文本链接
| 内联 | |
|---|---|
主色 | 访问 文档 以了解更多关于 颜色 API. |
辅色 | 访问 文档 以了解更多关于 颜色 API. |
第三色 | 访问 文档 以了解更多关于 颜色 API. |
强调色 | 访问 文档 以了解更多关于 颜色 API. |
表面色 | 访问 文档 以了解更多关于 颜色 API. |
主色#264653
内联
访问 文档 以了解更多关于 颜色 API.
辅色#2A9D8F
内联
访问 文档 以了解更多关于 颜色 API.
第三色#E9C46A
内联
访问 文档 以了解更多关于 颜色 API.
强调色#F4A261
内联
访问 文档 以了解更多关于 颜色 API.
表面色#E76F51
内联
访问 文档 以了解更多关于 颜色 API.
标签页
| 下划线 | |
|---|---|
主色 | 账户 订单 设置 通知 |
辅色 | 账户 订单 设置 通知 |
第三色 | 账户 订单 设置 通知 |
强调色 | 账户 订单 设置 通知 |
表面色 | 账户 订单 设置 通知 |
主色#264653
下划线
账户
订单
设置
通知
辅色#2A9D8F
下划线
账户
订单
设置
通知
第三色#E9C46A
下划线
账户
订单
设置
通知
强调色#F4A261
下划线
账户
订单
设置
通知
表面色#E76F51
下划线
账户
订单
设置
通知