CSS – 实战 Color

前言

之前 W3Schools 学习笔记 (1) 也记入过 Color, 这篇整理一下在网页开发中, 颜色是如果被处理的.

网页都有什么颜色?

网页篇幅最大的颜色, 通常是来自图片, 不管是背景图, 还是内容图片. 这些都是比较 colorful 的.

其次是黑白灰, 因为除了图片, 大部分内容都是文字. 而文字比较舒服的阅读色就是白纸黑字 (dark mode 就另外说).

其余的地方, 比如 button, 卡片, 背景色等等, 这些就是主色, 邻近色, 补色的发挥场地了.

选主色, 邻近色, 补色

参考: 平面设计 – 色轮 & 配色

为什么要这样分类?

因为在用色的时候, 其实我们并不关心具体使用什么颜色, 我们关心的是表达主次.

比如有几张卡片, 白色很单调, 我可以放主色, 如果我想更丰富一些, 那每张卡就用不同色, 各自放邻近色.

卡内有个 call to action, 想它亮起来就用个补色. 把具体颜色抽象出来, 只表达颜色的意图, 这样就可以换 theme (color) 但不换意图.

怎么选?

我不是设计师, 所以没办法通过品牌, 形象, 从色彩心理学选出适合网页的颜色.

通常我会从原有的资源入手, 比如 logo 用色, 宣传单用色, 甚至其它同行的用色, 从中选出一个主色.

有了主色就可以通过色轮选出邻近色和补色了.

选好颜色后, CSS 可以这样声明

$color-primary: hsl(206, 94%, 28%);
$color-analogous-b1: hsl(207, 100%, 17%);
$color-analogous-s1: hsl(195, 100%, 43%);
$color-analogous-s2: hsl(169, 66%, 56%);
$color-complementary: hsl(49, 100%, 62%);

主色, 邻近色, 补色. 邻近色通常会选好几个, 可以通过 s1 small, b1 big 来做区分.

给了例子

这个 logo 里有 2 个颜色. 红和蓝

红色可以作为主色, 但是它有点刺眼. 我们可以通过单色弱化它.

蓝色对红色是三角色, 而且它是深色系, 我们可以改色调取代黑灰色.

最后确认一下它们的 constrast 过, 那么就可以用了.

效果 (请无视中间的 logo /.\)

黑白灰色调

白色就是纯白 rgb(255, 255, 255)

黑却不是纯黑, 可能是纯黑太过黑暗了...通常会用 primary - 亮度让它变成接近黑色, 或者用灰色调成低调黑.

灰色则会分出很多色调, 在黑白之间, 想表达出层次, 主次, 就需要多个色调,

想象一下, 大设计师通常是不上色作画的, 他们会先搞黑白灰, 但通过色调已经看出层次. 最后才上色

色调一般分为: 白，粉，明，鲜, 高级灰，深，黑

CSS 可以这样声明

$color-gray-100: hsl(0, 0%, 98%);
$color-gray-200: hsl(0, 0%, 95%);
$color-gray-300: hsl(0, 0%, 93%);
$color-gray-400: hsl(0, 0%, 75%);
$color-gray-500: hsl(0, 0%, 60%);
$color-gray-700: hsl(0, 0%, 13%);
$color-black: $color-gray-700;

选了最深的灰色作为黑色.

代表色

除了主色, 邻近色, 补色, 黑白灰, 网站还会有一些代表色,

比如红色代表 alert, 橙色代表 warning, 蓝色代表 info 等等.

至于红色要用什么色调就看喜好了, 因为区别不是很大.

CSS 可以这样声明

$color-red: hsl(2, 77%, 45%);

背景色和字体颜色

字体颜色通常是黑或白, 蓝色代表 link, 很少会用其它颜色.

而使用黑还是白, 取决于它的背景色. 为了让字体能被看清 (contrast), 建议在设置背景色时同时设置字体色.

&:hover {
  background-color: $color-primary;
  color: auto-font-color($color-primary);
}

通常它两是有对比关系的, 深色背景就要配白色字, 相反浅色的背景就配黑色的字.

这个 auto color 可以用 Sass 来实现

@function auto-font-color($background-color) {
  @return if(color.lightness($background-color) > 50%, $color-black, white);
}

如果想用 pure CSS 做到这点, 也是可以的.

参考:

CSS-Tricks – Switch font color for different backgrounds with CSS

Calculating Color: Dynamic Color Theming with Pure CSS

Can I use color-contrast() color-contrast 目前所有游览器都还不支持

:root {
  --color-primary-l: 50%;
  --color-primary: hsl(156, 100%, var(--color-primary-l));
  --contrast-threshold: 60%;
}
 
.container {
  background: var(--color-primary);
  --switch: calc((var(--color-primary-l) - var(--contrast-threshold)) * -100);
  color: hsl(0, 0%, var(--switch));
}

首先需要把颜色的明度单独区分出来, 因为判断就是靠明度的.

然后定义临界点 (threshold) 40, 50, 60 都有人用.

