如何根据背景颜色动态修改文本颜色

发布于 2021-08-02 19:54:18 字数 4251 浏览 1238 评论 0

设计选择文本颜色(前景色)一般都是在背景颜色的基础做选择。如果背景颜色是亮色,文本颜色就是暗色;如果背景颜色是暗色,文本颜色就亮色。因为这是亮色和暗色的配合,文本更容易阅读。

那么我们如何利用Sass在背景色的基础上选择合适的文本颜色呢?

我们将以通知信息(notification message)组件做为示例。我们先从 HTML 结构开始:

<p class="notification notification-confirm">Confirmation</p>
<p class="notification notification-warning">Warning</p>
<p class="notification notification-alert">Alert</p>

我们有三种类型的通知信息:确认、预警和警告。我们希望他们有不同的背景色和文本颜色。确认使用绿色(confirm),黄色表示预警(warning),红色表示警告(alert)。而我们的文本颜色是根据背景颜色的对比度来实现。

我们来创建一个Sass函数,使我们变得更轻松:

@function set-notification-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // 如果背景色为亮色,返回的文本色为暗色
  } @else {
    @return #ffffff; // 如果背景色为暗色,返回的文本色为亮色
  }
}

在这里,我们使用了Sass自带的lightness()函数来确定背景颜色是哪种类型。lightness()是 Sass 内置的一个函数,他返回的值是一个颜色的RGB值,这个值介于0到100。其中0表示最暗,而100表示最亮。

lightness()是Sass中的一个内置函数,说得更为确切一点,lightness($color) 所表示的是从一个颜色中获取亮度(lightness)值。例如lightness(#7ab)函数,其返回的是#7ab颜色的亮度值,此值为 60%

所以这个函数功能告诉我们,如果我们调用的颜色,其“lightness”(亮度)大于50,这意味着我们引入的是一个浅(亮)颜色,反之,其返加的值小于50就是一个深(暗)颜色,因此我们需要确保他们有一个良好的对比色。否则我们返回的是一个亮色。

我们来看一个具体的实例:

$notification-confirm: hsla(101, 72%, 37%, 1);  // Green
$notification-warning: #ffc53a;                 // Yellow
$notification-alert: rgb(172, 34, 34);          // Red

%notification {
  border-radius: 10px;
  display: block;
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 1em 2em;
  margin: 1em auto;
  width: 30%;
  text-align: center;
}

.notification {
  @extend %notification;
}
.notification-confirm {
  background: $notification-confirm;
  color: set-notification-text-color($notification-confirm);
}
.notification-warning {
  background: $notification-warning;
  color: set-notification-text-color($notification-warning);
}
.notification-alert {
  background: $notification-alert;
  color: set-notification-text-color($notification-alert);
}

我们有了这个功能,我们只要知道通知信息(notification message)的背景颜色,就会动态返回需要的文本颜色。

这样做是件美妙的事情,如果我们修改了背景颜色变量值,文本颜色就会动态更新到适合背景颜色。

这是如何使用Sass动态生颜色的一个简单的示例。我敢肯定你能想到这个办法。如果你有使用Sass颜色函数的其他经验,欢迎在下面的评论中与我一起分享。

brightness()函数提供了一个更先进的获取颜色亮度值的Sass函数功能。详细请参阅John W. Long写的 brightness()函数功能

brightness()函数的详细代码如下所示:

//_brightness.scss

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

@function brightness($color) {
  // Extract color components
  $red-component: red($color);
  $green-component: green($color);
  $blue-component: blue($color);

  // Calculate a brightness value in 3d color space between 0 and 255
  $number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);

  // Convert to percentage and return
  @return 100% * $number / 255;
}

@function contrasting-color($color, $light, $dark) {
  @if brightness($color) < 65% {
    @return $light;
  } @else {
    @return $dark;
  }
}

//调用方法
$dark-background-color: #333;
$light-text-color: white;

$light-background-color: #eee;
$dark-text-color: black;

.dark-background {
  background: $dark-background-color;
  color: contrasting-color($dark-background-color, $light-text-color, $dark-text-color);
}

.light-background {
  background: $light-background-color;
  color: contrasting-color($light-background-color, $light-text-color, $dark-text-color);
}

扩展阅读

有关于 Sass 关于颜色功能方面的其他教程:

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

瑾兮

暂无简介

0 文章
0 评论
21332 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。