CSS-具有浅阴影颜色的文本和具有较深颜色的前景

Question

这只是一个美学问题，但是问题是我有随机颜色的文本列表，但是它们都是浅色/亮色（必须是），这使得它们很难在白色背景上阅读。我将该颜色设置为文本阴影，我希望文本本身具有更深的可读性颜色，类似于主要的浅色

我的问题是，如果我设置文本亮度或将其alpha设置为较低的黑色，则它看起来太灰了，并且我希望它变得越深，使其饱和度就越高，因此它将保留主色更明显：

或

我可以使用任何CSS混合器或公式来实现这些结果之一吗？

Answer 1

我设法通过同时使用css函数来实现亮度（0.6）和对比度（200％）。这些值可以更改，但我建议仅更改亮度（您想要文本的深色程度），因为该对比度值已经为深色文本提供了很好的颜色

Answer 2

我了解您要查找的内容，但仅靠CSS无法真正有效地将其存档，我建议使用sass .scss，并使用以下代码：

$primary-color: #444;

//set text color function
@function set-text-color($color){
    @if (lightness($color) > 40){
        @retrun #000;
    }
    else{
        @retrun #fff;
    }
}

/*the above function will 
retrun black if the primary-color is light and 
return white if the primary color is dark */

body{
    background: $primary-color;
    color: set-text-color($primary-color);
}

，其中原色是基本文字颜色。您可以调整该功能以返回与您在较暗或较亮状态下使用的颜色相似的颜色。