然后就是做一个算法. 当 background 的明度高的时候 (比如 80%) 代表亮色, 字体色就是黑色

所以 80 - threshold (60) = 20

然后乘于 - 100 = -200 低于 0 就是黑色了

相反 background 是暗色 20

那么 20 - 60 = - 40 x - 100 = 400, 高于 100 就是白色了

虽然 pure CSS 可以实现, 但是看得出来代码有点乱, 而且它的黑色是绝对的黑色, 不能是灰, 所以我是不推荐使用 pure CSS 来做啦.

CSS variables 颜色 opacity / alpha channel

参考: stackoverflow – How do I apply opacity to a CSS color variable?

正常情况

h1 {
  background-color: hsla(0, 100%, 50%, 0.5);
}

效果

CSS variable color 的情况

:root {
  --color-primary: hsl(0, 100%, 50%);
}
h1 {
  background-color: hsla(var(--color-primary), 0.5);
}

效果

背景色没用出现

解决方式

:root {
  --color-primary: 0, 100%, 50%;
}
h1 {
  background-color: hsla(var(--color-primary), 0.5);
}

variable 指定义 hsl 的 value. 也不是多高明的方法. 但也没有其它办法了.

CSS 4 颜色 opacity / alpha channel

参考: The Ultimate Guide to CSS Colors (2020 Edition)

body {
  // old school
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  background-color: hsl(0, 0%, 0%);
  background-color: hsla(0, 0%, 0%, 0.5);
 
  // CSS 4
  background-color: rgb(0 0 0);
  background-color: rgb(0 0 0 / 0.5);
  background-color: hsl(0 0% 0%);
  background-color: hsl(0 0% 0% / 0.5);
}

区别

1. seperator 不同了, 之前是逗号 comma, 现在换成空格 space

2. 去掉了 a, rgba 和 hsla 结尾的 a 都去掉了

3. 用 slash 来表示 alpha channel

p.s 如果用 Sass 的话, 会 compile 去旧的写法哦.

目前实战版本

$color-collection: (
  primary: hsl(206, 94%, 28%),
  complementary: hsl(49, 100%, 62%),
  "black": hsl(0, 0%, 13%),
  "white": hsl(0, 0%, 100%),
);
@function color($key) {
  @return map-get($color-collection, $key);
}
 
@function color-depend-on-background($background-color) {
  @return if(
    color.lightness($background-color) > 50%,
    var(--color-black),
    var(--color-white)
  );
}
 
@mixin root-color($color-collection) {
  @each $color-key-value in $color-collection {
    // note 解忧: + '' 是为了 clear sass warning
    --color-#{'' + list.nth($color-key-value, 1)}: #{list.nth(
        $color-key-value,
        2
      )};
    --color-#{'' + list.nth($color-key-value, 1)}-value: #{color.hue(
          list.nth($color-key-value, 2)
        ),
      color.saturation(list.nth($color-key-value, 2)),
      color.lightness(list.nth($color-key-value, 2))};
  }
}
 
:root {
  @include root-color($color-collection);
}
h1 {
  border: 1px solid var(--color-complementary);
  background-color: hsla(var(--color-primary-value), 0.5);
  color: color-depend-on-background(color("primary"));
}

结合 Sass 使用, color depend on background 用 Sass 实现.

WhatsApp 的颜色 Contrast 问题

依据 WhatsApp Colors, 它有 3 个主要颜色

Teal Green = #128C7E

Teal Green Dark = #075E54

Light Green = #25D366

它会遇到 Contrast 问题.

Teal Green 的 HSL 是 173°, 77%, 31% 明度 31% 偏暗, Contrast should be 是 白色.

但白色的 Contrast 是不及格的.

用黑色才可以, 但不好看丫

所以即使是 WhatsApp 官网的例子也是不及格的.

但为什么平时没察觉到问题呢?

因为我们常看手机的绿色并不是上面三种的任何一种...也是醉了

这个颜色是 #008069 (169°, 100%, 25%)

Dark Mode

如果网站要支持 dark mode，那就需要 declare 2 个 primary color，一个 for light，一个 for dark。

类似这样

$primary-container-light : white;
$primary-container-dark : rgba(black, 0.87);
$primary-on-container-light : rgba(black, 0.87);
$primary-on-container-dark : white;
 
h1 {
  padding: 56px;
  background-color: $primary-container-light;
  color: $primary-on-container-light;
}
 
@media (prefers-color-scheme: dark) {
  h1 {
    background-color: $primary-container-dark;
    color: $primary-on-container-dark;
  }
}

效果

Chrome 游览器测试 dark mode：

1. F12 open Developer tools

   

2. Rendering Tab

   

还有一种方式是换 Chrome setting：

1. 访问 chrome://flags/#enable-force-dark

2. enable Auto Dark Mode for Web Contents

   

不过这个方法视乎对 CSS prefers-color-scheme 无效，不是很清楚原因，建议用上一种方式做测试。