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

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>

Answer 2

也许是这样：#f0f19c, #bec020, #acad4c, #dddf90, #eaebb2, #d7d95a:

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

Converting a palette to another color

css

hex

colors