更新记录

1.0.6（2024-03-29）

• 修复部分颜色 generate 暗黑模式下色相临界点异常问题。

1.0.5（2024-03-28）

• 适配ios的js引擎 (需uni版本4.10及以上)

1.0.4（2024-03-26）

• 修复部分颜色 generate 暗黑模式下饱和度超出范围值问题。

平台兼容性

kux-color

此插件为uts 专用的颜色转换和主题色生成工具。支持目前主流颜色格式相互转换，如 rgb，hex，hsv 和 hsl 的相互转换。

API概览

API 使用示例

rgb2hsl 示例

import { rgb2hsl } from '@/uni_modules/kux-color';

const hslColor = rgb2hsl(255, 0, 0);
console.log(hslColor); // 输出：{ h: 0, s: 1, l: 0.5 }

rgb2hsv 示例

import { rgb2hsv } from '@/uni_modules/kux-color';

const hsvColor = rgb2hsv(0, 188, 121);
console.log(hsvColor); // 输出：{ h: 159, s: 1.0, v: 0.74 }

rgb2hex 示例

import { rgb2hex } from '@/uni_modules/kux-color';

const hexColor = rgb2hex(255, 87, 51);
console.log(hslColor); // 输出：#ff5733

hsl2rgb 示例

import { hsl2rgb } from '@/uni_modules/kux-color';

const rgbColor = hsl2rgb(0, 1, 0.5);
console.log(rgbColor); // 输出：{ r: 255, g: 0, b: 0 }

hsl2hex 示例

import { hsl2hex } from '@/uni_modules/kux-color';

const hexColor = hsl2hex(251, 0.5, 0.3);
console.log(hexColor); // 输出：#342673

hsv2rgb 示例

import { hsl2rgb } from '@/uni_modules/kux-color';

const rgbColor = hsl2rgb(0, 1, 0.5);
console.log(rgbColor); // 输出：{ r: 255, g: 0, b: 0 }

hsv2hex 示例

import { hsv2hex } from '@/uni_modules/kux-color';

const hexColor = hsv2hex(159, 1.0, 0.74);
console.log(hexColor); // 输出：#0ac785

hex2rgb 示例

import { hex2rgb } from '@/uni_modules/kux-color';

const rgbColor = hex2rgb('#ff5733');
console.log(rgbColor); // 输出：{ r: 255, g: 87, b: 51 }

generate 示例

import { generate } from '@/uni_modules/kux-color';
import { GenerateOptions } from '@/uni_modules/kux-color/utssdk/interface.uts';

// 该参数选项为可选项
const generateOptions: GenerateOptions = {
    dark: false, // 是否暗黑模式
    list: true, // 是否列表模式
    format: 'hex', // 颜色格式
    index: 6 // 索引
};
const colorList = generate('#00BC79', generateOptions);
console.log(colorList); // 输出：["#E8FFF3","#a6e8c8","#73daac","#44cd94","#2fd495","#00BC79","#0aab78","#00855F","#00694E","#004D3C"]

generate 示例【暗黑模式下】

GenerateOptions 的 dark 设置为 true 即可

import { generate } from '@/uni_modules/kux-color';
import { GenerateOptions } from '@/uni_modules/kux-color/utssdk/interface.uts';

// 该参数选项为可选项
const generateOptions: GenerateOptions = {
    dark: true, // 是否暗黑模式
    list: true, // 是否列表模式
    format: 'hex', // 颜色格式
    index: 6 // 索引
};
const colorList = generate('#00BC79', generateOptions);
console.log(colorList); // 输出：["#004D3C","#00694E","#00855F","#0DB580","#0AC785","#4FCA9B","#6CD6AA","#94CFB4","#C0DECF","#E8FFF3"]

darkenColor 示例

import { darkenColor } from '@/uni_modules/kux-color';
import { DarkenColorOptions } from '@/uni_modules/kux-color/utssdk/interface';

const darkenedColor = darkenColor({
    color: '#00BC79',
    amount: 0.1
} as DarkenColorOptions);
console.log(darkenedColor); // 输出：#0a9464

