专栏首页京程一灯网页色彩死抠指南

网页色彩死抠指南

网页色彩的使用方式有很多。而我认为,但凡用一件东西,懂得其原理肯定大有裨益。网页色彩也不例外。现在就来死抠一下网页色彩的究竟吧。

颜色混合

众多使用色彩的人,他们对色彩的理解还与孩童时候鼓弄颜料时一样。但电脑上的情形已然不同,因为颜色混合机制有变。你小时候用的是颜料。印刷机里的颜料和墨水含有一种叫做“色素”的微小颗粒,它们相互混合呈现出你眼中所见的色彩。这是减色混合。混合的颜色越多,最终看到的颜色越深,直到变成褐色。基础色就是你以前熟悉的:红、黄、蓝。你通过减色混合调配这些颜色最终会得到褐色。

而在电脑(或任何显示器)上,我们是和光打交道。全部色光汇在一起则成白色。在牛顿著名的棱镜实验之前,颜色一直被认为包含在实物对象中,而非被实物吸收并反射。艾萨克·牛顿用一块棱镜将太阳光或其他白色亮光分离成多种颜色,形成一道彩虹,证明了太阳光或白色亮光实际是多种色光。随后他又进一步尝试分离蓝光,而蓝光不再可分,证明颜色并不在棱镜内,而是棱镜将光线分离了。这说明,在增色混合(显示器上的颜色混合类型)中,红、绿、蓝一起能产生所有颜色。这种情况下,红和绿生成黄。

显示器集合了许多小光点,它们组合起来产生无数的色彩。分辨率是指一个屏幕所容纳的独立色点(也叫像素)的总数。在显示器出现之前,艺术家一直在用此种类型的光频。瑟拉和点描派画家在画作中,如La Grande Jatte,用红和绿造出黄色。(瑟拉称作chromo-luminarism,而其他人称其为divisionism。)创作这类画作的基本观念是,光的混合会比传统的减色颜料混合在人眼产生更纯粹的谐振。

显示器是在一些不同的显示模式下做出来的,因而会改变我们从显示器上感知色彩的方式,色深就是用来描述这种情况的术语。单次能被显示的颜色数量取决于色深。如果色深为1,我们可以产生双色或单色。二级色深可以产生4色,以此类推可以得到32位色深。但通常投影网页的显示器只有24位色深、16777216种真彩色和Alpha通道。

称其为真彩色是因为我们人眼只能识别10000000(一千万)种不同的颜色,所以24位色深肯定绰绰有余。这24位中,8位用于表示红绿蓝,剩下的表示透明度或Alpha通道。

下面就用这些信息一 一拆解网页上可用的颜色属性。

颜色值

RGB 数值方式

上一部分解释了rbga(x, x, x, y)代表什么,接下来再拆解得细点,说明其它属性及其用法。以RGB通道的方式提及网页色彩的数值时,是特指0-255之间的数值。

x 是 0-255 之间的一个数
y 是 0.0-1.0 之间的一个数
rgb(x, x, x); or rgba(x, x, x, y);

例如: rbga(150, 150, 150, 0.5);

十六进制数

十六进制的颜色数值只是表示形式略微不同而已,它可能是网页开发者指派网页颜色值最常用的方式。

如果你还记得一字节就是八比特位,那么每个十六进制颜色值或数字其实就代表一字节。确定一种颜色是根据它的红、绿、蓝三部分的强度,所以我们叫它“三元组”,每一组占两个位置。一个字节代表00到FF(十六进制表示法)之间的一个数,或者是0到255(十进制表示法)之间的一个数。第一个字节是红色,第二个是绿色,第三个是蓝色。称作十六进制是因为它使用了基数16的计数系统。十六进制里的数都在0-9和A-F之间,0最小,F最大;#000000表示黑色,#FFFFFF表示白色。

对于重复数值的三元组,可以用简写法省去重复的麻烦,例如,#00FFFF写成#0FF。这种方式电脑很容易解析,也很简短,方便书写,对快速复制粘贴和编程中赋值都很有用处。不过,如果你打算用更复杂的方式驾驭色彩,那 hsl 方式会让人更看得懂。

HSL 数值方式

