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）

示例代码

基础用法

<template>
  <parrot-color color="#1a7eff" />
  <parrot-color color="#FF2B2B" />
  <parrot-color color="#FFB703" />
  <parrot-color color="#09BE4F" />
</template>

圆形色块

<template>
  <parrot-color color="#6831FF" round />
  <parrot-color color="#1a7eff" round />
</template>

显示色值

<template>
  <parrot-color color="#1a7eff" show-value size="120rpx" />
</template>

自定义尺寸

<template>
  <parrot-color color="#09BE4F" size="40rpx" />
  <parrot-color color="#09BE4F" size="80rpx" />
  <parrot-color color="#09BE4F" size="120rpx" />
</template>

透明度

<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)

示例代码地址

ParrotUI Color 色彩

9:41