墨顏教育丨顏色模式不清晰,如何搭配顏色 2

Mondo 科技 更新 2024-01-30

色彩是最引人注目、最有情感力量的元素;它可以在 7 秒內鎖定目標引導和方向。 色彩模式是色彩應用的墊腳石。

以下繼續破譯 HSB、HSL、LAB、灰度模式、索引模式:

01 hsb

1-1 HSB 定義

HSB 顏色模式是色度、飽和度和亮度,也稱為 HSV。 描述了顏色的三個主要屬性。 色相:角度形成色相環 [0-360°];飽和純度:飽和度[0-100%];亮度:亮度 [0-100%]。

色相(chroma)一般是純色,即構成可見光譜的單色色,基本上是RGB疊加模式全色度的餅圖,即0°處為R紅色,120°處為G綠色,240°處為B藍色;c 青色 180°,m 品紅色 300°,y 黃色 60° 等。

乍一看,顏色一般是按照HSB來判斷的:視覺系統在區分顏色時,不會將顏色和光線分解成RGB或CMYK的單個顏色,而是根據色相、純度和亮度來判斷。 通俗的說法是判斷顏色是什麼樣子(H色調),亮與不亮(S純度),是否亮與否,是否暗淡,什麼是灰與不灰(B亮度)。

HSB配色方案使用相同的色調,不同亮度和純度的組合。 此時,您可以開啟拾色器介面,單擊HSB滑塊,首先選擇H(色調),如果想要明亮的顏色,請單擊S(飽和度)。 如果您想要較深的顏色,請單擊 b(亮度)進行調整。 這波操作將使您更容易找到您想要的顏色。

02 hsl

2-1 HSL的解釋

HSL 是 HSB 顏色模式的擴充套件,是圓柱坐標系中 RGB 顏色模型中點的表示形式。 色相色相角度 [0-360°];飽和純度[0-100%];亮度 [0-100]。

色度決定了顏色的相貌;飽和度表示顏色的純度;白色的亮度決定了顏色的強度。 如果白色亮度值為 100,則顏色為白色;如果白色亮度值為 0,則顏色將為黑色。

03 HSB和HSL的區別

其實在顏色模式中HSL和HSB一直存在爭議,它們的一般屬性看起來是一樣的,那麼它們之間有什麼區別呢?

3-1 語義

HSB HSV是色調、飽和度、亮度;

HSL是色度、飽和度、亮度;

B是HSB模式下亮度的含義,V是HSV中的值,但表達的是一件事:對光的亮度或光源功率的感知;

L代表亮度,與亮度值不同。 b 被認為是“光量”,可以是任何顏色。 而 l 被理解為“白度量”。

為了更直觀地解讀以上內容,我將通過以下圖片進行對比:

RGB、HSV、HSB、HSL 關係。

3-2 原理與效能

HSL 和 HSB 中的 H 完全相同,但 S 不相同,L 和 B 也不相同:

HSB 中的 S 控制純色中混合的白色量,具有較高的值和較少的白色和更純淨的顏色

HSB 中的 B 控制純色中混合的黑色量,具有更高的值和更少的黑色和更高的亮度。

HSL中的S與黑白無關,飽和度不控制顏色中黑白的混合程度;

HSL 中的 L 控制純色中黑白的混合。