Hsl 数值和 rgb 有类似的语义和取值范围,但它使用色相、饱和度、亮度值来表示颜色,而不像显示器解析颜色的那样。语法结构上,这挺像 rgb 数值;但取值范围不同。Hsl 是基于孟塞尔颜色系统(孟塞尔最先利用贴近人类实际视觉的数学原理,将颜色分离成这三个分量,创造了一个描述颜色的三维系统)。

色调、饱和度、亮度可以用一个三个维度的模型表示。 色调在360度,一个完整的圆内变化;饱和度和亮度则是0到100的百分数。

x 是 0-360 的数值
y 是 0%-100% 的百分数
z 是 0.0-1.0 的数值
hsl(x, y, y); or hsla(x, y, y, z);

例如: hsla(150, 50%, 50%, 0.5);

对浏览器而言,rgb 和 hsl 数值间的转换不过是“举手之劳”(大约11行代码),但是对我们人来说,用 hsl 可容易理解得多。只需想象一个轮子,最浓稠最饱和的在轴心。这个演示很好地解释了 hsl 的意思。

几年前 Chris 也做了个酷炫的工具叫“hsla 探索器”,你可以在这看看。

如果你觉得对色彩不太熟练,hsla() 为开发者提供了制作漂亮效果的简单规则——我们会在下面生成颜色的部分谈到更多。

颜色俗名

开发者也可以使用颜色俗名,不过这些俗名因为不准确而留下不好用的坏名声。其中几个最突出和“名声斐然”的例子:黑灰色(dark grey)实际上比灰色(grey)更亮,柠檬色(lime)和石灰绿(limegreen)是截然不同的两种颜色。甚至有个游戏让你猜猜网页色彩的俗名,是很久以前由 Chris Heilmann编写的(现在我估计只能在 HMTL 上用了),曾是我的最爱。颜色的俗名在快速演示色彩用处时有用武之地,而开发者更规范的做法是,用 Sass 或其它预处理器存储颜色的十六进制数值,或 rgba 值,或 hsla 值,再和整个团队使用的颜色俗名映射起来。

颜色变量

实践中一个好的做法是,绝不直接使用颜色值,而以变量存储它,再用更具语义的命名方案和其它变量映射起来。CSS 自带有原生的变量语法,如:

:root {
  --brandColor: red;
}

body {
  background: var(--brandColor);
}

但这些是相当新的语法,撰写本文的时候还未被微软的浏览器所支持

CSS 预处理器也支持变量,所以你可以创建个变量,如$brandPrimary,然后在你整个代码库中使用。或用一个map:

$colors: (
  mainBrand: #FA6ACC,
  secondaryBrand: #F02A52,
  highlight: #09A6E4
);

@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown #{$key} in $colors.";
  @return null;
}

// _component.scss
.element {
  background-color: color(highlight); // #09A6E4
}

切记,这里的命名很重要。抽象命名有时大有用处,你只需把一处代表蓝色的变量改为代表橙色,而不用来回穿梭在代码中去重命名颜色值。再作个记号——“$blue 现在表示橙色了.”——也不会更糟。此处响起悲伤的长号声

currentColor

currentColor 是个非常有用的值。它识别层叠,可用在将一种颜色延展到另一个对象时,如盒模型阴影、轮廓线、边框,甚至背景。

比如说,你有一个div,div里还有另一个div。下面的写法会给里面的那个div加上橙色边框:

.div-external { color: orange; }
.div-internal { border: 1px solid currentColor; }

这对图标系统十分有用,不论是SVG图标还是图标字体。你可以为填充、描边或其他颜色设置默认值为currentColor,然后给吸管添加适合的有意义的CSS样式类名。

预处理器

CSS预处理器简直是修改颜色的神器。下面的链接是不同预处理器文档中关于颜色功能的部分:

  • Sass functions
  • Less functions
  • Stylus functions
  • Example PostCSS plugin

下面的是唯Sass专属的一些“黑科技”:

mix($color1, $color2, [$weight])
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)

确实有很多方法以编程的方式用预处理器组合、修改颜色,但我们不会全部都深入展开,这里有很不错的互动资源提供更详细的信息。

颜色的一些属性

