Skip to main content

One post tagged with "HSL"

View All Tags

· 12 min read

本文翻译自《How to manipulate CSS colors with JavaScript》

颜色模型101

在我们学习如何操作颜色之前,我们需要对CSS如何表示颜色有一个基本的认识。CSS使用两种不同的颜色模型:RGB和HSL。

RGB

RGB为 red green blue 的首字母缩写,由三个数组成,每个数字表示其在最终颜色中对应颜色的色光,范围为0-255之间,使用逗号分隔作为CSS rgb函数的参数。例如:rgb(50, 100, 0)

RGB是一种加色模型,这意味着每个数字越高,最终颜色越亮。如果每个值都相等,则颜色灰阶;如果所有值都是0,则为黑色;如果全为255,则为白色。

或者,你可以使用十六进制表示法来标记RGB颜色,每种颜色的整数从十进制转为十六进制。例如:rgb(50, 100, 0) 转为 #326400。

虽然CSS中习惯使用RGB模型(特别是十六进制),但其难以阅读,特别是难以操作。