12 KiB
12 KiB
name, description, tags, plugin, category, dependencies
| name | description | tags | plugin | category | dependencies | ||||
|---|---|---|---|---|---|---|---|---|---|
| lime-color 颜色工具 | 功能丰富、易于使用的颜色处理工具库，支持颜色转换、操作和生成功能。 |
|
lime-color | API 插件 |
lime-color 颜色工具
一个功能丰富、易于使用的颜色处理工具库，提供全面的颜色转换、操作和生成功能
📋 功能特性
- 多格式支持：兼容 HEX、RGB、HSL、HSV、HSB 等多种颜色格式
- 丰富的转换方法：在不同颜色空间之间自由转换
- 强大的颜色操作：支持亮度调整、饱和度修改、色相旋转等操作
- 智能颜色组合：生成相似色、互补色、三色组合等多种颜色方案
- 主题色生成：基于 Ant Design 颜色算法的主题色系列生成
- 跨平台兼容：支持 uni-app 多端开发
📚 文档链接
详细使用文档请访问以下站点：
🛠️ 安装方法
- 在 uni-app 插件市场中搜索并导入
lime-color - 导入后重新编译项目以确保插件正确集成
🚀 快速开始
基础用法
最简单的颜色工具用法，直接导入并使用：
import { tinyColor } from '@/uni_modules/lime-color'
颜色解析
tinyColor 接受多种类型的输入，包括字符串、数字、对象等：
// Hex 格式
tinyColor('#000'); // 6位十六进制
tinyColor('000'); // 无 # 前缀的十六进制
tinyColor('#369C'); // 4位十六进制（带透明度）
tinyColor('369C'); // 无 # 前缀的4位十六进制
tinyColor('#f0f0f688'); // 8位十六进制（带透明度）
// RGB 格式
tinyColor('rgb (255, 0, 0)'); // 带括号和空格的 RGB
tinyColor('rgb 255 0 0'); // 无括号的 RGB
tinyColor('rgba (255, 0, 0, .5)'); // RGBA 格式
tinyColor({ r: 255, g: 0, b: 0 }); // RGB 对象
// HSL 格式
tinyColor('hsl(0, 100%, 50%)'); // 标准 HSL 格式
tinyColor('hsla(0, 100%, 50%, .5)'); // HSLA 格式
tinyColor('hsl 0 1.0 0.5'); // 无括号的 HSL
tinyColor({ h: 0, s: 1, l: 0.5 }); // HSL 对象
// HSV 格式
tinyColor('hsv(0, 100%, 100%)'); // 标准 HSV 格式
tinyColor('hsva(0, 100%, 100%, .5)'); // HSVA 格式
tinyColor('hsv 0 1 1'); // 无括号的 HSV
tinyColor({ h: 0, s: 100, v: 100 }); // HSV 对象
// 颜色名称
tinyColor('RED'); // 大写颜色名称
tinyColor('blanchedalmond'); // 小写颜色名称
tinyColor('darkblue'); // 复合颜色名称
// 数字格式
tinyColor(0x0); // 数字 0
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, LimeColorGenerateOptions } from '@/uni_modules/lime-color'
// 生成默认主题色系列
generate('red')
// ['#2c1113', '#450f11', '#5b0e0e', '#7e0b0b', '#ad0707', '#dc0303', '#e82d27', '#f3594f', '#f88577', '#faaca0']
// 生成暗色主题色系列
generate('red', { theme: 'dark' })
// 生成亮色主题色系列
generate('blue', { theme: 'light' })
📖 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[] |
🌟 应用场景
- 颜色选择器：支持多种颜色格式的输入和输出
- 主题定制：生成完整的主题色系列
- 数据可视化：创建和谐的颜色方案
- UI 设计工具：提供颜色操作和转换功能
- 游戏开发：生成游戏内的颜色方案
🤝 支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|---|---|
 |
 |
📄 许可证
本项目采用 MIT 许可证，详见 LICENSE 文件。
🔗 相关链接
lime-color - 让颜色处理变得简单而强大！