作为CSS属性的“颜色”是指字体颜色。如果你打算设置一大片区域的颜色,就要用background-color,除非是在一个SVG元素中——那时得用fill来设置。“边框”是一个 HTML 元素周围的边界,而SVG中与之对应的是stroke

盒阴影与文本阴影

box-shadowtext-shadow 两个属性可设置成颜色值。文本阴影可设置为2-3个值:h-shadow(水平阴影)、v-shadow(垂直阴影)、一个可选的模糊半径(blur-radius)。盒阴影接受2-4个值:h-shadow, v-shadow, 可选的模糊距离(blur distance),可选的分布距离(spread distance)。你也可以在一开始就设定为嵌入,以实现反转阴影。这个网站有很棒的演示,代码简单、可复制粘贴。

渐变

通过指定一个方向可实现线性渐变。从,或到(根据浏览器)顶、底、左、右,多少度数或径向渐变。然后指定颜色节点和每个节点的颜色值。透明度也可加入其中。

下面是个例子:

参看CodePen上Sarah Drasner编写的一个Pen0df6e25c52fedba5ed5fd221d082e539。

大部分渐变语法并不是都那么难写,但我的确喜欢用这个在线渐变效果生成器来写,因为它也生成了支持 IE6-9 的复杂过滤器属性。这还有一个帅爆了的UI 渐变生成器。相当酷,而且开源,你不妨加入其中。

在SVG中实现渐变也差不多简单。我们定义一个指明id的块,也可以再自愿地定义一个专为渐变的表面区域(surface area)。

<linearGradient id="Gradient">
  <stop id="stop1" offset="0" stop-color="white" stop-opacity="0" />
  <stop id="stop2" offset="0.3" stop-color="black" stop-opacity="1" />
</linearGradient>

这些渐变也支持透明度,创造一些很美的效果和层次,就像动态面罩一样。

参看CodePen上Sarah Drasner写的动态透明面罩

还可以渐变文字,不过只能在webkit内核中。CSS-Tricks的这个代码片段是很好的示范。

生成颜色

有很多酷炫方法可以一下生成许多惊人的颜色。我发现在用代码创造合成艺术品或UI元素时,鼓捣这些颜色真的很有趣。

只要你一直留在上一部分讲到的颜色值范围内,就可以用Sass(或其他CSS预处理器)、JavaScriptS、或配合Math.floor()Math.Random(),以一个for循环遍历所有颜色值。要用到Math.floor()Math.ceil() 是因为,如果返回的不是整数就会出错,得不到一个颜色值。

一个首要规则是,你不应该同时都改变三个分量颜色值。我试过大幅度改变第一个值,第二个变化略小,第三个值不变,结果还不错。比如,hsl 对取遍所有颜色很容易,因为你知道让色相从0变到360度就能获得全范围的颜色。按度数旋转色相还有一个方便之处,你不一定非要取从0到360的数,甚至 -480 或 600 也是浏览器可以解析的值。

Sass

@mixin colors($max, $color-frequency) {
  $color: 300/$max;

  @for $i from 1 through $max {
    .s#{$i} {
      border: 1px solid hsl(($i - 10)*($color*1.25), ($i - 1)*($color / $color-frequency), 40%);
     }
  }
} 
.demo {
  @include colors(20,2);
}

我用上面的代码让水果循环变色: 参看CodePen上Sarah Drasner写的根据动作反应和动态颜色实验

还有这个,只是颜色范围不同 (在列表中快速滚轮): 参看CodePen上Sarah Drasner写的试验列表和滚轮

下面的代码中,我在 rgb 数值里用 Math.random() 一下生成同一范围内的许多颜色。这个演示用 React 创造三维 VR 体验。我本来也可以用一个 for 循环取遍所有颜色,但我希望这些颜色随着运动随机产生。只有天空是它的极限。

点击图片查看完整演示。

JavaScript

class App extends React.Component {
  render () {
    const items = [],
          amt1 = 5,
          amt2 = 7;
    for (let i = 0; i < 30; i++) {
     let rando = Math.floor(Math.random() * (amt2 - 0 + 1)) + 0,
          addColor1 = parseInt(rando * i),
          addColor2 = 255 - parseInt(7 * i),
          updateColor = rgb(200, ${addColor1}, ${addColor2});
      items.push(<Entity geometry="primitive: box; depth: 1.5; height: 1.5; width: 6" 
                material={{color: updateColor}} ...
                key={i}>
      ...
        </Entity>);
    }
    return (
      <Scene>
       ...
       {items}
      </Scene>
    );
  }
}

