設計色彩管理(中)
上文中,我們有度量單位類比了色彩空間。“50”沒有絕對的物理特徵,“50釐米”有。將一個值和一個度量單位相結合才能賦予它更多的意義,並消除歧義。顏色空間比長度單位要複雜一些,但是這個類比可以用來理解顏色管理的許多方面。
然而,與其將顏色空間與度量單位進行比較,不如將它們想象成一把尺子。一種有長度的尺子,上面有許多刻痕。
色域
色彩空間的色域定義了色彩空間可以表示的色彩範圍。它定義了顏色的強度和純色的極限。
在我們的類比中,色域就像尺子的長度。假設我們有兩個尺子,它們代表了兩個不同的顏色空間——一個單位是1英尺長,另一個單位是1米長。
如上圖所示,兩個標尺的長度不一樣。並且這兩個尺子從0到1有相同數量的刻度線,但刻度線的物理間距是非常不同的;同樣是數字“1”在兩個尺子上的在空間上是完全不同的。
更寬的色域就類似那個更長的尺子。
你可以將1英尺的標尺類比為sRGB(標準色域空間),將1米的標尺類比為Display P3(寬色域空間)。1英尺尺子上最大的數值只是1米尺子的中間部分。當把sRGB中最極端的顏色轉換為Display P3時也是這樣——sRGB中的#ff0000在Display P3中僅為#ea3323。sRGB中的最大數值的紅色只是Display P3中的純紅色“標尺”的中間部分。
給定相同數量的刻度線,越長的尺子物理精確度就越低。顏色空間也是如此——更寬的色域在更大的空間上拉伸顏色值,所以它們更容易產生梯度帶。故提高色彩的精度對寬色域空間和色域轉換很有幫助。
色彩精度
基於計算機儲存數字的方法,當計算機儲存顏色值時具有固有的精度。用尺子作為類比,如果假設一個值必須落在一個刻度線上,精度就可以類比為刻度線。更多的刻度線意味著更精確。
如果你熟悉十六進位制CSS顏色,就會知道#ff0000是最鮮豔的純紅色,#fe0000是第二鮮豔的純紅色。在#ff0000和#fe0000之間沒有任何色彩。紅色在十六進位制中從00到ff,如果表示為十進位制數,就是從0到255,只有256個可能的色階。你不可能得到一個值為254.5的色彩,這個值必須向上或向下取整。
這看起來似乎有很多色彩,但當涉及到繪製平滑漸變、顏色空間轉換和其他步驟時,很容易造成肉眼容易看到的誤差。當需要經過多個步驟的變換時更是如此,累計的誤差導致更大的超過半個精度刻度的誤差。
四捨五入的誤差通常以條帶、色調分離或明顯的噪點的方式展現。廣色域顯示加劇了對更高精度的需求——如果我們的標尺變長,建立平滑漸變所需的刻度數量就會增加。
考慮到這一點,將來我們可能不會使用十六進位制值表示顏色——它們本來就是低精度的,每個通道只允許8位(每個顏色通道允許256個數值)。更高精度的浮點值更有意義;額外的好處是,浮點數可以擴充套件到顏色空間的範圍之外。sRGB中最亮的紅色可以寫成“1.0 0 0”,如果顏色空間允許的話,sRGB範圍之外的紅色可以寫成“1.2 0 0”。
色彩精度不被定義為色彩空間的一部分,它是渲染引擎或設計工具的實現細節。這意味著不同的工具對色彩精度的關注程度不同,色彩精度取決於你使用的工具以及你的使用方法。
伽馬值
色彩空間的伽馬值(不是色域)可以理解為尺子刻度線的間距。相同間距的刻度線稱為線性伽馬。
和大多數尺子不同,色彩的伽馬值不是總是等距的,大多數時候都是間隔不均勻的。sRGB使用非線性伽馬曲線,如下圖所示。其他常見的色彩空間也使用非線性的伽馬曲線。Display P3的伽馬曲線與sRGB的伽馬曲線完全相同。
注意在尺子的左邊有更多的刻度線。這提高了深色的精確度,因為人類對深色的感知更敏感。
伽瑪通常被描述為指數曲線,根據上圖可以看出,較高的值意味著較深的顏色精度更高,而較淺的顏色精度更低。sRGB的伽馬曲線比這複雜一點——有很短的一部分線性線段,然後是指數曲線。sRGB的伽馬值是2.2,但指數部分實際上是2.4(平均是2.2)。
雖然瞭解色彩管理不需要理解sRGB的伽馬曲線,但如果你用蘋果的ColorSync工具來深入研究顏色配置檔案,這是一個有趣的話題,你需要考慮這個問題。重要的是尺子上的刻度線的間距,非線性的間距是很常見的。
色彩空間轉換
我們已經瞭解了足夠多的基礎知識來進一步學習色彩轉換。給出某一色彩空間內的色值,並給出要轉換的目標色彩空間,怎樣得到轉換後的色值?或者說,如下圖所示,給出一個尺子上的數值,怎樣確定這個數值在另一個尺子上的位置?
源尺子上的數值會對映到目標尺子上最近的刻度上,如下圖,如果源尺子上的數值超出目標尺子上的最大值,則對映到目標尺子上最近的刻度也就是最大值上。
這就是顏色空間轉換的基本原理。在第3部分中,我們將為一些流行的設計工具提供螢幕設計所需的顏色管理設定。
-- 翻譯自 bjango --
相關文章
- 色彩在設計中的重要性
- UI設計中色彩運用應該注意哪些問題UI
- 設計師必看!如何將色彩正確運用到遊戲中?遊戲
- 遊戲設計裡的那些色彩應用遊戲設計
- 【UI設計師】你真的瞭解色彩嗎?UI
- UI設計培訓教程分享:UI設計師的色彩使用技巧UI
- 網站設計中網頁色彩靈活運用的重要性網站網頁
- 如何在網頁設計中正確應用色彩?網頁
- [譯] 色彩無障礙性產品設計指南
- 色彩心理學對網頁設計的影響力網頁
- Win11 自動色彩管理(ACM)ACM
- 乾貨 | APP介面設計的色彩注意細節,有哪些?APP
- 平臺設計中的指令碼管理指令碼
- UWA 學堂上新|漫談 HDR 和色彩管理
- 遠端控制軟體如何畫素級還原設計稿色彩?
- 乾貨 | 這些產品主圖設計的色彩原理,你會用嗎?
- 『OpenCV-Python』色彩空間及色彩轉換OpenCVPython
- Java程式設計中資源物件管理的進化Java程式設計物件
- React Hooks 起手式,實現一個「高顏值實用」的色彩設計工具ReactHook
- 機械設計協同管理,設計協同管理解決方案
- 遊戲機制設計:資源管理挑戰與遊戲中的AI設計遊戲AI
- Eagle for Mac(設計素材管理工具) 1.9.0中文Mac
- 如何高效管理設計交付,提升設計團隊效率?
- 說說在 Spring 中,如何程式設計實現事務管理Spring程式設計
- 程式設計師的精力管理程式設計師
- Lumen 自己設計的版本管理
- 色彩藝術海報PSD模板 | 用色彩挑動你的情趣
- 字典服務的設計與管理
- 簡要概述服裝設計管理
- Spring 程式設計式事務管理Spring程式設計
- 程式設計作業——系統管理程式設計
- 程式設計師的管理經驗程式設計師
- 大齡程式設計師沒競爭力?職場中這些程式設計師更容易走上管理崗!程式設計師
- 後設資料管理—動態表單設計器在crudapi系統中完整實現API
- CA-410 色彩分析儀
- 程式設計中的自頂向下設計思想程式設計
- 場景設計中距離感的設計
- 設計團隊管理用的軟體