CSS 中顏色的表示和轉換

語言: CN / TW / HK

基本概念

原色:是指不能透過其他顏色的混合調配而得出的“基本色”,以不同比例將原色混合可以產生出其它的新顏色。由於人類肉眼有三種不同顏色的感光體,因此所見的色彩空間通常可以由三種基本色所表達,這三種顏色被稱為“三原色”。一般來說疊加型的三原色是紅色綠色藍色、(又稱三基色,用於電視機、投影儀等顯示裝置)。

basic

色彩空間:是對色彩的組織方式,藉助色彩空間和針對物理裝置的測試,可以得到色彩的固定模擬和數字表示(例如 Adobe RGB 和 sRGB)。

色彩模型:是一種抽象數學模型,通過一組數字來描述顏色(例如 RGB 使用三元組)。

CSS 中顏色的表示和轉換

方式一:顏色詞

css color: red; // 紅色 color: green; // 綠色 color: blue; // 藍色

在這裡檢視全部顏色詞

方式二:RGB

css color: rgb(255, 0, 0, 1); // 紅色 color: rgb(0, 255, 0, 1); // 綠色 color: rgb(0, 0, 255, 1); // 藍色

RGB 是以一組十進位制數值表示顏色,結構為 rgb(R, G, B, A)(其中 A 表示透明度),RGB 色彩模型的建立方式是將紅色、綠色、藍色對映到三維笛卡爾座標系中。

rgb-space

方式三:HEX

css color: #FF0000; // 紅色 color: #00FF00; // 綠色 color: #0000FF; // 藍色

HEX 是以一組十六進位制數值表示顏色,結構為 #RRGGBB[AA]#RGB[A](其中 A 表示透明度),下面這個等式可以成立:

css color: #FF0000; // 等價於 color: #F00; // 等價於 color: #F00F;

RGB 轉 HEX 演算法:

```javascript // 摘自 https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L497 function rgbToHex(r, g, b, allow3Char) { var hex = [ pad2(mathRound(r).toString(16)), pad2(mathRound(g).toString(16)), pad2(mathRound(b).toString(16)) ];

// Return a 3 character hex if possible if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) ) { return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); } return hex.join(""); } ```

方式四:HSL

css color: hsl(0, 1000%, 50%); // 紅色 color: hsl(120, 100%, 50%); // 綠色 color: hsl(240, 100%, 50%); // 藍色

HSL 的結構為 hsl(H,S,L,A)(其中 A 表示透明度),是一種將 RGB 色彩模型中的點在圓柱座標系中的表示方式,這種色彩模型能夠做到比基於笛卡爾座標系的幾何結構更加直觀。

rgb-space

  • 色相(Hue):取值 0~360,指色彩的基本屬性,0(或360)表示紅色,120 表示綠色,240表示藍色。
  • 飽和度(Saturation):取值 0~100%,指色彩的純度,越高色彩越純,低則逐漸變灰。
  • 明度(Lightness):取值 0~100%。

RGB 轉 HSL 演算法:

```javascript // 摘自 https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L379 function rgbToHsl(r, g, b) { r = bound01(r, 255); g = bound01(g, 255); b = bound01(b, 255); var max = mathMax(r, g, b), min = mathMin(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; }

h /= 6;

} return { h: h, s: s, l: l }; } ```

相關資料:

關注微信公眾號“依賴注入”獲得更佳閱讀體驗。