淺談「網頁色碼」在”3C設備、瀏覽器”中顯示的差異性

為什麼使用自家電腦和手機看公司 LOGO 時顯示不是公司 CIS(企業識別系統)的標準色,儘管已經提供了標準的CIS色票編碼甚至網路色碼仍看起來怪怪?這種情況是有多種原因造成。不過先來了解「網頁色碼」是指在網頁設計中使用的色彩標示方式,通常以十六進位數字或英文單詞表示。然而,這些色碼在不同行動設備和瀏覽器中的呈現方式可能會有所不同,這可能會對網頁的外觀和使用者體驗產生影響。色碼之間是通用的需要經過轉換,但轉換後就必須接受色差預期心理準備!回歸主題我們需要從以下方面來談:

screen-BenQEW278Q_16-9

螢幕:BenQ EW278Q 27″ / LED 背光 / IPS 、瀏覽器:Google chrome

說明:網頁內容h(多)、左右空白(粉)、瀏覽器的配置(綠)、win選單(藍)

screen-ASUSVB199_5-4

螢幕:ASUS VB199-T 19″ / LED / IPS 、瀏覽器:vivaldi

說明:網頁內容h(少)、左右空白(無)、瀏覽器的配置(綠)

一.【螢幕差異】

不同型號的電腦和手機具有不同的螢幕技術和色彩校準,這會導致色彩呈現差異。解決方法是確保所有公司內部和外部設備的螢幕校準設定一致,或者提供校準建議。

  • 螢幕尺寸:25、27、32和32吋以上。但大多的公司仍會停在17、19、21吋等。
  • 螢幕比例:16:9(電影比例較佳)、16:10、21:9、32:9,主流為16:9,21:9、32:9多為曲面螢幕。但寬版再瀏覽頁面高度不夠高,所以對於首頁資訊量過大的畫面就需求一開畫面必須瀏覽到特定資訊是一種挑戰。
  • 解析度:以16:9來看,常見有 1920×1080/FHD(此還是最常見的解析度設定)、2560×1440/2K、3840×2160/4K,解析度越高畫面越細緻,GPU性能需求也越高所以有些會加裝獨立顯卡來輔助,但增加獨顯在整體色澤的的呈現會更顯不同。所以目前設計樣版稿以 w1920x h1080 為主。

備註:行動設備(以手機為主)主要分為 iPhone(IOS) 與 Android 兩大陣營,根據《Statcounter》統計全球網頁瀏覽器市佔,Mobile 的使用逐年偏高,而行動設備使用不同的螢幕技術,例如LCD、OLED或AMOLED。這些技術可能會影響色碼的亮度和對比度,導致在不同設備上的色彩看起來不同。百家爭鳴的品牌設備上在支援瀏覽器並沒有共通性的規範標準,因此要達成設備的網頁呈現統一性是更加困難。所以設計仍優先考慮電腦版的整體性。

二.【瀏覽器差異】

根據《Statcounter》統計全球網頁瀏覽器市佔,Google Chrome 仍是毫無疑問的第一名,後面的排名卻搶得激烈,在電腦平台蘋果 Safari 有望再度超越微軟 Edge。各款瀏覽器(如Chrome、Safari、Firefox)都想展現自己的獨特性,因此在於「色彩管理」和「解釋色碼」的技術都不會相同,這導致畫面顯示就有明顯的差異。所以某些瀏覽器可能很好地解釋呈現特定色碼,而其他瀏覽器卻出現不同的結果。

備註:設計編碼無法凌駕於瀏覽器的技術呈現,只能順應瀏覽器所提供的呈現方式。

三.【操作系統設定】

Windows、macOS、iOS、Android的3C設備在螢幕色彩呈現都有不同特點,但都提供高質量顯示和色彩管理選項,以確保用戶獲得最佳視覺體驗。不過,最終色彩呈現還取決於具體設備型號和品牌所配置設備,因此均會產生色彩表現的差異性。建議確保公司設備的操作系統設定一致,或者提供調整設定的指南。例如:早期官方網站會於版權區塊建議使用瀏覽器和解析度設定。

desktop-Windows+macOS

電腦版

  • Windows操作系統支援各種螢幕技術,包括LCD、OLED和IPS等,也提供色彩管理可用於校準螢幕以確保色彩的精確性。
  • macOS具有優秀的色彩管理,使用者可以在「顯示」設定中進行校準和配置。
mobile-ios+Android

行動版

  • iOS:iPhone和iPad具有高質量的Retina螢幕支援廣色域,通常以優秀的色彩重現度和亮度著稱。
  • Android:Android 設備多種多樣,因為品牌商有不同型號在於螢幕技術和色彩管理方面差異較大。

四.【色票和網路色碼的使用】

color_CMYK+HEX

CIS用於印刷色碼(CMYK)提供給網站使用,但這是不行的它得被網站(瀏覽器)讀懂,因此是需要經過 轉換工具 為「網頁色碼」才能使用,但仍受上述各種說明影響畫面呈現,因此需有預期心態接受其視覺的差異性

  • CMYK:印刷專用的色碼。C 青色、M 洋紅色、Y 黃色、K 黑色。
  • HSB:H 代表色相、S 代表彩度、B 代表明度。
  • RGB:螢幕色調呈現方式。三原色:R 紅光、G 綠光、B 藍光。三色光各字有0~255的色階,數字越大越淺色。例如:白 R255 G255 B255,黑 R0 G0 B0
  • HEX:十六進位色碼,從「#」開始,以RGB三組色碼從 00 到 FF 的數字英文字母大小寫皆可。例如:白 #FFFFFF、黑 #000000。

五.【CIS數位規範】

解決方法是由貴公司根據傳統的CIS制定專屬電腦和行動版不同設備和瀏覽器的『數位網站』的CIS規範。總之,要解決這個問題,需要考慮到螢幕、瀏覽器、操作系統和設定等多個因素,並企業主提供一致性的設定規範,以確保 CIS 標準色能夠在各種設備和環境下正確呈現。因此會詢問企業主慣性使用的設備規格(獨顯的支援)和解析度設定尺寸及是否有手動調整,尤其是了解專案相關人員的設備以方便縮減彼此確認畫面並制定共通認知共通方向。

分享你的喜愛