更新记录

0.0.7（2025-08-31）下载此版本

chore: 更新文档

0.0.6（2025-04-21）下载此版本

feat: 兼容uniappx 鸿蒙next

0.0.5（2024-09-30）下载此版本

fix: 修复 vue2类型问题

平台兼容性

uni-app(4.72)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	5.0	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√

uni-app x(4.74)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	5.0	√	√	√

lime-color 颜色工具

一个功能丰富的颜色处理工具，提供颜色转换、操作和生成等多种功能。支持多种颜色格式（HEX、RGB、HSL、HSV等），可用于颜色选择器、主题定制、颜色计算等多种场景。

文档链接

📚 组件详细文档请访问以下站点：

安装方法

在uni-app插件市场中搜索并导入lime-color
导入后可能需要重新编译项目

代码演示

基础用法

最简单的颜色工具用法，直接导入并使用。

import {tinyColor} from '@/uni_modules/lime-color'

颜色解析

tinyColor 接受多种类型的输入，包括字符串、数字、对象等。

// Hex, 8-digit (RGBA) Hex
tinyColor('#000');
tinyColor('000');
tinyColor('#369C');
tinyColor('369C');
tinyColor('#f0f0f6');
tinyColor('f0f0f6');
tinyColor('#f0f0f688');
tinyColor('f0f0f688');

// RGB, RGBA
tinyColor('rgb (255, 0, 0)');
tinyColor('rgb 255 0 0');
tinyColor('rgba (255, 0, 0, .5)');
tinyColor({ r: 255, g: 0, b: 0 });

// HSL, HSLA
tinyColor('hsl(0, 100%, 50%)');
tinyColor('hsla(0, 100%, 50%, .5)');
tinyColor('hsl(0, 100%, 50%)');
tinyColor('hsl 0 1.0 0.5');
tinyColor({ h: 0, s: 1, l: 0.5 });

// HSV, HSVA
tinyColor('hsv(0, 100%, 100%)');
tinyColor('hsva(0, 100%, 100%, .5)');
tinyColor('hsv (0 100% 100%)');
tinyColor('hsv 0 1 1');
tinyColor({ h: 0, s: 100, v: 100 });

// 颜色名称
tinyColor('RED');
tinyColor('blanchedalmond');
tinyColor('darkblue');

// 数字
tinyColor(0x0);
tinyColor(0xaabbcc);

颜色转换

将颜色转换为不同的格式。

const color = tinyColor('red');

// 转换为 HSV
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }
color.toHsvString(); // "hsv(0, 100%, 100%)"

// 转换为 HSL
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
color.toHslString(); // "hsl(0, 100%, 50%)"

// 转换为 Hex
color.toHex(); // "ff0000"
color.toHexString(); // "#ff0000"
color.toHex8(); // "ff0000ff"
color.toHex8String(); // "#ff0000ff"

// 转换为 RGB
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }
color.toRgbString(); // "rgb(255, 0, 0)"

// 转换为百分比 RGB
color.toPercentageRgb(); // { r: "100%", g: "0%", b: "0%", a: 1 }
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"

// 转换为颜色名称
color.toName(); // "red"

颜色修改

修改颜色的亮度、饱和度、色相等属性。

const color = tinyColor('red');

// 调亮颜色
color.lighten().toString(); // "#ff3333"
color.lighten(100).toString(); // "#ffffff"

// 提高亮度
color.brighten().toString(); // "#ff1919"

// 调暗颜色
color.darken().toString(); // "#cc0000"
color.darken(100).toString(); // "#000000"

// 添加白色
color.tint().toString(); // "#ff1a1a"
color.tint(100).toString(); // "#ffffff"

// 添加黑色
color.shade().toString(); // "#e60000"
color.shade(100).toString(); // "#000000"

// 降低饱和度
color.desaturate().toString(); // "#f20d0d"
color.desaturate(100).toString(); // "#808080"

// 提高饱和度
tinyColor('hsl(0, 10%, 50%)').saturate().toString(); // "hsl(0, 20%, 50%)"

