实现rgba与hsla的相互转化

古老的大月亮

已于 2024-05-27 09:33:48 修改

阅读量632

点赞数 5

文章标签： javascript 前端开发语言

于 2024-02-27 11:07:31 首次发布

本文链接：https://blog.csdn.net/m0_74382023/article/details/136317160

版权

需求：

需要实现一个取色板和input输入的形式实现对颜色的选中

难点：

rgb与hsl模式的转化(以下是转化代码的实现)

这里实际上只是对rgb与hsl进行转化（a：透明度不用转化，直接赋值就行了）

// 对计算后产生的小数位数限制为5位
const decimalLength = 5;

// 将hsl模式的颜色转化为rgb模式
export function hslToRgb(h, s, l) {
  h /= 360; // 色相需要从角度转为0-1之间的小数
  s /= 100; // 饱和度需要从百分比转为0-1之间的小数
  l /= 100; // 亮度也需要从百分比转为0-1之间的小数

  let r, g, b;

  if (s === 0) {
    // 如果饱和度为0，则颜色为灰色，R、G、B值相同且等于亮度
    // 255 后即为0-255之间的RGB值
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) re