更新记录
1.0.0 下载此版本
- Initial release
平台兼容性
云端兼容性
阿里云 | 腾讯云 | 支付宝云 |
---|---|---|
√ | √ | √ |
uni-app x(4.66)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
kux-colors-helper
一个功能强大的颜色处理辅助函数库,为各位插件组件开发者提供底层的颜色转换、处理和操作功能支持。
功能特点
- 支持多种颜色空间的转换(RGB,HSL,HSV,CMYK,LAB,XYZ)
- 提供 CSS 颜色格式处理(十六进制、rgb/rgba、hsl/hsla)
- 颜色混合、插值和渐变生成
- 色差计算(Delta E)
- 支持 CSS 颜色名称映射
- 颜色亮度和对比度调整
- 颜色提取和分析
安装方法
- 在插件市场搜索并导入
kux-colors-helper
- 项目中引入并使用
// 在 uts 文件中引入
import { rgbToHex, hexToRgb, RGB } from '@/uni_modules/kux-colors-helper'
// 使用示例
const hexColor = rgbToHex({ r: 255, g: 0, b: 0 } as RGB); // 返回 '#ff0000'
const rgbColor = hexToRgb("#ff0000"); // 返回 { r: 255, g: 0, b: 0 }
API 文档
基础颜色转换
rgbToHsl(rgb: RGB
): HSL
- 说明:将
RGB
转换为HSL
- 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
HSL
hslToRgb(hsl: HSL
): RGB
- 说明:将
HSL
转换为RGB
- 参数:
- hsl:
HSL
颜色
- hsl:
- 返回值:
RGB
rgbToHsv(rgb: RGB
): HSV
- 说明:将
RGB
转换为HSV
- 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
RGB
hsvToRgb(hsv: HSV
): RGB
- 说明:将
HSV
转换为RGB
- 参数:
- hsv:
HSV
颜色
- hsv:
- 返回值:
RGB
rgbToCmyk(rgb: RGB
): CMYK
- 说明:将
RGB
转换为CMYK
- 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
CMYK
cmykToRgb(cmyk: CMYK
): RGB
- 说明:将
CMYK
转换为RGB
- 参数:
- cmyk:
CMYK
颜色
- cmyk:
- 返回值:
RGB
rgbToXyz(rgb: RGB
): XYZ
- 说明:将
RGB
转换为XYZ
- 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
XYZ
xyzToRgb(xyz: XYZ
): RGB
- 说明:将
XYZ
转换为RGB
- 参数:
- xyz:
XYZ
颜色
- xyz:
- 返回值:
RGB
xyzToLab(xyz: XYZ
): LAB
- 说明:将
XYZ
转换为LAB
- 参数:
- xyz:
XYZ
颜色
- xyz:
- 返回值:
LAB
labToXyz(lab: LAB
): XYZ
- 说明:将
LAN
转换为XYZ
- 参数:
- lab:
LAB
颜色
- lab:
- 返回值:
XYZ
rgbToLab(rgb: RGB
): LAB
- 说明:将
RGB
转换为LAB
- 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
LAB
labToRgb(lab: LAB
): RGB
- 说明:将
LAB
转换为RGB
- 参数:
- lab:
LAB
颜色
- lab:
- 返回值:
RGB
rgbToHex(rgb: RGB
): string
- 说明:将
RGB
转换为#
开头的十六进制字符串 - 参数:
- rgb:
RGB
颜色
- rgb:
- 返回值:
string
hexToRgb(hex: string
): RGB
- 说明:将
#
开头的十六进制字符串转换为RGB
- 参数:
- hex:
string
- hex:
- 返回值:
RGB
hslToHsv(hsl: HSL
): HSV
- 说明:将
HSL
转换为HSV
- 参数:
- hsl:
HSL
颜色
- hsl:
- 返回值:
HSV
hsvToHsl(hsv: HSV
): HSL
- 说明:将
HSV
转换为HSL
- 参数:
- hsv:
HSV
颜色
- hsv:
- 返回值:
HSL
字符串处理
parseRgbString(str: string
): RGB
- 说明:将
RGB
颜色字符串解析为RGB
对象 - 参数:
- str:
string
- str:
- 返回值:
RGB
rgbToString(rgb: RGB
): string
- 说明:将
RGB
对象转换为 RGB 颜色字符串 - 参数:
- rgb:
RGB
对象
- rgb:
- 返回值:
string
parseHslString(str: string
): HSL
- 说明:将 HSL 颜色字符串解析为
HSL
对象 - 参数:
- str:
string
- str:
- 返回值:
HSL
hslToString(hsl: HSL
): string
- 说明:将
HSL
对象转换为 HSL 颜色字符串 - 参数:
- hsl:
HSL
颜色对象
- hsl:
- 返回值:
string
灰度处理
rgbToGrayscale(rgb: RGB
): number
- 说明:将
RGB
对象转换为灰度值,采用的加权平均值 - 参数:
- rgb:
RGB
颜色对象
- rgb:
- 返回值:
number
rgbToGray(rgb: RGB
): RGB
- 说明:将
RGB
转换为灰度RGB
- 参数:
- rgb:
RGB
颜色对象
- rgb:
- 返回值:
RGB
色差计算
colorDifference(lab1: LAB
, lab2: LAB
): number
- 说明:计算两个颜色之间的 CIEDE2000色差值
- 参数:
- lab1:第一个
LAB
颜色对象 - lab2:第二个
LAB
颜色对象
- lab1:第一个
- 返回值:
number
颜色插值
interpolateColors(color1: RGB
, color2: RGB
, t: number
, space: 'rgb' | 'hsl' | 'lab'
= 'rgb'
): RGB
- 说明:在两种颜色之间差值(支持多种颜色空间)
- 参数:
- color1:起始颜色
- color2: 结束颜色
- t:插值因子(0-1)
- space:颜色空间('rgb' | 'hsl' | 'lab')
- 返回值:插值后的
RGB
颜色对象 -
示例:
// 示例1:RGB空间插值(红色线性过渡到蓝色) const demoRgbInterpolation = () => { const steps = 5; for (let i = 0; i <= steps; i++) { const t = i / steps; const color = interpolateColors(red, blue, t, 'rgb'); console.log(`RGB t=${t}:`, color); console.log(rgbToHex(color)); } } demoRgbInterpolation(); // 颜色过渡:#ff0000 -> #cc0033 -> #990066 -> #660099 -> #3300cc -> #0000ff // 示例2:HSL空间插值(红色线性过渡到蓝色) const demoHslInterpolation = () => { const steps = 5; for (let i = 0; i <= steps; i++) { const t = i / steps; const color = interpolateColors(red, blue, t, 'hsl'); console.log(`HSL t=${t}:`, color); console.log(rgbToHex(color)); } } demoHslInterpolation(); // 颜色过渡:#ff0000 -> #ff0066 -> #ff00cc -> #cc00ff -> #6600ff -> #0000ff // 示例3:LAB空间插值(红色线性过渡到蓝色) const demoLabInterpolation = () => { const steps = 5; for (let i = 0; i <= steps; i++) { const t = i / steps; const color = interpolateColors(red, blue, t, 'lab'); console.log(`LAB t=${t}:`, color); console.log(rgbToHex(color)); } } demoLabInterpolation(); // 颜色过渡:#ff0000 -> #ed0044 -> #d70072 -> #ba009f -> #8d00ce -> #0000ff // 示例4:Lab空间特殊处理(红->蓝) const demoLabSpecial = () => { // 触发红蓝特化逻辑(t=0.5时强制高饱和度) const specialColor = interpolateColors(red, blue, 0.5, 'lab'); console.log(`LAB special t=0.5:`, specialColor); console.log(rgbToHex(specialColor)); // #970197 } demoLabSpecial(); // 颜色过渡:#ff0000 -> #ff0000 // 示例5:黄->蓝渐变对比 const demoYellowBlue = () => { // RGB空间(出现灰色) const rgbMid = interpolateColors(yellow, blue, 0.5, 'rgb'); console.log("黄→蓝 (RGB):", rgbMid); console.log(rgbToHex(rgbMid)); // #808080 // Lab空间(保持色彩过渡) const labMid = interpolateColors(yellow, blue, 0.5, 'lab'); console.log("黄→蓝 (Lab):", labMid); console.log(rgbToHex(labMid)); // #978097 } demoYellowBlue();
颜色混合和渐变
mixColors(color1: RGB
, color2: RGB
, ratio: number
= 0.5
): RGB
- 说明:混合两种颜色
- 参数:
- color1:第一种颜色
- color2: 第二种颜色
- ratio: 混合比例(0-1)
- 返回值:混合后的
RGB
对象
generateGradient(color1: RGB
, color2: RGB
, steps: number
, space: 'rgb' | 'hsl' | 'lab'
= 'lab'
): RGB[]
- 说明:生成两种颜色之间的渐变数组,生成的结果会去除重复颜色
- 参数:
- color1:起始颜色
- color2:结束颜色
- steps:步数(包含起止颜色)
- space:颜色空间('rgb' | 'hsl' | 'lab')
- 返回值:
RGB
对象的颜色数组(长度为steps)
generateMultiGradient(colors: RGB[]
, stepsPerSegment: number
, space: 'rgb' | 'hsl' | 'lab'
= 'lab'
): RGB[]
- 说明:生成多色渐变(颜色空间自适应)
- 参数:
- colors:颜色数组(至少2个颜色)
- stepsPerSegment: 每段的步数
- space: 使用的颜色空间('rgb' | 'hsl' | 'lab')
- 返回值:
RGB
对象数组(长度为stepsPerSegment * (colors.length - 1)
),会去除重复颜色
generateUniformMultiGradient(colors: RGB[]
, totalSteps: number
, space: 'rgb' | 'hsl' | 'lab'
= lab
): RGB
- 说明:生成均匀分布的多色渐变
- 参数:
- colors:颜色数组
- totalSteps: 总步数
- space: 使用的颜色空间('rgb' | 'hsl' | 'lab')
- 返回值:
RGB
对象数组(长度为totalSteps
)
generateRainbowGradient(steps: number
= 360, saturation: number
= 1, lightness: number
= 0.5): HSL[]
- 说明:生成彩虹渐变(全色相环)
- 参数:
- steps:总步数(默认360)
- saturation: 饱和度(0-1)
- lightness: 亮度(0-1)
- 返回值:
HSL
对象数组
generateHueGradient(baseColor: RGB
, steps: number
, hueShift: number
= 360): RGB[]
- 说明:生成等距的色相渐变(自适应亮度)
- 参数:
- baseColor:基础颜色(确定色相起点)
- steps: 步数
- hueShift: 色相偏移量(默认360度)
- 返回值:
RGB
对象数组(长度为steps
)
generateLightnessGradient(baseColor: RGB
, steps: number
, minLightness: number
= 0
, maxLlightness:number
= 1
): RGB[]
- 说明:生成同色相不同亮度渐变
- 参数:
- baseColor:基础颜色
- steps: 步数
- minLightness: 最小亮度(0-1)
- maxLightness:最大亮度(0-1)
- 返回值:
RGB
对象数组(长度为steps
)
generateComplementaryGradient(baseColor: RGB
, steps: number
): RGB[]
- 说明:生成互补色渐变
- 参数:
- baseColor:基础颜色
- steps: 步数(必须为奇数且至少3)
- 返回值:
RGB
对象数组(中间点是基础色)
generateTriadicGradient(baseColor: RGB
, stepsPerSegment: number
): RGB[]
- 说明:生成三色渐变
- 参数:
- baseColor:基础颜色
- stepsPerSegment: 每段的步数(总共为3段)
- 返回值:
RGB
对象数组(长度为stepsPerSegment * 3
)
generatePerceptuallyUniformGradient(color1: RGB
, color2: RGB
, steps: number
, minDeltaE: number
= 2.3): RGB
- 说明:生成视觉均匀的渐变(基于CIEDE2000色差)
- 参数:
- color1:起始颜色
- color2: 结束颜色
- steps: 步数
- minDeltaE:最小色差(默认2.3)
- 返回值:
RGB
对象数组(长度为steps
)
findColorPositionInGradient(gradient: RGB[]
, targetColor: RGB
, space: 'rgb' | 'lab'
= 'lab'
): number
- 说明:查找渐变中最接近目标色的位置(0-1)
- 参数:
- gradient:渐变色数组
- targetColor: 目标色
- space: 计算色差的空间('rgb' | 'lab')
- 返回值:目标色在渐变中的位置(0-1)
CSS 颜色处理
cssToRgb(color: string
): RGB
- 说明:将 CSS 颜色字符串转换为
RGB
对象(自动处理十六进制、rgb、rgba、hsl格式) - 参数:
- color:CSS 颜色字符串
- 返回值:
RGB
对象
rgbToCss(color: RGB
, format: 'hex' | 'rgb' | 'rgba'
= 'hex'
, alpha: number | null
= null): string
- 说明:将
RGB
对象转换为 CSS 颜色字符串 - 参数:
- color:
RGB
对象 - format: 颜色格式
- alpha: 透明度(仅用于
'rgba'
格式)
- color:
- 返回值:CSS 颜色字符串
rgbToCssHsl(color: RGB
, alpha: number | null
= null): string
- 说明:将
RGB
对象转换为 CSS HSL字符串 - 参数:
- color:
RGB
对象 - alpha: 透明度(可选)
- color:
- 返回值:CSS HSL字符串
rgbToCssVariables(color: RGB
, prefix: string
= 'color'): string
- 说明:将
RGB
对象转换为 CSS 变量字符串 - 参数:
- color:
RGB
对象 - prefix: 变量前缀
- color:
- 返回值:CSS 变量字符串
rgbToGl(color: RGB
): number[]
- 说明:将
RGB
对象转换为 GL 格式数组(0-1范围) - 参数:
- color:
RGB
对象
- color:
- 返回值:GL 格式颜色值数组
glToRgb(glColor: number[]
): RGB
- 说明:将 GL 格式数组转换为
RGB
对象 - 参数:
- glColor:
number[]
- glColor:
- 返回值:
RGB
对象
getCssColorName(color: RGB
): string | null
- 说明:获取 CSS 颜色名称(参考SVG1.0、SVG2.0、W3C标准内置了148种颜色名称)
- 参数:
- color:
RGB
对象
- color:
- 返回值:内置颜色名称
isValidCssColor(color: string
): boolean
- 说明:检查字符串是否为有效的 CSS 颜色字符串
- 参数:
- color:要检查的字符串
- 返回值:
boolean
getAllCssColorNames(): string[]
- 说明:获取 所有CSS 颜色名称(参考SVG1.0、SVG2.0、W3C标准内置了148种颜色名称)
- 参数:无
- 返回值:内置颜色名称数组
convertCssColor(color: string
, targetFormat: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'
, alpha: number
= 1): string
- 说明:将 CSS 颜色字符串转换为指定的格式
- 参数:
- color:CSS 颜色字符串
- targetFormat:目标格式
- alpha:透明度(可选)
- 返回值:指定格式的 CSS 颜色字符串
parseCssGradient(gradient: string
): ParseCSSGradientResult | null
- 说明:解析 CSS 渐变
- 参数:
- gradient:
CSS
渐变字符串
- gradient:
- 返回值:
ParseCSSGradientResult
createCssGradient(type: 'linear' | 'radial'
, colors: RGB[]
, stops?: number[]
, angle: number
= 180): string
- 说明:创建 CSS 渐变字符串
- 参数:
- type:渐变类型
- colors:颜色数组
- stops:停止点数组(可选)
- angle:角度(仅用于线性渐变,可选)
- 返回值:
string
使用示例
import {
rgbToHsl,
hslToRgb,
rgbToHsv,
hsvToRgb,
rgbToCmyk,
cmykToRgb,
rgbToXyz,
xyzToRgb,
xyzToLab,
labToXyz,
rgbToLab,
labToRgb,
rgbToHex,
hexToRgb,
hslToHsv,
hsvToHsl,
parseRgbString,
rgbToString,
parseHslString,
hslToString,
rgbToGray,
colorDifference,
mixColors,
interpolateColors,
generateGradient,
generateMultiGradient,
generateUniformMultiGradient,
generateRainbowGradient,
generateHueGradient,
generateLightnessGradient,
generateComplementaryGradient,
generateTriadicGradient,
generatePerceptuallyUniformGradient,
findColorPositionInGradient,
cssToRgb,
rgbToCss,
rgbToCssHsl,
rgbToCssVariables,
rgbToGl,
glToRgb,
getCssColorName,
isValidCssColor,
getAllCssColorNames,
convertCssColor,
parseCssGradient,
createCssGradient,
RGB,
CMYK,
XYZ,
LAB
} from '@/uni_modules/kux-colors-helper';
const rgb = {
r: 245,
g: 63,
b: 63
} as RGB;
const hsl = rgbToHsl(rgb);
console.log(hsl); // {h: 0, s: 0.9009900990099012, l: 0.603921568627451}
const newRgb = hslToRgb(hsl);
console.log(newRgb); // {r: 245, g: 63, b: 63}
const hsv = rgbToHsv(rgb);
console.log(hsv); // {h: 0, s: 0.7428571428571429, v: 0.9607843137254902}
const newRgb2 = hsvToRgb(hsv);
console.log(newRgb2); // {r: 245, g: 63, b: 63}
const cmyk = rgbToCmyk(rgb);
console.log(cmyk); // {c: 0, m: 0.7428571428571429, y: 0.7428571428571429, k: 0.039215686274509776}
const newRgb3 = cmykToRgb(cmyk);
console.log(newRgb3); // {r: 245, g: 63, b: 63}
const xyz = rgbToXyz(rgb);
console.log(xyz); // {x: 0.403356191272325, y: 0.2333266696808948, z: 0.07081473648832552}
const newRgb4 = xyzToRgb(xyz);
console.log(newRgb4); // {r: 245, g: 63, b: 63}
const lab = xyzToLab(xyz);
console.log(lab); // {a: 67.92323819054685, b: 42.69651827508238, l: 55.413357184670346}
const newXyz = labToXyz(lab);
console.log(newXyz); // {x: 0.4033561912723251, y: 0.23332666968089477, z: 0.07081473648832554}
const lab2 = rgbToLab(rgb);
console.log(lab2); // {a: 67.92323819054685, b: 42.69651827508238, l: 55.413357184670346}
const newRgb5 = labToRgb(lab2);
console.log(newRgb5); // {r: 245, g: 63, b: 63}
const hex = rgbToHex(rgb);
console.log(hex); // #f53f3f
const newRgb6 = hexToRgb(hex);
console.log(newRgb6); // {r: 245, g: 63, b: 63}
const hsv2 = hslToHsv(hsl);
console.log(hsv2); // {h: 0, s: 0.7428571428571429, v: 0.9607843137254903}
const hsl2 = hsvToHsl(hsv2);
console.log(hsl2); // {h: 0, s: 0.9009900990099013, l: 0.603921568627451}
const rgbString = parseRgbString('rgb(245, 63, 63)');
console.log(rgbString); // {r: 245, g: 63, b: 63}
const rgbString2 = rgbToString(rgb);
console.log(rgbString2); // rgb(245, 63, 63)
const hslString = parseHslString('hsl(0, 90%, 60%)');
console.log(hslString); // {h: 0, s: 0.9, l: 0.6}
const hslString2 = hslToString(hsl);
console.log(hslString2); // hsl(0, 90%, 60%)
const gray = rgbToGray(rgb);
console.log(gray); // {b: 117, g: 117, r: 117}
const diffLab1 = {
l: 55.413357184670346,
a: 67.92323819054685,
b: 42.69651827508238
} as LAB;
const diffLab2 = {
l: 46,
a: 41,
b: -85
} as LAB;
const diff = colorDifference(diffLab1, diffLab2);
console.log(diff); // 45.949714675214565
const mixed = mixColors(rgb, {r: 255, g: 0, b: 0} as RGB, 0.5);
console.log(mixed); // {b: 32, g: 32, r: 250}
const red = {r: 255, g: 0, b: 0} as RGB;
const blue = {r: 0, g: 0, b: 255} as RGB;
const yellow = {r: 255, g: 255, b: 0} as RGB;
// 示例1:RGB空间插值(红色线性过渡到蓝色)
const demoRgbInterpolation = () => {
const steps = 5;
for (let i = 0; i <= steps; i++) {
const t = i / steps;
const color = interpolateColors(red, blue, t, 'rgb');
console.log(`RGB t=${t}:`, color);
console.log(rgbToHex(color));
}
}
demoRgbInterpolation(); // 颜色过渡:#ff0000 -> #cc0033 -> #990066 -> #660099 -> #3300cc -> #0000ff
// 示例2:HSL空间插值(红色线性过渡到蓝色)
const demoHslInterpolation = () => {
const steps = 5;
for (let i = 0; i <= steps; i++) {
const t = i / steps;
const color = interpolateColors(red, blue, t, 'hsl');
console.log(`HSL t=${t}:`, color);
console.log(rgbToHex(color));
}
}
demoHslInterpolation(); // 颜色过渡:#ff0000 -> #ff0066 -> #ff00cc -> #cc00ff -> #6600ff -> #0000ff
// 示例3:LAB空间插值(红色线性过渡到蓝色)
const demoLabInterpolation = () => {
const steps = 5;
for (let i = 0; i <= steps; i++) {
const t = i / steps;
const color = interpolateColors(red, blue, t, 'lab');
console.log(`LAB t=${t}:`, color);
console.log(rgbToHex(color));
}
}
demoLabInterpolation(); // 颜色过渡:#ff0000 -> #ed0044 -> #d70072 -> #ba009f -> #8d00ce -> #0000ff
// 示例4:Lab空间特殊处理(红->蓝)
const demoLabSpecial = () => {
// 触发红蓝特化逻辑(t=0.5时强制高饱和度)
const specialColor = interpolateColors(red, blue, 0.5, 'lab');
console.log(`LAB special t=0.5:`, specialColor);
console.log(rgbToHex(specialColor)); // #970197
}
demoLabSpecial(); // 颜色过渡:#ff0000 -> #ff0000
// 示例5:黄->蓝渐变对比
const demoYellowBlue = () => {
// RGB空间(出现灰色)
const rgbMid = interpolateColors(yellow, blue, 0.5, 'rgb');
console.log("黄→蓝 (RGB):", rgbMid);
console.log(rgbToHex(rgbMid)); // #808080
// Lab空间(保持色彩过渡)
const labMid = interpolateColors(yellow, blue, 0.5, 'lab');
console.log("黄→蓝 (Lab):", labMid);
console.log(rgbToHex(labMid)); // #978097
}
demoYellowBlue();
// 生成两种颜色之间的渐变数组
const gradient = generateGradient(red, blue, 10);
console.log("渐变数组:", gradient);
// 按段生成多色渐变(红-黄-蓝,每段5步,会去除重复颜色)
const multiGradient = generateMultiGradient(
[red, yellow, blue] as RGB[],
5,
'lab'
);
console.log(multiGradient);
// 按步数生成均匀分布的多色渐变
const uniformGradient = generateUniformMultiGradient(
[red, yellow, blue] as RGB[],
5,
'lab'
);
console.log(uniformGradient);
// 生成彩虹渐变(全色相环)
const rainbowGradient = generateRainbowGradient();
console.log(rainbowGradient);
// 生成等距的色相渐变
const hueGradient = generateHueGradient(red, 5);
console.log(hueGradient); // [ {b: 0, g: 0, r: 255}, {b: 0, g: 255, r: 204}, {b: 102, g: 255, r: 0}, {b: 255, g: 102, r: 0}, {b: 255, g: 0, r: 204} ]
// 生成同色相不同亮度渐变
const lightnessGradient = generateLightnessGradient(red, 5);
console.log(lightnessGradient); // [ {b: 0, g: 0, r: 0}, {b: 0, g: 0, r: 128}, {b: 0, g: 0, r: 255}, {b: 128, g: 128, r: 255}, {b: 255, g: 255, r: 255} ]
// 生成互补色渐变
const complementaryGradient = generateComplementaryGradient(red, 5);
console.log(complementaryGradient); // [ {b: 255, g: 255, r: 0}, {b: 151, g: 128, r: 151}, {b: 0, g: 0, r: 255}, {b: 255, g: 255, r: 0} ]
// 生成三色渐变(基础色+分裂互补色)
const triadicGradient = generateTriadicGradient(red, 2);
console.log(triadicGradient); // [ {b: 0, g: 255, r: 0}, {b: 0, g: 0, r: 255}, {b: 255, g: 0, r: 0}, {b: 0, g: 255, r: 0} ]
// 生成视觉均匀的渐变(基于CIEDE2000色差)
const perceptuallyUniformGradient = generatePerceptuallyUniformGradient(red, yellow, 5);
console.log(perceptuallyUniformGradient); // [ {b: 0, g: 0, r: 255}, {b: 0, g: 108, r: 255}, {b: 0, g: 161, r: 255}, {b: 0, g: 209, r: 255}, {b: 0, g: 255, r: 255} ]
// 查找渐变中最接近目标色的位置 (0-1)
const position = findColorPositionInGradient(
[
{ b: 0, g: 0, r: 255 } as RGB,
{ b: 0, g: 255, r: 204 } as RGB,
{ b: 102, g: 255, r: 0 } as RGB,
{ b: 255, g: 102, r: 0 } as RGB,
{ b: 255, g: 0, r: 204 } as RGB
],
red
);
console.log(position);
// 解析CSS颜色值-rgb()
const cssColor = cssToRgb('rgb(245, 63, 63)');
console.log(cssColor); // {b: 63, g: 63, r: 245}
// 解析CSS颜色值-rgba()
const cssColor2 = cssToRgb('rgba(245, 63, 63, 0.5)');
console.log(cssColor2); // {b: 63, g: 63, r: 245}
// 解析CSS颜色值-hsl()
const cssColor3 = cssToRgb('hsl(0, 90%, 60%)');
console.log(cssColor3); // {b: 61, g: 61, r: 245}
// 解析CSS颜色值-十六进制
const cssColor4 = cssToRgb('#f53f3f');
console.log(cssColor4); // {b: 63, g: 63, r: 245}
// 解析CSS颜色值-颜色名
const cssColor5 = cssToRgb('red');
console.log(cssColor5); // {b: 0, g: 0, r: 255}
// RGB转CSS字符串-hex
const cssString = rgbToCss(cssColor);
console.log(cssString); // #f53f3f
// RGB转CSS字符串-rgb
const cssString2 = rgbToCss(cssColor2, 'rgb');
console.log(cssString2); // rgb(245, 63, 63)
// RGB转CSS字符串-rgba
const cssString3 = rgbToCss(cssColor2, 'rgba', 0.5);
console.log(cssString3); // rgba(245, 63, 63, 0.5)
// RGB转CSS字符串-hsl
const cssString4 = rgbToCssHsl(cssColor3);
console.log(cssString4); // hsl(0, 90%, 60%)
// RGB转CSS字符串-hsla
const cssString5 = rgbToCssHsl(cssColor2, 0.5);
console.log(cssString5); // hsla(0, 90%, 60%, 0.5)
// RGB转CSS变量字符串
const cssVarString = rgbToCssVariables(cssColor);
console.log(cssVarString); // --color-r: 245;\n--color-g: 63;\n--color-b: 63;\n--color-rgb: 245, 63, 63;\n--color-hex: #f53f3f;
// RGB转GL数组
const glColor = rgbToGl(cssColor);
console.log(glColor); // [ 0.9607843137254902, 0.24705882352941178, 0.24705882352941178, 1 ]
// GL数组转RGB
const glColor2 = glToRgb([0.9607843137254902, 0.24705882352941178, 0.24705882352941178, 1]);
console.log(glColor2); // {b: 63, g: 63, r: 245}
// 获取CSS名称
const cssName = getCssColorName({ r: 255, g: 0, b: 0 } as RGB);
console.log(cssName); // red
// 检查字符串是否为CSS颜色值
const isCssColor = isValidCssColor('red');
console.log(isCssColor); // true
const isCssColor2 = isValidCssColor('#00bc79');
console.log(isCssColor2); // true
const isCssColor3 = isValidCssColor('rgb(255, 0, 0)');
console.log(isCssColor3); // true
const isCssColor4 = isValidCssColor('hsl(0, 90%, 60%)');
console.log(isCssColor4); // true
const isCssColor5 = isValidCssColor('invalid');
console.log(isCssColor5); // false
// 获取所有CSS颜色名称
const allCssNames = getAllCssColorNames();
console.log(allCssNames);
// CSS颜色字符串转为其他格式-RGB字符串
const cssColor6 = convertCssColor('#00BC79', 'rgb');
console.log(cssColor6); // rgb(0, 188, 121)
// CSS颜色字符串转为其他格式-HSL字符串
const cssColor7 = convertCssColor('#00BC79', 'hsl');
console.log(cssColor7); // hsl(159, 100%, 37%)
// CSS颜色字符串转为其他格式-十六进制字符串
const cssColor8 = convertCssColor('rgb(0, 188, 121)', 'hex');
console.log(cssColor8); // #00bc79
// CSS颜色字符串转为其他格式-rgba字符串
const cssColor10 = convertCssColor('hsl(159, 100%, 37%)', 'rgba', 0.5);
console.log(cssColor10); // rgba(0, 189, 123, 0.5)
// 解析CSS渐变-线性渐变
const cssGradient = parseCssGradient('linear-gradient(to right, #ff0000, #00ff00, #0000ff)');
console.log(JSON.stringify(cssGradient)); // {"colors":[{"b":0,"g":0,"r":255},{"b":0,"g":255,"r":0},{"b":255,"g":0,"r":0}],"stops":[0.3333333333333333,0.6666666666666666,1],"type":"linear"}
// 解析CSS渐变-径向渐变
const cssGradient2 = parseCssGradient('radial-gradient(circle, #ff0000, #00ff00, #0000ff)');
console.log(JSON.stringify(cssGradient2)); // {"type":"radial","colors":[{"r":0,"g":0,"b":0},{"r":255,"g":0,"b":0},{"r":0,"g":255,"b":0},{"r":0,"g":0,"b":255}],"stops":[0,0.3333333333333333,0.6666666666666666,1]}
// 创建CSS渐变字符串-线性渐变
const cssGradientString = createCssGradient(
'linear',
[red, yellow, blue] as RGB[],
[0, 0.3, 0.6666666666666666],
90
);
console.log(cssGradientString); // linear-gradient(90deg, #ff0000 0%, #ffff00 30%, #0000ff 66.66666666666666%)
// 创建CSS渐变字符串-径向渐变
const cssGradientString2 = createCssGradient(
'radial',
[red, yellow, blue] as RGB[],
[0, 0.3, 0.6]
);
console.log(cssGradientString2); // radial-gradient(90deg, #ff0000 0%, #ffff00 30%, #0000ff 60%)
类型定义
/**
* interface.uts
* uts插件接口定义文件,按规范定义接口文件可以在HBuilderX中更好的做到语法提示
*/
/**
* RGB 颜色表示
*/
export type RGB = {
r : number; // 红色通道 (0-255)
g : number; // 绿色通道 (0-255)
b : number; // 蓝色通道 (0-255)
}
/**
* HSL 颜色表示
*/
export type HSL = {
h : number; // 色相 (0-360)
s : number; // 饱和度 (0-1)
l : number; // 亮度 (0-1)
}
/**
* HSV 颜色表示
*/
export type HSV = {
h : number; // 色相 (0-360)
s : number; // 饱和度 (0-1)
v : number; // 明度 (0-1)
}
/**
* CMYK 颜色表示
*/
export type CMYK = {
c : number; // 青色 (0-1)
m : number; // 品红色 (0-1)
y : number; // 黄色 (0-1)
k : number; // 黑色 (0-1)
}
/**
* LAB 颜色表示
*/
export type LAB = {
l : number; // 亮度 (0-100)
a : number; // 绿色-红色 (-128 to 127)
b : number; // 蓝色-黄色 (-128 to 127)
}
/**
* XYZ 颜色表示
*/
export type XYZ = {
x : number;
y : number;
z : number;
}
/**
* 解析 CSS 渐变结果
*/
export type ParseCSSGradientResult = {
type : 'linear' | 'radial'; // 渐变类型,如 linear、radial、repeating-linear、repeating-radial
colors: RGB[]; // 渐变颜色数组
stops: number[]; // 渐变位置数组
}
结语
kux 不生产代码,只做代码的搬运工,致力于提供uts 的 js 生态轮子实现,欢迎各位大佬在插件市场搜索使用 kux 生态插件:https://ext.dcloud.net.cn/search?q=kux
友情推荐
- TMUI4.0:包含了核心的uts插件基类.和uvue组件库
- UxFrame 低代码高性能UI框架:低代码高性能UI框架
- GVIM即时通讯模版:GVIM即时通讯模版,基于uni-app x开发的一款即时通讯模版
- t-uvue-ui:T-UVUE-UI是基于UNI-APP X开发的前端UI框架
- uXui: graceUI作者的免费开源组件库
- wx-ui 基于uni-app x开发的高性能混合UI库:基于uni-app x开发的高性能混合UI库,集成 uts api 和 uts component,提供了一套完整、高效且易于使用的UI组件和API,让您以更少的时间成本,轻松完成高性能应用开发。
- firstui-uvue:FirstUI(unix)组件库,一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。
- easyXUI 不仅仅是UI 更是为UniApp X设计的电商模板库:easyX 不仅仅是UI库,更是一个轻量、可定制的UniAPP X电商业务模板库,可作为官方组件库的补充,始终坚持简单好用、易上手