css - 获得具有相同色调但另一种颜色的颜色？

Question

在我的 CSS 中，我将 #error div 定义为:

#error {
    border-width:1px;
    border-style:solid;
    border-color: #DD3C10;
    background:#FFEBE8;
    /* Other settings */
}

实际上，上面的代码不是我的 - 我使用了与 Facebook 相同的颜色。现在，我想对 #success div 做同样的事情，但我不知道要使用哪种颜色。我想保持相同的色调(即“全色”和“白色”之间的线上位置)，但要保持绿色而不是红色。我该怎么做？有“公式”吗？

Answer 1

您关心颜色的 HSL 表示中的 L(亮度)分量。您可以在此处找到在线转换器(RGB/HEX 到 HSL):little link .

#DD3C10 的 HSL 为 13° 86% 46%，而 #FFEBE8 为 8° 100% 95%。如您所见，亮度差异为 49%。

假设您的border 绿色是#00FF00，在HSL 中是120° 100% 50%。要计算新的亮度分量，只需添加 49%。因此，背景的绿色是120° 100% 99%，即#FAFFFA。