標示色碼的方法· 嫁給RD 的UI Designer | 透明色碼
在寫標示文件給RD前,先來了解一下何謂「色碼」。常見的色碼有幾種:HSB、RGB、CMYK、HEX…等等。各種色碼運用場合皆不相同,理解後再來看看Android和iOS需要什麼。專門給印刷用的色碼。C=青綠色;M=洋紅色;Y=黃色;K=黑色。任何跟螢幕有關設計的都不該用CMYK標示。(可以標這個試試RD的極限在哪,被揍不負責。)參考:印刷四分色模式[1]。H代表色相、S代表彩度、B代表明度。我的選色技巧[2]這篇有詳細說明。參考:HSL和HSV色彩空間[3]。三原光,主要用於螢幕顯示。R=紅光;G=綠光;B=藍光。用0到255的數字來標示。數字越大顏色越淺。...
在寫標示文件給 RD 前,先來了解一下何謂「色碼」。常見的色碼有幾種:HSB、RGB、CMYK、HEX…等等。各種色碼運用場合皆不相同,理解後再來看看 Android 和 iOS 需要什麼。
專門給印刷用的色碼。C = 青綠色;M = 洋紅色;Y = 黃色;K = 黑色。任何跟螢幕有關設計的都不該用 CMYK 標示。(可以標這個試試 RD 的極限在哪,被揍不負責。)參考:印刷四分色模式[1]。
H 代表色相、S 代表彩度、B 代表明度。我的選色技巧[2] 這篇有詳細說明。參考:HSL和HSV色彩空間[3]。
三原光,主要用於螢幕顯示。R = 紅光;G = 綠光;B = 藍光。用 0 到 255 的數字來標示。數字越大顏色越淺。全部都是255就會是純白色。參考:三原色光模式[4]。
HEX 色碼指的是常見的 16 進位色碼,以三個從 00 到 FF 的數字組來表示。如白色 #ffffff 、黑色 #000000 等等。參考網頁顏色[5]。
色彩空間,看過就好長知識,有需要用到再回來翻。Lab色彩空間、sRGB色彩空间、Adobe RGB 色彩空間[6][7][8][9]
講標示文件前先來看看 W3C School 的這篇文章:CSS Legal Color Values[10]。文中出現「Alpha」這個值,它代表不透明度。 Alpha 可用 0% 或 0.0(完全透明) 到 100% 或 1.0 (完全不透明)的值來表示,當數字越高表示透明度越低。
關於網頁使用的色碼同樣參考 CSS Legal Color Values[11] 這篇文。
Android 使用的色碼為 Alpha + HEX,前兩位數字是 Alpha 值,後 6 位數字是 HEX 色碼。如 #CC000000 為 80% 黑色、#99ff0000為 60% 紅色 。Alpha 數值換算 16進位 可參考下表。
100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% —...