GreenSock自带一个工具,让你动态变化相对的颜色值。这很有用,因为你可以一下选取许多元素,让它们相对于自己当前的协调色动态变化。这里有几只乌龟展示了这种方法:

参看CodePen上Sarah Drasner写的Turtles that show Relative HSL tweening。

TweenMax.to(".turtle2 path, .turtle2 circle, .turtle2 ellipse", 1.5, {fill:"hsl(+=0, +=50%, +=0%)"});

其它很美的颜色效果

交融混合模式与背景混合模式

如果你用过 Photoshop 里的图层效果,想必对交融混合模式不会陌生。几乎所有90年代的网站都用它们(我就是。好尴尬)。交融混合模式与背景混合模式把两张不同的图层组合在一起,有 16 种模式可用。每个都过一遍有点超出本文的主题,下面只列一些主要的点。

最顶层的图片或颜色称为source,而最底层的称为destination。两者之间正是施展混合魔法的地方,叫作backdrop。我们按照相当简单的数学公式将它们混在一起。

如果你真想跟我打破砂锅问到底,我会告诉你那个用来混合颜色的数学公式取决于你想要什么效果。比如,乘法是destination × source = backdrop。其它效果就是用加减乘除对简单数学的变种。线性就是A+B−1,而颜色燃烧(color burn)是1−(1−B)÷A。不过,你真的不需要先知道它们再去用。

这是更深入的文档, 和一个用这些效果实现的展示颜色的演示:

参看CodePen上Sarah Drasner写的Demo-ing Mix Blend Modes with SVG

这篇 Robin 写的文章演示了你能从layering multiple blend modes实现的很复杂很震撼的效果。下文我们会提到用滤镜混合图层。在当今的浏览器,你能做的确实很多。

滤镜

CSS 滤镜提供了很多花哨的颜色效果,也能将一张彩色图片处理成灰调。CSS-Tricks上有很好的资源展示了滤镜的使用方法。现在的浏览器支持都非常好。如果你还意犹未尽,Bennett Feely 还有这个——漂亮的滤镜图展。

滤镜可以和模糊模式一起用。Una Kravets 结合一些效果制作了常用的instagram滤镜,并造出了这个屌炸天的工具CSS Gram,在底部她写有一些不错的文档。

feColorMatrix

Una 有另一篇文章尝试用 feColorMatrix 来制作那些图片。feColorMatrix是SVG的原生滤镜,也可用在 HTML 元素上。它很强大,让你微调、完善颜色。顾名思义,feColorMatrix 的基本标记就是一组数值矩阵,我们通过它的关联id来应用。

<filter id="imInTheMatrix">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>

  <path filter="url(#imInTheMatrix)"  … />

我们也可以扩展这个矩阵,调整那些值的色调、饱和度等等:

<filter id="imInTheHueMatrix">
  <feColorMatrix in="SourceGraphic"
    type="hueRotate"
    values="150" />
</filter>

Una 的文章深入探究了这里所提的所有特性,你还可以通过Amelia Belamy-Royd 的 O’Reilly 书籍SVG Colors, Patterns & Gradients 或 Mike Mullany’s exploratory demo 获取更多信息,以及很多其它惊艳的SVG颜色和渐变工具。

颜色的可识别度和其它要留意的

一种颜色只是参照另一种颜色来说的。这是颜色中的难点。可能你更熟悉“可识别度”这个术语。放在黑色背景上的浅绿色可以被识别出来,但是你把浅绿色换到白色背景上就未必看得出来了。

颜色的可识别程度可以用许多工具测量,下面是一些我最喜欢的:

  • Colorable
  • Text on a background image a11y check
  • Contrast-A
  • Accessible Colors

一个很好的做法是,从开头就把你的调色板设置成方便识别。Color Safe 是个帮你实现这个功能的绝佳工具。一旦你都设置好了,WAVE (Web Accessibility Tool) 会帮你评测网页。

