关于按钮不同状态颜色设计的看法

按钮一般有三种状态：正常、悬停、点击。本来为了方便想做一个小工具生成各种状态的颜色来着，后来还是放弃了，因为这实在是太简单了。

工具大体上是这样的：
分为border和background两种颜色，然后根据不同的状态生成不同的颜色。
相当于笛卡尔积出2*3=6种结果，通过css变量一一对应上预览的按钮。

但我将想法同网友分享后，网友直接甩我less代码，我就不得不放弃了，因为这实在是太简单了。

@color-master: #f51669; // ← change this color

@background-color: @color-master;
@text-color: lighten(@color-master, 45%);
@hover-color: lighten(@color-master, 10%);
@body-color: darken(@color-master, 30%);

.btn-primary {
  color: @text-color;
  background: @background-color;
  border: none;
  max-width: 50%;
}

.btn-primary:hover {
  background: @hover-color;
}

body {
  background: @body-color;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

最终经过编译后就是计算后的颜色值，没有什么兼容性问题（之前考虑filter能用但是兼容性不好，这个直接预编译了）。
less中有lighten和darken两个函数，分别是变亮和变暗，这样就可以很方便的生成不同状态的颜色了。
一般的做法也就同上面一样，hover提亮，active变暗，通过一个小函数就做出来了。
同样的方法在scss中也有。
关于lighten的计算方法：

lighten(@color, @amount) {
  // 将颜色转换为HSL格式
  @hue: hue(@color);
  @saturation: saturation(@color);
  @lightness: lightness(@color);

  // 计算新的亮度值
  @new-lightness: @lightness + (@amount % 100);

  // 限制亮度值在0~100之间
  @new-lightness: max(0, min(@new-lightness, 100));

  // 将HSL值转换为RGB格式
  @rgb: hsl2rgb(@hue, @saturation, @new-lightness);
  @red: extract(@rgb, 1);
  @green: extract(@rgb, 2);
  @blue: extract(@rgb, 3);

  // 构造新的颜色值
  @new-color: rgb(@red, @green, @blue);
  @new-color: ~"#@{colorstr(@new-color)}";

  // 返回新的颜色值
  @return @new-color;
}

附codepen:
https://codepen.io/timkl/pen/PqWxMz