import { TinyColor } from '@ctrl/tinycolor';
|
|
/**
|
* 将颜色转换为HSL格式。
|
*
|
* HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
|
*
|
* @param {string} color 输入的颜色。
|
* @returns {string} HSL格式的颜色字符串。
|
*/
|
function convertToHsl(color: string): string {
|
const { a, h, l, s } = new TinyColor(color).toHsl();
|
const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
|
return a < 1 ? `${hsl} ${a}` : hsl;
|
}
|
|
/**
|
* 将颜色转换为HSL CSS变量。
|
*
|
* 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
|
* 以便可以作为CSS变量使用。
|
*
|
* @param {string} color 输入的颜色。
|
* @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
|
*/
|
function convertToHslCssVar(color: string): string {
|
const { a, h, l, s } = new TinyColor(color).toHsl();
|
const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
|
return a < 1 ? `${hsl} / ${a}` : hsl;
|
}
|
|
/**
|
* 将颜色转换为RGB颜色字符串
|
* TinyColor无法处理hsl内包含'deg'、'grad'、'rad'或'turn'的字符串
|
* 比如 hsl(231deg 98% 65%)将被解析为rgb(0, 0, 0)
|
* 这里在转换之前先将这些单位去掉
|
* @param str 表示HLS颜色值的字符串
|
* @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回rgb(0, 0, 0)
|
*/
|
function convertToRgb(str: string): string {
|
return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
|
}
|
|
/**
|
* 检查颜色是否有效
|
* @param {string} color - 待检查的颜色
|
* 如果颜色有效返回true，否则返回false
|
*/
|
function isValidColor(color?: string) {
|
if (!color) {
|
return false;
|
}
|
return new TinyColor(color).isValid;
|
}
|
|
export {
|
convertToHsl,
|
convertToHslCssVar,
|
convertToRgb,
|
isValidColor,
|
TinyColor,
|
};
|