颜色和环境

颜色受环境影响。如果你要创作某种颇具纵深的视觉效果,知道这点就很重要。离你近的东西有更高的饱和度和更强的对比度,离你远的东西会看起来更模糊。

一张风景图,对比远近物

阴影

阴影并非指灰色,而是色光的补色。如果照在你手背上的光呈黄色,那么它的阴影会是紫色。这点对你制作超长尾部阴影有用。

本地颜色输入

你可以用一个本地浏览器颜色选择器帮你的用户动态选色。想从颜色提示开始的话,可以敲下<input type="color"><input type="color" value="#ff0000">。就是那么简单,浏览器干得很漂亮。有一点要记住,不同的浏览器出现提示的方式会略有不同,就像其它本地操作一样。这里的代码演示了该方法与色调CSS颜色滤镜结合起来,动态选取图片的部分区域实现变色,而剩余部分都是灰调,不受影响。想出这个的人智商爆表。

有意思的开发工具和其它资源

  • Sublime text 颜色高亮插件,我用来快捷查看浏览器最后解析成什么颜色。我喜欢用{"ha_style": "outlined"},但我在这篇文章得知 Wes Bos 更爱用“filled”。
  • 有很多不同的传统配色组合,在线网络资源也能帮你搞定。想更科学地配色,用 Paletton 或 Adobe Color。Benjamin Knight 的recreated Adobe's color tool in d3 on CodePen相当搞事,值得围观。如果你想自己的网页再高一个档次(谁不想呢?),Coolors是再简单不过的方法了。
  • 如果你解释颜色时有困难,并想要一个交换颜色属性类型的简捷工具,那么Colorhexa几乎涉及了你能想到的颜色交换的所有类型。
  • 如果你是最死抠的颜色痴迷分子,甚至可以让控制台输出颜色。这有一份很棒的代码展示如何做到。

总结

这篇文章涵盖极广,而网页上的颜色有很多可待深究,希望这篇短文为你的实践和理解提供了一个跳板。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 怎样在 Linux 中配置静态网络连接

    Image credits : iradaturrahmat via Pixabay, CC0

    疯狂的技术宅
  • 我想给你介绍一个假的苹果网站

    网站的 URL 地址显示的是苹果官网,网址旁边是安全字样和绿色小锁,表示网站信息基于 https 加密传输,完全没什么问题,然而它就是一个钓鱼网站(演示网站)。

    疯狂的技术宅
  • 29个前端工程师和设计师必备的Chrome插件

    Google Chrome是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器。今天,我来分享下自己收集的一系列...

    疯狂的技术宅
  • 《数据可视化基础》:使用颜色的常见陷阱

    颜色是增强数据可视化的一种非常有效的工具。与此同时,糟糕的颜色选择也会破坏原本优秀的视觉效果。颜色的使用必须是基于某一个目的的,而不是用来分散注意力的。

    医学数据库百科
  • 正确的配色多重要?直接影响产品转化率

    首先看两张图,感受下配色的重要性。 “看这张,是不是很有食欲?” ? “那这张呢?” ? “没上张让人有食欲。” 其实每个人的心里,都有一张色彩心理学。 ? ...

    BestSDK
  • 关于颜色理论

    我的意思是,我不知道应该选择哪些颜色放在一起,完全凭感觉。于是昨天,我在网上找了一些资料,希望找到理论指导。

    ruanyf
  • 必读!UI设计中颜色使用的10条原则

    颜色术语构成了我们颜色知识的基础。将诸如色调,色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。

    用户5009027
  • UI技巧 | 用户界面设计的10个小技巧

    点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源

    用户1730674
  • 【DAX 系列】驱动可视化 - 超级颜色控制

    若要解决此问题,请使用十六进制代码(例如,#ABCDEF),或CSS支持的颜色列表中的颜色。

    BI佐罗
  • 《数据可视化基础》第三章:图形颜色如何选择

    我们经常使用颜色来区分没有顺序的离散的分组。例如地图上的不同国家或某种产品的不同制造商。在这种情况下,我们使用定性颜色标度(qualitative color ...

    医学数据库百科

扫码关注云+社区

领取腾讯云代金券