css - 将调色板转换为另一种颜色

Question

我正在尝试将整个网站的页面从粉红色转换为绿色。他们使用的粉色调色板可以很好地协同工作，我需要将调色板转换为绿色版本，但似乎无法让它一起工作。

当前调色板

#fff0f0

#b18585

#b18597

#ffe3e2

#ffe9e9

#f9c4d2

关于如何将这些颜色转换成绿色调色板有什么建议吗？

Answer 1

将所有颜色从 HEX 转换为 HSL，然后将每种颜色的色调(第一个数字)调整 120 度。

如果你愿意，然后转换回十六进制，但实际上没有必要，CSS 支持 HSLA。

例子:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  height: 50px;
  width: 33.33%;
  border: 1px solid grey;
}

.pink.a {
  background: hsla(0, 25%, 50%, 1)
}

.green.a {
  background: hsla(120, 25%, 50%, 1)
}

.pink.b {
  background: hsla(0, 22%, 61%, 1)
}

.green.b {
  background: hsla(120, 22%, 61%, 1)
}

.pink.c {
  background: hsla(335, 22%, 61%, 1)
}

.green.c {
  background: hsla(95, 22%, 61%, 1) /* 355 + 120 - 360 = 95*/
}

<div class="pink a"></div>
<div class="pink b"></div>
<div class="pink c"></div>

<div class="green a"></div>
<div class="green b"></div>
<div class="green c"></div>