iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
自我挑戰組

軟體開發商新手 PM 30 個第一次系列 第 26

【第 26 個第一次】 網頁顏色 - 16 進位色碼標示法

  • 分享至 

  • xImage
  •  

Day 26 - 工程師 : 這個色碼是不是沒有跟設計對過? 設計應該會給 16 進位的才對,去對一下吧。

燈冷,這是一個提供需求給工程師的故事,客戶有希望呈現的順序與顏色,所以整理出來要了色碼與順序就先提供給工程師,沒有注意到色碼上有細節要顧到,因此有了這篇筆記,下圖是工程師在訊息裡給的問題。/images/emoticon/emoticon16.gif

https://ithelp.ithome.com.tw/upload/images/20201011/20094570fIN7G7ZVYQ.png

大家好,我是 Jade Chang
先前任職於科技外商,主要負責對於 Developers 的開發經驗體驗,過去 5-6 年出沒於技術社群以及大專院校。嘗試過直播節目、技術黑客松、帶狀節目系列以及線上短期活動等行銷策略,半年前轉職到台灣在地的軟體開發商,從事行銷與專案經理,也合夥新創了一間數位公司,超展開職涯要開始囉!!!

螢幕瀏覽頁面所使用顏色是 RGB 色彩模式

螢幕的顏色呈顯是以光學顏色 RGB(紅、綠、藍)三原色為主,而 RGB 色彩標記方式是 RGB(X , Y, Z),其中X、Y、Z 數值為 0~255,共 256 個數值。數字越大代表該色顏色越重,總共可以呈現的顏色為 256 * 256 * 256 = 16,777,216

  • 紅色為 RGB (255,0,0)
  • 白色為 RGB (255,255,255)
  • 黑色為 RGB (0,0,0)

當中網頁顏色又是以 16 進位代碼表示,一般以「#」號開頭共 6 字元表示 (英文+數字),用下表這張圖來看,#RRGGBB
https://ithelp.ithome.com.tw/upload/images/20201010/20094570ZjP9ZWi6X8.png

有時候字元重複就會以 3 字元做表示,像是 #443366 的顏色就會簡寫為 #436。

https://ithelp.ithome.com.tw/upload/images/20201010/20094570YVRm7H8xN8.png

何謂 16 進位? 又稱它為 HEX 色彩模式

之所以色碼上會有 #英文+數字 的出現是因為所謂的 16 進位在第十個數值就用 A 來表示。一般常人熟悉的為十進位 = 0,1,2,3,4,5,6,7,8,9,10,到第十個各位數又從零開始,這就是十進位。
這邊要提到的是網頁上所使用的十六進位 = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 。 圖示為以下 :
https://ithelp.ithome.com.tw/upload/images/20201010/20094570KLsw2rkj74.png

  • 0 代表最低(如同 RGB 中的 0)
  • 8 代表中間
  • 9 之後是 A
  • F 代表最高(如同 RGB 中的 255)

還有印刷物使用的 CMYK 色彩模式

常接觸的還有 CMYK,他是模擬印刷油墨的基本四色表現,當中四個為青、洋紅、黃、黑 也是為什麼彩色印刷叫作四色印刷。因此如果設計圖作用是要用於印刷品時,就要以 CMYK 去設定,印刷出來的色彩才會準確。

https://ithelp.ithome.com.tw/upload/images/20201011/20094570n5FSJdXHBq.png

分享查到的小知識,尤其第二點不查真的不知道

  • CSS 第四版引入了 #RRGGBBAA 和#RGBA 的表示方式,當中多的 A 就是透明度的表示。A 為 0(全透明) - 1 (完全不透明 ,像是 : rgba(255, 0, 0, 0.6) → 不透明度 60% 紅色
  • 螢幕上看的色彩跟印出來的色彩不會完全一模一樣,是因為基本演算色彩的方式不同的關係,一個是光(RGB)從螢幕呈現,一個是油墨(CMYK)從印刷物上呈現,顯色效果會有一定的差距。

參考文章 :

One more thing!

歡迎訂閱我 Medium 或是透過 Facebook 一起來交流<3

https://ithelp.ithome.com.tw/upload/images/20200915/20094570oG1ujl6HbX.png


上一篇
【第 25 個第一次】 為什麼專案需要版本控制? Git 與 GitHub 關係是?
下一篇
【第 27 個第一次】 抓住每個企業識別展示的機會 ! 快速導覽網站瀏覽時視覺上需要準備的基本資訊
系列文
軟體開發商新手 PM 30 個第一次30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言