Chroma Panel

搜索文档

查找页面或章节

EN

在 HSVA、RGBA、HSLA 和 HWBA 对象之间转换。

这些函数用于在 HSVA、RGBA、HSLA 和 HWBA 对象之间转换。如果输入或输出是 CSS 字符串,请使用解析序列化。结果不会取整,因此浮点数可能带有多余的小数位。

import { hsvaToRgba, hsvaToHsla, hslaToHsva } from "chroma-panel";

RGB 转 HSL 需要经过 HSVA:

import { rgbaToHsva, hsvaToHsla } from "chroma-panel";
 
hsvaToHsla(rgbaToHsva({ r: 51, g: 102, b: 204, a: 1 }));
// { h: 220, s: 60, l: 50, a: 1 }

API 参考

function hsvaToRgba(hsva: Hsva): Rgba

HSVA to RGBA.

function rgbaToHsva(rgba: Rgba): Hsva

RGBA to HSVA. Hue is undefined at zero saturation, so this cannot round-trip a grayscale color on its own — see ingest.

function hsvaToHsla(hsva: Hsva): Hsla

HSVA to HSLA.

function hslaToHsva(hsla: Hsla & { a: number; }): Hsva

HSLA to HSVA.

function hsvaToHwba(hsva: Hsva): Hwba

HSVA to HWBA.

function hwbaToHsva(hwba: Hwba): Hsva

HWBA to HSVA.

保留色相和饱和度

HSV 有两处会丢失信息。饱和度为零时,色相就无从谈起;亮度为零时,色相和饱和度都没有意义。从 HSVA 转成其他模型再转回来,这些信息就丢了。

如果颜色要经过另一种模型再转回来,请保留原始的 HSVA 值,把结果合并进去:

function ingest(next: Hsva, prev: Hsva): Hsva

Merges a change into an existing color rather than replacing it, keeping the hue and saturation that other models drop at the extremes. This is why dragging brightness to black and back returns the color you started with.

比较与限制范围

function sameHsva(a: Hsva, b: Hsva): boolean

Whether two colors are equal channel for channel. Useful for skipping redundant work in a change handler.

function clamp(value: number, min: number, max: number): number

Constrains a number to a range.

function normalizeHue(h: number): number

Wraps a hue into 0-360, so 370 becomes 10.