Color 色彩
Parrot UI 用色指南。统一的色彩规范可确保界面在不同平台、不同主题下拥有一致的视觉体验。
支持平台
| App-Vue | App-Nvue | App-Android | App-iOS | App-HarmonyOS | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
色彩规范
主色
使用场景如：菜单栏、按钮、突出文字、图标等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
#1a7eff | #1a7eff |
辅助色
使用场景如：信息提示成功、警告和失败等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
#FF2B2B | #FF2B2B |
#FFB703 | #FFB703 |
#6831FF | #6831FF |
#09BE4F | #09BE4F |
字体颜色
使用场景如：表单标题内容、文章标题内容等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
#181818 | #D1D1D1 |
#333333 | #A3A3A3 |
#B2B2B2 | #8D8D8D |
#CCCCCC | #5E5E5E |
#FFFFFF | #FFFFFF |
背景色、遮罩色
使用场景如：页面背景色、内容模块底色等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
#F1F4FA | #111111 |
#FFFFFF | #1B1B1B |
#F8F8F8 | #222222 |
rgba(255,43,43,.05) | #222222 |
rgba(255,183,3,.1) | #222222 |
rgba(104,49,255,.05) | #222222 |
rgba(9,190,79,.05) | #222222 |
rgba(0,0,0,0.6) | rgba(0,0,0,0.6) |
rgba(0,0,0,0.2) | rgba(255,255,255,.2) |
边框颜色
使用场景如：分割线等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
#EEEEEE | #242424 |
渐变色
使用场景如：按钮背景色等。
| 浅色模式（light） | 深色模式（dark） |
|---|---|
示例代码
基础用法
vue
<template>
<parrot-color color="#1a7eff" />
<parrot-color color="#FF2B2B" />
<parrot-color color="#FFB703" />
<parrot-color color="#09BE4F" />
</template>圆形色块
vue
<template>
<parrot-color color="#6831FF" round />
<parrot-color color="#1a7eff" round />
</template>显示色值
vue
<template>
<parrot-color color="#1a7eff" show-value size="120rpx" />
</template>自定义尺寸
vue
<template>
<parrot-color color="#09BE4F" size="40rpx" />
<parrot-color color="#09BE4F" size="80rpx" />
<parrot-color color="#09BE4F" size="120rpx" />
</template>透明度
vue
<template>
<parrot-color color="#1a7eff" :opacity="1" />
<parrot-color color="#1a7eff" :opacity="0.6" />
<parrot-color color="#1a7eff" :opacity="0.3" />
</template>API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
color | string | '#1a7eff' | 颜色值 |
size | string | '80rpx' | 色块尺寸 |
round | boolean | false | 是否圆形 |
showValue | boolean | false | 是否显示色值 |
opacity | number | 1 | 透明度 0-1 |
Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
click | 点击色块时触发 | (color: string) |
示例代码地址
Color 色彩
主色
菜单栏、按钮、突出文字
#1a7eff
辅助色
信息提示成功、警告和失败
危险#FF2B2B
警告#FFB703
信息#6831FF
成功#09BE4F
字体颜色
表单标题、文章内容
#181818
#333333
#B2B2B2
#CCCCCC
#FFFFFF
背景色
页面背景、内容模块底色
#F1F4FA
#FFFFFF
#F8F8F8
rgba(255,43,43,0.05)
rgba(255,183,3,0.1)
rgba(104,49,255,0.05)
rgba(9,190,79,0.05)
rgba(0,0,0,0.6)
rgba(0,0,0,0.2)
边框颜色
#EEEEEE
渐变色
按钮背景色
品牌渐变
危险渐变