更新记录

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 颜色名称映射
  • 颜色亮度和对比度调整
  • 颜色提取和分析

安装方法

  1. 插件市场搜索并导入 kux-colors-helper
  2. 项目中引入并使用
// 在 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 颜色
  • 返回值:HSL

hslToRgb(hsl: HSL): RGB

  • 说明:将 HSL 转换为 RGB
  • 参数:
    • hsl: HSL 颜色
  • 返回值:RGB

rgbToHsv(rgb: RGB): HSV

  • 说明:将 RGB 转换为 HSV
  • 参数:
    • rgb: RGB 颜色
  • 返回值:RGB

hsvToRgb(hsv: HSV): RGB

  • 说明:将 HSV 转换为 RGB
  • 参数:
    • hsv:HSV 颜色
  • 返回值:RGB

rgbToCmyk(rgb: RGB): CMYK

  • 说明:将 RGB 转换为 CMYK
  • 参数:
    • rgb:RGB 颜色
  • 返回值:CMYK

cmykToRgb(cmyk: CMYK): RGB

  • 说明:将 CMYK 转换为 RGB
  • 参数:
    • cmyk:CMYK 颜色
  • 返回值:RGB

rgbToXyz(rgb: RGB): XYZ

  • 说明:将 RGB 转换为 XYZ
  • 参数:
    • rgb:RGB 颜色
  • 返回值:XYZ

xyzToRgb(xyz: XYZ): RGB

  • 说明:将 XYZ 转换为 RGB
  • 参数:
    • xyz:XYZ 颜色
  • 返回值:RGB

xyzToLab(xyz: XYZ): LAB

  • 说明:将 XYZ 转换为 LAB
  • 参数:
    • xyz:XYZ 颜色
  • 返回值:LAB

labToXyz(lab: LAB): XYZ

  • 说明:将 LAN 转换为 XYZ
  • 参数:
    • lab:LAB 颜色
  • 返回值:XYZ

rgbToLab(rgb: RGB): LAB

  • 说明:将 RGB 转换为 LAB
  • 参数:
    • rgb:RGB 颜色
  • 返回值:LAB

labToRgb(lab: LAB): RGB

  • 说明:将 LAB 转换为 RGB
  • 参数:
    • lab:LAB 颜色
  • 返回值:RGB

rgbToHex(rgb: RGB): string

  • 说明:将 RGB 转换为 # 开头的十六进制字符串
  • 参数:
    • rgb:RGB 颜色
  • 返回值:string

hexToRgb(hex: string): RGB

  • 说明:将 #开头的十六进制字符串转换为 RGB
  • 参数:
    • hex:string
  • 返回值:RGB

hslToHsv(hsl: HSL): HSV

  • 说明:将 HSL 转换为 HSV
  • 参数:
    • hsl:HSL 颜色
  • 返回值:HSV

hsvToHsl(hsv: HSV): HSL

  • 说明:将 HSV 转换为 HSL
  • 参数:
    • hsv:HSV 颜色
  • 返回值:HSL

字符串处理

parseRgbString(str: string): RGB

  • 说明:将 RGB 颜色字符串解析为 RGB 对象
  • 参数:
    • str:string
  • 返回值:RGB

rgbToString(rgb: RGB): string

  • 说明:将 RGB 对象转换为 RGB 颜色字符串
  • 参数:
    • rgb:RGB 对象
  • 返回值:string

parseHslString(str: string): HSL

  • 说明:将 HSL 颜色字符串解析为 HSL 对象
  • 参数:
    • str:string
  • 返回值:HSL

hslToString(hsl: HSL): string

  • 说明:将 HSL 对象转换为 HSL 颜色字符串
  • 参数:
    • hsl:HSL 颜色对象
  • 返回值:string

灰度处理

rgbToGrayscale(rgb: RGB): number

  • 说明:将 RGB 对象转换为灰度值,采用的加权平均值
  • 参数:
    • rgb:RGB 颜色对象
  • 返回值:number

rgbToGray(rgb: RGB): RGB

  • 说明:将 RGB 转换为灰度 RGB
  • 参数:
    • rgb:RGB 颜色对象
  • 返回值:RGB

色差计算

colorDifference(lab1: LAB, lab2: LAB): number

  • 说明:计算两个颜色之间的 CIEDE2000色差值
  • 参数:
    • lab1:第一个 LAB 颜色对象
    • lab2:第二个 LAB 颜色对象
  • 返回值: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' 格式)
  • 返回值:CSS 颜色字符串

rgbToCssHsl(color: RGB, alpha: number | null = null): string

  • 说明:将 RGB 对象转换为 CSS HSL字符串
  • 参数:
    • color:RGB 对象
    • alpha: 透明度(可选)
  • 返回值:CSS HSL字符串

rgbToCssVariables(color: RGB, prefix: string = 'color'): string

  • 说明:将 RGB 对象转换为 CSS 变量字符串
  • 参数:
    • color:RGB 对象
    • prefix: 变量前缀
  • 返回值:CSS 变量字符串

rgbToGl(color: RGB): number[]

  • 说明:将 RGB 对象转换为 GL 格式数组(0-1范围)
  • 参数:
    • color:RGB 对象
  • 返回值:GL 格式颜色值数组

glToRgb(glColor: number[]): RGB

  • 说明:将 GL 格式数组转换为 RGB 对象
  • 参数:
    • glColor:number[]
  • 返回值:RGB 对象

getCssColorName(color: RGB): string | null

  • 说明:获取 CSS 颜色名称(参考SVG1.0、SVG2.0、W3C标准内置了148种颜色名称)
  • 参数:
    • color:RGB 对象
  • 返回值:内置颜色名称

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 渐变字符串
  • 返回值: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

友情推荐

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问