注意

1.0.2 及以上版本支持

darkenGradient 示例

import { darkenGradient } from '@/uni_modules/kux-color';
import { DarkenGradientOptions } from '@/uni_modules/kux-color/utssdk/interface';

const gradientString = 'linear-gradient(to right, rgb(255, 0, 0), #00FF00, hsl(120, 100%, 50%))';
const darkenedGradient = darkenGradient({
    gradientString: gradientString,
    amount: 0.2
} as DarkenGradientOptions);
console.log(darkenedGradient); // 输出：linear-gradient(to right, rgb(163, 0, 0), #0aa30a, hsl(120, 1, 0.28))

注意

1.0.2 及以上版本支持

extractColors 示例

import { extractColors } from '@/uni_modules/kux-color';

const gradientString = 'linear-gradient(to right, rgb(255, 0, 0), #00FF00, hsl(120, 100%, 50%))';
const darkenedColor = extractColors(gradientString);
console.log(darkenedColor); // 输出：["rgb(255, 0, 0)","#00FF00","hsl(120, 100%, 50%)"]

注意

1.0.2 及以上版本支持

extractRGBValues 示例

import { extractRGBValues } from '@/uni_modules/kux-color';

console.log(extractRGBValues('rgb(255, 0, 0)')); // 输出：[255, 0, 0]

注意

1.0.2 及以上版本支持

extractHSLValues 示例

import { extractHSLValues } from '@/uni_modules/kux-color';

console.log(extractHSLValues('hsl(120, 100%, 50%)')); // 输出：[120, 1, 0.5]

注意

1.0.2 及以上版本支持

extractHSVValues 示例

import { extractHSVValues } from '@/uni_modules/kux-color';

console.log(extractHSVValues('hsv(150, 80%, 50%)')); // 输出：[150, 0.8, 0.5]

注意

1.0.2 及以上版本支持

RGB 参数说明

HSL 参数说明

HSV 参数说明

GenerateOptions 参数说明

DarkenColorOptions 参数说明

DarkenGradientOptions 参数说明

UTS 自定义类型

Formats

export type Formats = 
| 'hex'
| 'rgb'
| 'hsl'

RGB

export type RGB = {
    r: number;
    g: number;
    b: number;
};

HSL

export type HSL = {
    h: number;
    s: number;
    l: number;
};

HSV

export type HSV = {
    h: number;
    s: number;
    v: number;
};

HEX

export type HEX = 
| '0'
| '1'
| '2'
| '3'
| '4'
| '5'
| '6'
| '7'
| '8'
| '9'
| 'A'
| 'B'
| 'C'
| 'D'
| 'E'
| 'F';

GenerateOptions

export type GenerateOptions = {
    dark: boolean;
    list: boolean;
    index: number;
    format: Formats;
};

DarkenColorOptions

export type DarkenColorOptions = {
    color: string;
    amount?: number;
    minL?: number;
    maxL?: number;
    format?: Formats;
};

注意

1.0.2 及以上版本支持

DarkenGradientOptions

export type DarkenGradientOptions = {
    gradientString: string;
    amount?: number;
}

注意

1.0.2 及以上版本支持

兼容性

结语

kux 不生产代码，只做代码的搬运工，致力于提供uts 的 js 生态轮子实现，欢迎各位大佬在插件市场搜索使用 kux 生态插件：https://ext.dcloud.net.cn/search?q=kux

QQ群：870628986 点击加入

友情推荐

• TMUI4.0：包含了核心的uts插件基类.和uvue组件库
• GVIM即时通讯模版：GVIM即时通讯模版，基于uni-app x开发的一款即时通讯模版
• t-uvue-ui：T-UVUE-UI是基于UNI-APP X开发的前端UI框架
• UxFrame 低代码高性能UI框架：【F2图表、双滑块slider、炫酷效果tabbar、拖拽排序、日历拖拽选择、签名...】UniAppX 高质量UI库
• 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电商业务模板库，可作为官方组件库的补充,始终坚持简单好用、易上手