【简评】本文对物理学和光学中的色彩原理进行介绍,并且对比了 CSS 中颜色的各种表示方法。对十六进制表示颜色的方法进行了简单的介绍
CSS 十六进制颜色揭秘
简介
作为一个长期在世界各地主持技术峰会的主持人,我有机会和许多技术传播者交流,我将这些人称为“专业的技术作者”,忙于他们的工作。
一个主题反复出现的是 CSS 中的颜色 —— 特别是它们在 CSS 的属性值中使用十六进制表示法。你可以在你的 CSS 中各个地方看见这些看起来怪怪的字符串:#FF0080、#9AC0B3、#B5CBE8。我的意思是 #WTF,不是吗?
虽然大部分的技术作者都会在某些时候遇到十六进制编码的颜色值,它通常情况下是一个模糊的问题,所以从来没有人花时间去解释他们。我听到最多的评论大都是这样的:
我一直在使用十六进制编码的色值,但是我真的不明白。其实我知道一些十六进制编码的色值代表什么颜色,但是我不知道为什么。有时候我可以修改十六进制的编码来达到我想要的效果,但是我不理解它们是怎么工作的。使用一个像 #BADA55 这样的不易理解的十六进制编码是错误的吗?
好的,就拿最后一个来说,但是答案是否定的,不,使用 #BADA55 这样的十六进制表示颜色不是错误的。如果你是想要一个黄绿色,那么你就可以使用 #BADA55。
CSS 中的颜色
在CSS 中颜色无处不在,它们可以作为前景、背景、阴影、表格、边框、链接、底纹等等这些属性的值。正因为颜色对于 CSS 是如此的重要,所以我们需要一个通用、标准的方式来引用它们,以便在所有浏览器中得到相同的颜色,这样用户就可以看到作者希望展现的颜色。
在CSS 中设置颜色有很多种方式,我们稍后会讨论其中的几种。但本文的重点是十六进制颜色,因为它具有明确性、一致性,而且还十分优雅。虽然它有这么多优点,但是有个缺点就是它并不是很直观。
物理学
让我们从色彩的基本原理开始:白光其实是由彩虹的所有颜色组成。知道 Roy G. Biv 吗?它是红、橙、黄、绿、蓝、靛、紫七种颜色的英文首字母缩略词,我们看到的白光仅仅是有这七种颜色混合组成的。
如果你认为这是一个笑话,那么你太年轻了
颜料
要了解颜色是如何工作的,让我们先来回顾一下颜料中的物理光线。
颜料的三原色
学习颜料