以下是 Photoshop(HSB(左)和 Affinity Designer(右)的顏色選擇面板的比較。

兩者都分別使用 HSB 和 HSL 顏色模型。 兩個顏色選擇器都是 x 軸的飽和度,越靠右,飽和度越高;y軸表示亮度,亮度越高,亮度越高。

我們來看一下Photoshop的HSB顏色模型選擇器,其中HSB中的B(亮度)控制純色中混合的黑色量,值越高,黑色越少,顏色亮度越高

HSB中的S(飽和度)控制白色混合成純色的量,右值越高,數值越高,白色越少,顏色的純度越高。

接下來,看看 Affinity Designer 的 HSL 顏色模型顏色選擇器。 如下圖所示,y軸光度軸,從下到上,逐漸減少黑色的混合量,直到在50%位置完全沒有黑色,沒有白色,純度達到最高。 隨著你繼續往上走,混合了純色的白色逐漸增加,當你到達最高點時,它變成了純白色,亮度最高。

3-3 HSB 與 HSL 的總結

RGB顏色模型描述了不同數量的紅色、綠色和藍色的顏色,這對於成像解釋系統來說非常不直觀且難以理解。 用這種方式描述一種顏色更習:它是什麼顏色?是亮的還是灰色的?HSB 和 HSL 都是基於此建立的。

在弄清楚它們的工作原理和行為方式之後,你認為哪乙個更符合你的直覺更適合你。 即使您不知道它們是如何工作的,也不會阻止您做出出色的工作。 不過,如果你知道的話,你就不會害怕有一天乙個小白會指著Photoshop拾色器的右上角問你,為什麼不是這裡亮度最高的白呢?

04 lab

4-1 實驗室的起源

它早在 1931 年就根據國際照明委員會 (CIE) 制定的色彩測量國際標準建立。 2024年,它被正式命名為CIELAB。 它是一種與裝置無關的顏色系統,也是一種基於生理特徵的顏色系統。 這意味著它是一種描述人們視覺感知的數字方式。

實驗室色彩空間中的 L 分量用於表示畫素的亮度,範圍可以從 [0,100] 到表示從純黑色到純白色

a表示從紅色到綠色的範圍,取值範圍為[127,-128];b表示從黃色到藍色的範圍,取值範圍為[127,-128]。

4-2 實驗室屬性

lab>rgb>cmy。KLAB 色彩空間比計算機顯示器甚至比人類視覺的色域還要大,也就是說,LAB 的點陣圖需要更多的畫素資料才能獲得與 RGB 或 CMYK 位圖相同的精度。 Lab 模式定義的顏色最多,與光線和裝置無關,處理速度與 RGB 模式一樣快,比 CMYK 模式快得多。 因此,您可以自信而大膽地在影象編輯中使用實驗室模式。 此外,在轉換為 CMYK 模式時,實驗室模式下的顏色不會丟失或替換。 因此,避免顏色損失的最佳方法是在 Lab 模式下編輯影象並將其轉換為 CMYK 模式列印輸出。

05 灰度模式

5-1 灰度模式定義

指純白、純黑、從黑到白的一系列過渡色,以單一色調表現影象的模式為灰度模式。 在灰度模式下,只有亮度是影響灰度影象的因素。

正如我們前面提到的,當所有三個RGB值都相同時,得到灰度,即灰度屬於RGB色域。 RGB 畫素的顏色由八位位元組表示,因此灰度的數量也有 256 級亮度,包括純黑色 [0,0,0]、純白色 [255,255,255] 和兩者的過度顏色。

巴森:2 8=256

我們通常使用百分比來表示灰度。 我們將調色盤切換到灰度模式,即灰度滑塊和灰度色譜。 我們看到灰度滑塊是用百分比表示的,只能取為整數,從左到右,從0%-100%,從白到黑。 需要注意的是,從0%到100%,它代表從白色到黑色,這與RGB顏色亮度的取值規則相反,與CMYK顏色強度的值規則相似。 也就是說,可以理解為灰度值也代表了變相的灰度油墨,數值越大,顏色越深直到黑色,數值越小,顏色越淺,直到白色。

5-2 色值與色標的百分比

至此,我有了乙個新的發現和疑問:在RGB中,可以調整r、g、b三個值保持一致,灰度滑塊中的調整百分比也可以表示灰度顏色,那麼兩者之間有什麼聯絡和區別呢?

您應該知道,RGB [0-255] 中有 256 級灰度,但在灰度顏色模式下,只有 101 級灰度 [0%-100%]。 現在,我們做乙個實驗,讓我們將灰度滑塊移動到最左邊,即 0%,現在我們將顯示白色,現在我們將調色盤切換到 RGB 滑塊,我們會發現它和 RGB display[255,255,255] 一樣是白色。 如下圖所示:

我們再做幾組實驗,將灰度 % 切換到 RGB 值,會是什麼?我們可以看到 1% 253,253,253],2% 250,250,250]....嘿嘿你沒發現嗎,為什麼把灰度值換成RGB值的時候就不連續了呢?這就是為什麼我們上面提到 RGB 中有 256 級灰度,但在灰度顏色模式下只有 101 級灰度,所以會發生這種情況。 然後中間消失了[254,254,254],[252,252,252],[251,251,251]......雖然灰度顏色在 RGB 顏色模式下仍然可見,但在灰度顏色模式下不存在灰度顏色,因為無法選擇灰度滑塊。

5-3 灰度模式的應用

灰度模式一般應用非常廣泛,生活無處不在:

網際網絡設計:黑、白、灰色調及規格、深色模式、深夜模式、灰色環境適當對比等;

圖形後期製作:風格塑造、設計風格應用、場景應用色調處理等;

黑白印刷:出版印刷、包裝裝潢印刷、新聞印刷、**印刷、文具印刷和零件印刷等,如報紙、雜誌、書籍、小冊子;

醫療:影像學、X光、CT、B超等,如人體解剖學、骨骼結構;

視訊:膠片、錄影、投影、自拍等,如黑白照片;

工業:汽車塗裝、儀表配色等

06 索引顏色模式

