根据背景颜色计算文本颜色

问题描述：

我想为文本颜色创建一个变量，但要取决于我设置的背景颜色.

I'd like to create a variable for the text color, but depending to the background color that I've set.

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color: red; /* calculate white or black */
  --main-dark-text-color: red; /* calculate white or black */
  --main-light-text-color: red; /* calculate white or black */
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

答

您可以考虑以下事实:具有负光度的颜色始终为黑色，而白色为光度大于 100％的颜色>.

You can consider the fact that a color with negative luminosity is always black and a white color is a color with luminosity bigger than 100%.

这里是我使用 calc(30％-luminsity)的想法，如果亮度小于30％(白色)，它将返回正值；如果亮度小于30％(白色)，则将返回负值.发光度大于30％(黑色).我将所有内容乘以 100 以在正值较小的情况下始终为白色.

Here is an idea where I use calc(30% - luminosity) which will return a positive value if the luminosity is less than 30% (white color) and will return a negative value if the luminosity bigger than 30% (black color). I multiply everything by 100 to always have white in case of small positive value.

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color:       hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color:  hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color:       hsl(0,100%, calc((30% - var(--main-color-luminosity))     *100)); 
  --main-dark-text-color:  hsl(0,100%, calc((30% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)*1.5) *100)); 
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

另一个示例，您将阈值更改为25％，并注意到第一种颜色将如何切换为黑色

Another example where you change the threshold to 25% and notice how the first color will switch to black

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color:       hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color:  hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color:       hsl(0,100%, calc((25% - var(--main-color-luminosity))     *100)); 
  --main-dark-text-color:  hsl(0,100%, calc((25% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,100%, calc((25% - var(--main-color-luminosity)*1.5) *100)); 
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

根据背景颜色计算文本颜色

相关推荐