更新记录

1.0.2（2024-03-09）

• 新增 lighten 方法 淡化颜色
• 新增 darken 方法 深化颜色
• 新增 mean 方法 获取若干个颜色的平均值
• 新增 complement 方法 获取互补色
• 新增 contrasting 方法 获取指定颜色背景上文字的最佳颜色（黑色或白色）
• 新增 equal 方法 判断颜色是否相等
• 新增 calcAPCA 方法 计算指定文本色与背景色的感知亮度对比数值

1.0.1（2024-03-03）

优化 插件说明文档

1.0.0（2024-03-03）

• 支持 rgb、hex、hsl、hsv、cmy、cmyk 六种常用颜色的相互转换，共 30个方法
• 支持 getFormat 方法获取颜色的格式
• 支持 generateColors 方法通过一个主色一键生成共十级颜色的色板

平台兼容性

sn-color

适用于 uni-app及 uni-app-x 的 UTS 颜色模型转换插件。支持 rgb、hex、hsl、hsv、cmy、cmyk 等常用颜色的转换；提供一些常用的颜色计算操作；内置 Ant Design 色板生成工具，实现提供一个主色，一键生成完整的色板。

此插件是 SinleUI 框架的内置插件。

除颜色转换 API 以外的其他 API，提供的颜色参数及返回的颜色均为 Hex 格式。

API

getFormat(color)

获取颜色对象的格式。如果提供的参数不符合 sn-color 颜色规范，则返回 null

参数

返回值

generateColors(params)

内置 Ant Design 色板生成工具，提供一个主色，一键生成共十级颜色的色板。

参数

返回值

lighten(color)

淡化颜色。

参数

返回值

darken(color)

深化颜色。

参数

返回值

mean(colors)

获取平均颜色。即返回若干个颜色的平均值。

参数

返回值

complement(color)

获取互补色。即色相旋转180°得到的颜色。原颜色与其互补色等量相加后产生白色。

参数

返回值

contrasting(bgColor)

获取指定颜色背景上文字的最佳颜色（黑色或白色）。即判断黑色与白色哪一个与背景颜色的视觉对比最大。

参数

返回值

equal(color)

判断颜色是否相等。实际上多用于判断不规范 Hex 值是否相等，如：#fff 和 FFFFFFFF，仅通过 String 方法判断颜色是否为同一值较为繁琐，使用此方法可快速判断两 Hex 颜色是否相等。

参数

返回值

calcAPCA(textColor, bgColor, round)

计算指定文本色与背景色的感知亮度对比数值（Lc），范围为 -108 ~ +106，浅色背景深色文字为正数、深色背景浅色文字为负数，背景与文字颜色互换后返回的是原数值的相反数。

可访问的感知对比度算法（Accessible Perceptual Contrast Algorithm，简称 APCA），基于字形属性、文本与背景的感知亮度差异、环境与上下文等特征进行对比度计算，目标是更接近人眼的实际感受。

APCA 是 WCAG 3.0 无障碍标准候选方法之一。由于 WCAG 2.0 对暗黑背景的支持较差，故选用了APCA 作为计算文字-背景颜色对比度的方法。

因该项目处于实验阶段，未来可能会进行一定调整。

参考： GitHub - Myndex/SAPC-APCA、不要依赖 WCAG 2 的对比度计算，试试 APCA。

参数

返回值

rgb2hex(rgb)

RGB 颜色转 HEX 颜色

参数

返回值

rgb2hsv(rgb)

RGB 颜色转 HSV 颜色

参数

返回值

rgb2hsl(rgb)

RGB 颜色转 HSL 颜色

参数

返回值

rgb2cmy(rgb)

RGB 颜色转 CMY 颜色

参数

返回值

rgb2cmyk(rgb)

RGB 颜色转 CMYK 颜色

参数

返回值

hex2rgb(hex)

HEX 颜色转 RGB 颜色

参数

返回值

hex2hsl(hex)

HEX 颜色转 HSL 颜色

参数

返回值

hex2hsv(hex)

HEX 颜色转 HSV 颜色

参数

返回值

hex2cmy(hex)

HEX 颜色转 CMY 颜色

参数

返回值

hex2cmyk(hex)