// 转为灰度
color.greyscale().toString(); // "#808080"

// 旋转色相
color.spin(180).toString(); // "#00ffff"
color.spin(-90).toString(); // "#7f00ff"
color.spin(90).toString(); // "#80ff00"

// 混合颜色
let color1 = tinyColor('#f0f');
let color2 = tinyColor('#0f0');
color1.mix(color2).toHexString(); // #808080

颜色组合

生成一组相关的颜色。

// 生成相似颜色
const analogousColors = tinyColor('#f00').analogous();
analogousColors.map(t => t.toHexString()); 
// [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]

// 生成单色系列
const monochromaticColors = tinyColor('#f00').monochromatic();
monochromaticColors.map(t => t.toHexString()); 
// [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]

// 生成三色组合
const triadColors = tinyColor('#f00').triad();
triadColors.map(t => t.toHexString()); 
// [ "#ff0000", "#00ff00", "#0000ff" ]

// 生成四色组合
const tetradColors = tinyColor('#f00').tetrad();
tetradColors.map(t => t.toHexString()); 
// [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]

// 生成补色
tinyColor('#f00').complement().toHexString(); // "#00ffff"

颜色主题生成

使用 Ant Design 的颜色生成算法生成主题色系列。

import {generate, LGenerateOptions} from '@/uni_modules/lime-color'

// 生成默认主题色系列
generate('red')
// ['#2c1113', '#450f11', '#5b0e0e', '#7e0b0b', '#ad0707', '#dc0303', '#e82d27', '#f3594f', '#f88577', '#faaca0']

// 生成暗色主题色系列
generate('red', { theme: 'dark' })

API文档

构造函数

方法	说明	参数	返回值
`tinyColor(color, opts)`	创建一个 TinyColor 实例	color: 颜色值, opts: 选项	TinyColor 实例

属性

属性名	说明	类型
`originalInput`	传递到构造函数中用于创建实例的原始输入	any
`format`	用于创建实例的格式	string
`isValid`	颜色是否成功被解析	boolean

颜色判断方法

方法	说明	返回值
`getBrightness()`	返回颜色的感知亮度，范围从 0-255	number
`isLight()`	返回一个布尔值，指示颜色的感知亮度是否为浅色	boolean
`isDark()`	返回一个布尔值，指示颜色的感知亮度是否为深色	boolean
`getLuminance()`	返回颜色的感知亮度，范围从 0-1	number
`isMonochrome()`	判断当前颜色是否为单色	boolean

透明度操作

方法	说明	参数	返回值
`getAlpha()`	返回颜色的透明度值，范围从 0-1	-	number
`setAlpha(alpha)`	设置颜色的透明度值	alpha: 0-1 之间的数值	TinyColor 实例
`onBackground(background)`	计算颜色在背景上的显示效果	background: 背景颜色	TinyColor 实例

颜色转换方法

方法	说明	参数	返回值
`toHsv()`	转换为 HSV 对象	-	HSVA 对象
`toHsvString()`	转换为 HSV 字符串	-	string
`toHsb()`	转换为 HSB 对象	-	HSBA 对象
`toHsbString()`	转换为 HSB 字符串	-	string
`toHsl()`	转换为 HSL 对象	-	HSLA 对象
`toHslString()`	转换为 HSL 字符串	-	string
`toHex(allow3Char)`	转换为十六进制字符串	allow3Char: 是否允许3字符简写	string
`toHexString(allow3Char)`	转换为带#的十六进制字符串	allow3Char: 是否允许3字符简写	string
`toHex8(allow4Char)`	转换为8位十六进制字符串	allow4Char: 是否允许4字符简写	string
`toHex8String(allow4Char)`	转换为带#的8位十六进制字符串	allow4Char: 是否允许4字符简写	string
`toHexShortString(allowShortChar)`	根据透明度返回较短的十六进制值	allowShortChar: 是否允许简写	string
`toRgb()`	转换为 RGB 对象	-	RGBA 对象
`toRgbString()`	转换为 RGB 字符串	-	string
`toPercentageRgb()`	转换为百分比表示的 RGB 对象	-	RGBAString 对象
`toPercentageRgbString()`	转换为百分比表示的 RGB 字符串	-	string
`toName()`	转换为颜色名称	-	string 或 null
`toNumber()`	转换为数字	-	number
`toString(format)`	根据指定格式转换为字符串	format: 格式名称	string

