智能小程序 Ray 开发面板 SDK —— 工具方法中颜色 SDK 汇总

颜色

本文介绍了颜色转换相关工具。

HSV 转 RGB

名称

hsv2rgb

描述

将 HSV 模式转化成 RGB 模式。

请求参数

参数	数据类型	说明	是否必填
h	number	色相， 0°~360°	是
s	number	饱和度，0%~100%	是
v	number	明度，0%~100%	是

返回参数

参数	数据类型	说明
rgb	number[]	RGB 的颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { hsv2rgb } = utils;
 
hsv2rgb(h, s, v);
// Example:
hsv2rgb(0, 100, 100);

返回示例

[255, 0, 0];

迁移指南

若已使用过 @ray-js/ray-panel-utils 中的 ColorUtils， 替换时需要注意参数及返回值数据及结构的转换

// before
import { ColorUtils } from '@ray-js/ray-panel-utils';
const { hsvToRgb } = ColorUtils;
 
// 返回值为对象 {r: number, g: number, b: number} 范围 0-255
hsvToRgb(0, 1, 1); // { r: 255, g: 0, b: 0 }
 
// after
import { utils } from '@ray-js/panel-sdk';
const { hsv2rgb } = utils;
 
// 返回值为数组对应 [red, green, blue] 范围 0-255
hsv2rgb(0, 100, 100); // [255, 0, 0];

RGB 转 HSV

名称

rgb2hsv

描述

将 RGB 模式转化成 HSV 模式。

请求参数

参数	数据类型	说明	是否必填
r	number	红色值，0~255	是
g	number	绿色值，0~255	是
b	number	蓝色值，0~255	是

返回参数

参数	数据类型	说明
hsv	number[]	HSV 的值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { rgb2hsv } = utils;
 
rgb2hsv(r, g, b);
// Example:
rgb2hsv(255, 0, 0);
rgb2hsv(128, 1, 0);

返回示例

[0, 100, 100]
{h: 0.46875, s: 100, v: 50.19607843137255}

迁移指南

若已使用过 @ray-js/ray-panel-utils 中的 ColorUtils， 替换时需要注意参数及返回值数据及结构的转换

// before
import { ColorUtils } from '@ray-js/ray-panel-utils';
const { rgbToHsv } = ColorUtils;
 
// 返回值为对象 {h: number, s: number, v: number}, 其中 h(0deg-360deg), s(0-1), v（0-1）。
rgbToHsv(255, 0, 0); // {h: 0, s: 1, v: 1}
 
// after
import { utils } from '@ray-js/panel-sdk';
const { rgb2hsv } = utils;
 
// 返回值为数组对应[h, s, v], 其中 h(0deg-360deg), s(0%-100%), v（0%-100%）。
rgb2hsv(255, 0, 0); // [0, 100, 100]

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。   

HEX 转 HSV

名称

hex2hsv

描述

将十六进制颜色值转化成 HSV 模式。

请求参数

参数	数据类型	说明	是否必填
hex	string	十六进制颜色值	是

返回参数

参数	数据类型	说明
hsv	number[]	HSV 的值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { hex2hsv } = utils;
 
hex2hsv(hex);
// Example:
hex2hsv('#FF00FF');

返回示例

[300, 100, 100];

RGB 转 HEX

名称

rgb2hex

描述

将 RGB 模式转化成十六进制颜色值。

请求参数

参数	数据类型	说明	是否必填
r	number	红色值，0~255	是
g	number	绿色值，0~255	是
b	number	蓝色值， 0~255	是

返回参数

参数	数据类型	说明
hex	string	十六进制颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { rgb2hex } = utils;
 
rgb2hex(r, g, b);
// Example:
rgb2hex(255, 255, 255);

返回示例

#FFFFFF

HEX 转 RGBA

名称

hex2rgbString

描述

将十六进制颜色值转化成 RGBA 模式。

请求参数

参数	数据类型	说明	是否必填
hex	string	十六进制颜色值	是
alpha	number	不透明度	是

返回参数

参数	数据类型	说明
rgba	rgba(r: number, g: number, b: number, a: number)	RGBA 颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { hex2rgbString } = utils;
 
hex2rgbString(hex, alpha);
// Example:
hex2rgbString('#FF00FF', 1);

返回示例

rgba(255, 0, 255, 1);

HSV 转 RGBA

名称

hsv2rgbString

描述

将 HSV 模式转化成 RGBA 模式。

请求参数

参数	数据类型	说明	是否必填
h	number	色相， 0°~360°	是
s	number	饱和度，0%~100%	是
v	number	明度，0%~100%	是
alpha	number	不透明度	是

返回参数

参数	数据类型	说明
rgba	rgba(r: number, g: number, b: number, a: number)	RGBA 颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { hsv2rgbString } = utils;
 
hsv2rgbString(h, s, v, alpha);
// Example:
hex2rgbString(231, 231, 231, 1);

返回示例

rgba(0, 38, 255, 1);

亮度色温转 RGB

名称

brightKelvin2rgb

描述

将亮度色温转 RGB 颜色模式

请求参数

参数	数据类型	说明	是否必填
bright	number	亮度	是
temperature	number	色温	是
kelvinMin	number	最小开尔文值范围(默认2200)	否
kelvinMax	number	最大开尔文值范围（默认6500）	否

返回参数

参数	数据类型	说明
'rgb(r, g, b)'	rgb(red: number, green: number, blue: number)	RGB 颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { brightKelvin2rgb } = utils;
 
brightKelvin2rgb(bright, temperature, { kelvinMin = 2200, kelvinMax = 6500  });
// Example:
brightKelvin2rgb(500, 500);

返回示例

rgb(128, 108, 89);

RGB 值的数组转换为 RGB 颜色的字符串

名称

rgb2RgbString

描述

将 RGB 值的数组转换为 RGB 颜色的字符串表示

请求参数

参数	数据类型	说明	是否必填
originRgb	number[]	RGB值的数组	是
a	number	alpha值（0-1）（可选）	否

返回参数

参数	数据类型	说明
'rgb(r, g, b)'	rgb(red: number, green: number, blue: number)	RGB 颜色值

请求示例

import { utils } from '@ray-js/panel-sdk';
const { rgb2RgbString } = utils;
 
rgb2RgbString([r, g, b]);
// Example:
rgb2RgbString([255, 0, 0]);

返回示例

rgb(255, 0, 0);

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。