HEX 颜色转 CMYK 颜色

参数

返回值

hsl2hsv(hsl)

HSL 颜色转 HSV 颜色

参数

返回值

hsl2rgb(hsl)

HSL 颜色转 RGB 颜色

参数

返回值

hsl2hex(hsl)

HSL 颜色转 HEX 颜色

参数

返回值

hsl2cmy(hsl)

HSL 颜色转 CMY 颜色

参数

返回值

hsl2cmyk(hsl)

HSL 颜色转 CMYK 颜色

参数

返回值

hsv2hsl(hsv)

HSV 颜色转 HSL 颜色

参数

返回值

hsv2rgb(hsv)

HSV 颜色转 RGB 颜色

参数

返回值

hsv2hex(hsv)

HSV 颜色转 HEX 颜色

参数

返回值

hsv2cmy(hsv)

HSV 颜色转 CMY 颜色

参数

返回值

hsv2cmyk(hsv)

HSV 颜色转 CMYK 颜色

参数

返回值

cmy2cmyk(cmy)

CMY 颜色转 CMYK 颜色

参数

返回值

cmy2rgb(cmy)

CMY 颜色转 RGB 颜色

参数

返回值

cmy2hex(cmy)

CMY 颜色转 HEX 颜色

参数

返回值

cmy2hsl(cmy)

CMY 颜色转 HSL 颜色

参数

返回值

cmy2hsv(cmy)

CMY 颜色转 HSV 颜色

参数

返回值

cmyk2cmy(cmyk)

CMYK 颜色转 CMY 颜色

参数

返回值

cmyk2rgb(cmyk)

CMYK 颜色转 RGB 颜色

参数

返回值

cmyk2hex(cmyk)

CMYK 颜色转 HEX 颜色

参数

返回值

cmyk2hsl(cmyk)

CMYK 颜色转 HSL 颜色

参数

返回值

cmyk2hsv(cmyk)

CMYK 颜色转 HSV 颜色

参数

返回值

自定义类型

snRgb

属性

snHsl

属性

snHsv

属性

snCmy

属性

snCmyk

属性

generateColorsOption

属性

使用演示

1. 导入插件

// 导入 sn-color 插件
import * as snColor from '../../uni_modules/sn-color'
import type { generateColorsOption, snRgb, snHsl, snHsv, snCmy, snCmyk } from '../../uni_modules/sn-color'

2. 颜色转换

// 颜色转换
// HEX 转 RGB
console.log(snColor.hex2rgb('#ff0000'))
// RGB 转 HEX
console.log(snColor.rgb2hex({ r: 255, g: 231, b: 48, a: 1 } as snRgb))
console.log(snColor.rgb2cmyk({ r: 255, g: 231, b: 48 } as snRgb))

3. 颜色计算、操作console.log(snColor.calcAPCA('#ff0000', '#4b4b4b'))

// 获取颜色格式
let color = { c: 0.2, m: 0.5, y: 0.1 } as snCmy)
console.log(snColor.getFormat(color))
// output: "cmy"

// 深化颜色
console.log(snColor.darken('#4f78ff', 0.7))
// output: "#3754b3"

// 淡化颜色
console.log(snColor.lighten('#4f78ff', 0.7))
// output: "#84a1ff"

// 获取指定背景上文字颜色的黑或白
console.log(snColor.contrasting('#4f78ff'))
// output: "#fff"

// 判断颜色是否相等
console.log(snColor.equal('#fff', 'FFFFFFFF'))
// output: true

// 获取互补色
console.log(snColor.complement('#ff0000'))
// output: "#00ffff"

// 获取平均颜色
console.log(snColor.mean(['#ff4e4e', '#fff014']))
// output: "#ff9f31"

// 获取 APCA 亮度对比值
console.log(snColor.calcAPCA('#ff0000', '#4b4b4b'))
// output: -24

4. 一键生成色板

let colors = snColor.generateColors({ originColor: '#4f78ff'} as generateColorsOption)
console.log(colors)
// output: ["#f0f6ff","#e8f0ff","#c2d6ff","#9cb9ff","#759aff","#4f78ff","#3858d9","#253db3","#16268c","#101966"]

SinleUI：一个简洁、轻巧的现代移动应用UI框架。