iT邦幫忙

DAY 6
7

CSS沒有極限系列 第 6

CSS沒有極限 - CSS3的色彩

在過去我們只要使用色碼來表示顏色,色碼是用三組十六進制數位表示,每位元組從00到FF,相當十進位數位從0到255...,而現在我們有了新的屬性alpha(透明度)。


本篇內容同步發表於http://ashareaday.wcc.tw/#2013-09-21 (建議使用Chrome瀏覽器)
RGBA
RGB在色彩學上定義為色光三原色,分為紅、綠、藍三色,而其混色模式為加法混色,在三種顏色相加後會變成白色;而另一種混色模式為印刷色料,是屬於減法混色,由CMYK四色組成,顏色在混和後會變成黑色。三原色的呈現主要適用於電視及電腦的顯示器,因此網頁也是利用RGB三原色。

圖片來源 http://zh.wikipedia.org/wiki/RGB\_%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

RGB相信對於一般視覺設計師來說非常的熟悉,是開啟繪圖軟體後經常會使用的色彩模式之一,其數值為0~255之間,三種數值如果都為255會顯示白色;如果三種顏色都為0則會是黑色。


圖片來源 Illustrator

在CSS3中新增了一個新的屬性alpha,alpha一般用作不透明度參數,數值從0~1之間,0是透明,而1代表不透明。

//css
.rgba1 {
  background: rgba(232, 12, 122, 0.2);
}
.rgba2 {
  background: rgba(232, 12, 122, 0.4);
}
.rgba3 {
  background: rgba(232, 12, 122, 0.6);
}
.rgba4 {
  background: rgba(232, 12, 122, 0.8);
}
.rgba5 {
  background: #e80c7a;
}

編寫方式為屬性:rgba(R值,G值,B值,alpha值)。

HSLA
HSL是由色相(H)、飽和度(S)、亮度(L)組成,飽和度以及明度的值為0~100%,而色相是利用色彩學的色相環概念(如下圖的H),所以值是由0~360,他所表現的也是一個圓環上的各個顏色。


圖片來源 http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

如上圖,和HSL類似的色彩模式為HSV,主要差異為明度(V)換成了亮度(L),而CSS3所採用的色彩模式為HSL,兩者比較可以參考 http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4。

僅調整色相(H)的效果

僅調整飽和度(S)的效果

僅調整明度(L)的效果

Hsla編寫方式為屬性:hsla(h值,s值,l值,alpha值)。

Kuler
https://kuler.adobe.com
這是Adobe公司所出的顏色工具,不管事RGB或是色碼都可方便轉換及調整。

更完整內容可參考 http://ashareaday.wcc.tw/#2013-09-21


上一篇
CSS沒有極限 - Sass 與 Compass(2)
下一篇
CSS沒有極限 - 別忘了偽元素
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言