颜色
本文介绍了颜色转换相关工具。
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 小程序开发。