iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
1

前面我們已經講過了一些基礎色彩概念~
當然其實在視覺上,還有很多其他的概念可以應用
例如色彩心理學、錯覺...等
這個領域可以說是好玩,但是太過深入又會有點乏味
而且繼續講下去可能沒完沒了還偏離IT太遠
所以~回來回來~

今天,我們來研究一下網頁色碼!/images/emoticon/emoticon35.gif


再說一次~螢幕使用的顏色是RGB系統!光的三原色!
這點很重要但我不太想打三遍...

網頁色碼

除了你直接把色彩表的名稱全部背起來也是可以拿來設定網頁顏色(只是很醜)之外~

通常我們看到的網頁顏色編碼會長這樣:

#000000

總共會有六碼,但某些時候也會出現三碼,為什麼呢?
因為三碼是六碼的簡寫~
假設#ccc,他其實就是等於#cccccc

不過還是建議盡量都寫六碼比較好~

這邊你可能會問,但我怎麼知道#ccc就會是#cccccc,那#c1c1c1簡寫又是什麼?
恩...#c1c1c1 沒有簡寫

#gygygy簡寫又是什麼?
恩...#gygygy 並不存在

/images/emoticon/emoticon19.gif

十六進位色碼表示法

事情是這樣的,我來交代一下吧!
其實色碼要這樣看:

RGB色碼
這六碼分別代表三原色從0到255的值!

如果三種顏色都是0
表示沒有任何色光,畫面為黑色(#000000)
如果三種顏色都很滿~全都最大值255
表示達到要去見上帝的境界,畫面為白色(#ffffff)

那麼,為什麼有英文又有數字呢?
因為網頁色彩所使用的,是 16進位制

我們平常習慣使用的是10進位制,也就是
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20...

看到了嗎?個位數最大就是到9!再來就會又從0開始算

16進位制,顧名思義
最大值是15
再來就會再從0開始算
可是過了9我們就沒數字可以用了啊!
只好用A來代替10

RGB色碼

這樣計算的結果~就會像下圖這樣,每個色光有256組編號可以使用!

RGB色碼

設計師們可能有疑惑,阿不是說最大值255
要256個數字做啥?

因為...「0」也是一個數字啊孩子!
在電腦的世界中~0也是一個起始值,並不一定都是從1開始算!和我們數糖果餅乾的方式,是不太一樣的!
這點要注意一下~有時候溝通會在這個部分有些落差!

而上面說的#cccccc = #ccc
就是說 當兩位數一樣時 ,可以簡寫成三碼,個人還是習慣都寫六碼就是了!比較整齊==

那透明度怎麼辦?

還記得基礎篇中提到反射光與穿透光嗎?
使用6位色碼無法完整表示透明度,只能表現物體反射光而無法表示半透明
所以,這邊提供解決方式!

RGBa

這是其中一種表現方式
直接告訴瀏覽器三種色光的值與透明度!如下:

background-color:rgba(紅色值,綠色值,藍色值,透明度);

其中要注意的是~
三種色光值範圍在0~255之間
而透明度的值在0~1之間

HEX表示法

HEX其實就是十六進制。這裡可以看一下wiki的解釋!
六位數不夠用...那就再生兩位數出來變成八位數啊XD

於是,原本的#000000又可以寫成#000000aa

最後兩碼同樣為255階,256個值!

不過我剛剛偷懶在chrome瀏覽器除錯工具中,六位數後面直接寫%數...居然有效誒...!只能說瀏覽器好聰明~但我們還是玩玩就好不要冒這個險啦!

HSL表示法

這個,其實我很少用誒...
不過還是提供連結,大家可以自己看一下

他的表示方式如下:

color: hsla(色相, 飽和度, 亮度, 透明度);

其中,必須注意:

色相的值為0~360 ,透過上面的連結,我們知道他是一個立體模型~
所以360度剛好就是色相的整圈(或說整個面的圓)

飽和度和亮度的值是0%~100%,記得要加%數
透明度與RGBa一樣,是0~1


以上,就是網頁色彩的寫法~

在APP中表示的方式不太一樣
不過因為我不熟(直接承認)
無法教給大家我自己也沒有十足把握的東西!
如果有這部分的問題,和你家工程師討論看看吧!


上一篇
自然生命譜曲之路-插曲(色彩篇-外傳)
下一篇
與工程師的協作之路-工具篇(InVision)
系列文
學什麼就寫什麼,知道什麼就分享什麼31

尚未有邦友留言

立即登入留言