索引顏色模式是一種使用顏色表來儲存和索引影象中的顏色的模式。 使用和儲存多達 256 種顏色。

轉換為索引顏色時,Photoshop 會構建乙個顏色查詢表 (clut) 來儲存和索引影象中的顏色。 如果原始影象中的顏色未出現在表格中,程式將選取最接近的現有顏色,或使用現有顏色來模擬顏色。

索引模式下的影象檔案具有非常少量的資料,大約是 RGB 影象大小的三分之一,因此它們通常用於 Web 影象等內容。 通過限制調色盤,您可以在保持相同視覺質量的同時減小檔案大小。

但是,在索引模式下只能進行有限的編輯。 為了進一步編輯,應將其臨時轉換為 RGB 或其他顏色模式。

注意:由於顏色表最多可容納 256 種顏色,因此在轉換過程中可能會發生顏色損失,儘管在切換到 RGB 模式時,當影象為 8 位通道且處於索引顏色模式時,所有濾鏡和部分調整將不可用。 因此,在轉換為索引顏色之前,必須進行所需調整的操作和效果。 這些包括純黑色 [0,0,0]、純白色 [255,255,255] 和兩者的泛音。

6-1 索引顏色模式應用

索引色主要應用於遊戲開發、多**動畫、影視後期製作、網頁等。 例如,GIF到動畫,遊戲角色設計,編碼程式索引顏色等。

07 總結

7-1 hsb

乍一看,顏色一般是根據HSB來判斷的,視覺系統在區分顏色時,根據色相、純度和亮度來判斷顏色。

7-2 hsl

HSL 是 HSB 顏色模式的擴充套件,HSB 和 HSL 的區別在於語義和原理。

7-3 lab

LAB RGB CMYK 是一種與裝置無關的色彩系統,它使用數字方法來描述人類的視覺感知。 Lab 比其他顏色模式更能容錯。

7-4 灰度模式

從黑色到白色的過渡色,一種以單一色調表示影象的圖案。 只有亮度是影響灰度影象的乙個因素。

7-5 索引顏色模式

是一種使用顏色表來儲存和索引影象中的顏色的模式。

分級不是偶然的問題,也不是隨機引數化的問題;相反,依靠原則和經驗,我們可以做我們想做的事。

相關問題答案

    Moyan教育教育丨Zenos Cafe品牌設計案例

    當商務人士在繁忙的工作日需要片刻的休息和放鬆時,位於商務中心旁邊的Zenos咖啡店無疑是乙個絕佳的選擇。該品牌對這家咖啡店的視覺設計既商務又時尚,使室內環境既舒適又精緻。品牌標誌以手寫簽名的形式,用輕盈的單行勾勒出輪廓,給人留下深刻的印象,讓我們一起欣賞Zenos品牌的視覺設計。Zenos 是一家位...

    Moyan教育丨LoRa助力設計活動運營頁面

    隨著人工智慧技術的快速發展,各大企業紛紛轉向人工智慧技術,以增強運營活動的設計。在這種趨勢下,Ganji Direct Recruitment也在積極探索如何利用AI來輔助設計師的工作。以月秋季招聘活動頁面為例,分享我的心思和落地。專案背景 為滿足月 招聘季的招聘需求,我們將開展專項招聘活動,引導使...

    墨言教育丨興趣習可能成為另乙個“剛性需求”。

    墨言教育興趣習可能成為另乙個 剛性需求 在瞬息萬變的今天,科學技術的發展越來越迅速,人們的生活節奏也在加快。在此背景下,學習習的需求也在增長。無論是為了提高自己的職業技能,還是為了滿足個人興趣,學習習已經成為我們生活中不可或缺的一部分。然而,傳統的學習習的方式往往讓人感到枯燥,無法激發人們學習習的熱...

    墨顏教育分享丨暢談設計師個人發展與提公升

    由於最近有很多人向我詢問個人發展和進步,我覺得有必要寫一篇關於個人發展和發展的文章版本 。很高興去年的文章 如何為設計師制定職業規劃 年IDP個人規劃 得到了廣大設計朋友的認可,很多人認為對大家都很有用。有很多設計師還處於迷茫階段。一年多過去了,我現在的工作狀態是在一家優秀的頭公司,工資遠高於市面上...

    莫言教育丨包裝設計如何賦能品牌?

    隨著商品經濟的快速發展和市場交易的進一步擴大,包裝不再是單純的儲存和保護商品的功能,包裝與商品合二為一,接受新潮流的使命成為品牌的媒介之一,是實現商品價值和附加值不可或缺的要素。.為您的包裝提供品牌視角。無論是產品銷售還是品牌推廣,包裝都被賦予了越來越重要的使命 通過有針對性的視覺識別來吸引觀眾的注...