颜色修改方法

方法	说明	参数	返回值
`lighten(amount)`	调亮颜色	amount: 0-100 之间的数值	TinyColor 实例
`brighten(amount)`	提高亮度	amount: 0-100 之间的数值	TinyColor 实例
`darken(amount)`	调暗颜色	amount: 0-100 之间的数值	TinyColor 实例
`tint(amount)`	与白色混合	amount: 0-100 之间的数值	TinyColor 实例
`shade(amount)`	与黑色混合	amount: 0-100 之间的数值	TinyColor 实例
`desaturate(amount)`	降低饱和度	amount: 0-100 之间的数值	TinyColor 实例
`saturate(amount)`	提高饱和度	amount: 0-100 之间的数值	TinyColor 实例
`greyscale()`	转为灰度	-	TinyColor 实例
`spin(amount)`	旋转色相	amount: -360 到 360 之间的数值	TinyColor 实例
`mix(color, amount)`	与另一种颜色混合	color: 颜色值, amount: 0-100 之间的数值	TinyColor 实例

颜色组合方法

方法	说明	参数	返回值
`analogous(results, slices)`	生成相似颜色	results: 结果数量, slices: 分片数量	TinyColor[]
`monochromatic(results)`	生成单色系列	results: 结果数量	TinyColor[]
`splitcomplement()`	生成分裂补色	-	TinyColor[]
`triad()`	生成三色组合	-	TinyColor[]
`tetrad()`	生成四色组合	-	TinyColor[]
`polyad(n)`	生成 n 色组合	n: 颜色数量	TinyColor[]
`complement()`	生成补色	-	TinyColor 实例

其他方法

方法	说明	参数	返回值
`clone()`	克隆颜色实例	-	TinyColor 实例
`equals(color)`	判断两个颜色是否相等	color: 颜色值	boolean

颜色主题生成

方法	说明	参数	返回值
`generate(color, options)`	生成颜色主题	color: 颜色值, options: 选项	string[]

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

lime-color tinycolor颜色转换 lime-color TinyColor color 颜色转换 uts

更新记录

0.0.7（2025-08-31）下载此版本

0.0.6（2025-04-21）下载此版本

0.0.5（2024-09-30）下载此版本

平台兼容性

uni-app(4.72)

uni-app x(4.74)

lime-color 颜色工具

文档链接

安装方法

代码演示

基础用法

颜色解析

颜色转换

颜色修改

颜色组合

颜色主题生成

API文档

构造函数

属性

颜色判断方法

透明度操作

颜色转换方法

颜色修改方法

颜色组合方法

其他方法

颜色主题生成

支持与赞赏

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

lime-echart echarts图表

海报画板

lime-signature 手写板-签名签字

antv F2 v3

lime-clipper 图片裁剪

lime-color tinycolor颜色转换 lime-color TinyColor color 颜色转换 uts

更新记录

0.0.7（2025-08-31） 下载此版本

0.0.6（2025-04-21） 下载此版本

0.0.5（2024-09-30） 下载此版本

平台兼容性

uni-app(4.72)

uni-app x(4.74)

lime-color 颜色工具

文档链接

安装方法

代码演示

基础用法

颜色解析

颜色转换

颜色修改

颜色组合

颜色主题生成

API文档

构造函数

属性

颜色判断方法

透明度操作

颜色转换方法

颜色修改方法

颜色组合方法

其他方法

颜色主题生成

支持与赞赏

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

lime-echart echarts图表

海报画板

lime-signature 手写板-签名签字

antv F2 v3

lime-clipper 图片裁剪

Modal title

0.0.7（2025-08-31）下载此版本

0.0.6（2025-04-21）下载此版本

0.0.5（2024-09-30）下载此版本