怎樣用 rgb 三元組理解色相、亮度和飽和度？

04-06

Python的matplotlib.colors 採用元組(r,g,b)來表示顏色，r,g,b都在[0,1],e.g., (0.1, 0.2, 0.5)
不理解色相、亮度、飽和度的關係，怎樣用這個元組來理解這三者的關係呢？
加入有一個顏色(0.1, 0.2, 0.5) ，怎樣變化算是增加色彩飽和度，怎樣變化算是增加亮度？

HSL 空間是把 RGB 空間經過一個非線性變換得到的。在一個空間中改變一個參數，往往導致另一個空間中三個參數都改變，體現出「牽一髮而動全身」的效果。

左為 RGB 空間，右為 HSL 空間

由 RGB 參數計算 HSL 參數的公式如下：

感性認識是這樣的：

Hue 叫色相，表示了顏色在色環上的角度。純紅色位於 0 度，純綠色位於 120 度，純藍色位於 240 度。具體計算時，角度主要由 RGB 中最大的那個決定，由次大的那個進行修正。

Lightness 叫亮度，具體計算公式是 RGB 中最大值與最小值的平均值。

Saturation 叫飽和度，表示的是 RGB 三個值的對比有多強烈。其算式中分子 C 是 RGB 中最大值與最小值的差值，但當 L 特別大或特別小的時候，C 的範圍有限，為了把它歸一化到 [0,1]，又除了個與亮度有關的分母。

具體到題主的例子：現在有一個顏色 (0.1, 0.2, 0.5)，這是一個比較暗的、略偏綠的藍色。所以它的色相會略小於 240 度（具體值是 225 度），亮度 L = (0.1 + 0.5) / 2 = 0.3，飽和度分子 C = 0.5 - 0.1 = 0.4，分母為 0.6，所以飽和度為 0.4 / 0.6 ≈ 0.67。

調整色相：由於亮度、飽和度都只與 RGB 中的最大、最小值相關，所以若要僅調整色相，就要調整綠色 G 的值。增大 G 的值會讓色相更偏向綠色，即減小，G = B 時色相最小，為 180 度；反之，減小 G 則會讓色相增大，G = R 時色相最大，為 240 度。

調整亮度：要調整亮度，主要靠調整值最大和最小的 B 和 R，但要注意保持色相和飽和度不變。當 L &< 0.5 時，飽和度 S 的公式可以簡化為 (M - m) / (M + m)。為了保持飽和度不變，B 和 R 要同比例增減，增時亮度增加，減時亮度降低。為了保持色相不變，G 也要同比例增減。

調整飽和度：同樣，調整飽和度靠的也是 B 和 R。為了保持亮度不變，其中一個增加多少，另一個就要減小多少。增大 B、減小 R 可以讓飽和度增加；減小 B、增大 R 可以讓飽和度降低。為了保持色相不變，也要調整 G 使它與 B、R 的差值之比與原來相同。

上面的各種調整都要注意不能超過 0 &<= R &<= G &<= B &<= 1 的範圍。一旦超過，調整方法也會改變。

本答案內容主要參考維基百科頁面 HSL and HSV，也推薦題主閱讀一下。

需要注意的是，含有 H、S 兩個參數的顏色空間有很多，但由於第三個參數的不同，S 的定義也會有不同。

謝邀，首先說我不懂Python。。

但是你這個問題我倒是可以幫到你。

（該回答只針對程序員了解顏色，至於ps中的色相和亮度演算法有時候是一個更複雜的特殊演算法）

但是幫之前你要先去看看色彩的文章，我已經寫好了：

PHOTOSHOP中的色彩理論-UI中國-專業用戶體驗設計平台

在photoshop中，8位通道色模型下，R、G、B三個通道分別是0-255，一共是256個檔位。

而這個模型你把它理解為是RGB三個燈泡，每個燈泡從滅到最亮只有10檔。

假如有一個顏色是（0.1, 0.2, 0.5），你可以理解為是紅色開了最暗的1檔，綠色開了2檔，藍色開了5檔。

如果要只增加「亮度」，可以三個值全部乘除一個係數,比如變成（0.2、0.4、1）

如果要只增加或減少「飽和度」，「飽和度」最高意味著該顏色擁有該色相下最純的色光。這句話是啥意思？也就是「增加飽和」 = 「減掉摻灰"。

在（0.1、0.2、0.5）這個顏色下，你可以理解為他是由兩個顏色合成的，

其中一個顏色是一個灰色（0.1、0.1、0.1）和一個純飽和色（0、0.1、0.4）

這時候所謂的」增加飽和度「操作，在演算法上只需要把三個值減掉最小的那個就行了。

總結一下：

a、增加飽和度

一個顏色（0.1、0.2、0.5）增加飽和度到最飽和不摻灰狀態，

演算法是減去該顏色中的那個灰色，在這個顏色中灰色是（Rmin、Gmin、Bmin）

表現在（0.1、0.2、0.5）中，灰色是（0.1、0.1、0.1）

所以最後得到的純飽和色是（0、0.1、0.4）

b、降低飽和度

一個顏色（0.1、0.2、0.5）降低飽和到最不飽和狀態，

演算法是取RGB中最高位通道色，將其他三個通道都替換成它，就變成了最灰的那個灰色。

在（0.1、0.2、0.5）中，降低到最不飽和，其顏色是（0.5、0.5、0.5）的灰色

我已經說成這樣了你應該明白了吧？

謝邀。三個數值一起增大是增加亮度；縮小方差則是降低飽和度。詳細的：

不得不寫在前面的名詞定義糾紛問題：在本回答的撰寫過程中，發現關於亮度和明度定義、翻譯上的爭議，整理結果如下：

首先亮度和明度兩個概念，其中一個是解釋了單一色彩的色彩含量，另一個解釋了一個顏色中R、G、B三原色的平均值，可反應其與白色的接近程度。

「色含量」像是一個物體受光照，光越少看上去越黑，光越多就越接近它本來的顏色。「平均值」則像是一個物體自身在發光，光線少的時候仍然是越黑，但是光線多的時候，就越像是白色。

所以每個色相都具有「色含量」，最高時為此色相最鮮艷的顏色，最低時全部為黑色。而任何顏色「平均值」最高時為白色，最低時為黑色。

在Wikipedia的詞條「Brightness」中，Brightness是「平均值」，Lightness是「色含量」。
Wikipedia詞條「HSL and HSV」中，Lightness是「平均值」，Value是「色含量」。
在Photoshop英文版中，Brightness的實際效果是「色含量」，Lightness的實際效果是「平均值」。
在Photoshop中文版中，「亮度」的實際效果是「色含量」，「明度」的實際效果是「平均值」。
百度百科認可「Brightness」翻譯為「明度」，把它解釋為「平均值」；「Lightness」翻譯為「亮度」，把它解釋為「色含量」。

對於英文的釋義，我覺得HSL+HSV顏色體系和Adobe都出錯的概率比較小，所以詞條「Brightness」的解釋應該錯了，正確為Brightness是「色含量」，Lightness是「平均值」。而中文釋義上，百度百科對應錯了翻譯，明度應為Lightness，亮度應為Brightness。在下文中，我明度和亮度都將做解釋。

好啦，在看此回答前，需要回憶高中數學中的如下內容：

三維直角坐標系（三維笛卡爾坐標系）
立體幾何中投影的概念
極坐標系
向量的加法

這是一個RGB顏色制式和HSL模型中的色彩的轉換問題。其實網上有很多詳盡的演算法，但是我想在這裡用高中數學的知識更加直觀地去解釋這一轉換。

在RGB顏色制式中，三個顏色中的每個顏色都有一個數值來表示這個顏色的多少，這個數值取值一般是0到255，正好是二進位中的八位數可以表示的「量程」。當然在理論上，你想用0.0到1.0來表示，或者用0%到100%來表示都可以。舉例，R=255，G=0，B=0，則代表紅色數量最大，綠色和藍色無，因此最終顯示的顏色為純紅色。若R=0，G=0，B=0，則代表三種顏色數量都為0，最終合成為純黑色。若R=255，G=255，B=255，則三個顏色都拉滿，合成出來的是純白色。

首先解釋最好理解的明度(Lightness)：

我們引入一個三維直角坐標系，三個坐標軸分別代表R、G、B的數量。由於此數值有限，所以取值範圍會在立體空間里形成一個正方體。任何一個RGB顏色制式中的色彩取值，都會對應到這個立方體內的一點。

現在我們從原點(0,0,0)到對角的頂點(255,255,255)連出一條直線，也就是一條體對角線。這條對角線就可以說是一條明度軸了，原點最暗，另一端最亮。而任何一個顏色對應到的一點在這條體對角線上的「投影」，就是這個顏色的明度(Lightness)。靠近原點就越暗，靠近(255,255,255)就越亮。

然後我們需要再引入一個極坐標系，來解釋飽和度(Saturation)和色相(Hue)。

當中漸變圓形只是指示色相用的，重點看立體的棍狀鏈接的模型

極坐標系由角度軸和距離軸構成。把紅藍綠三個顏色分別置於角度軸的0°、120°、240°，此時色相就被角度軸來表示。從圖中也可以看到，從0°到120°中間的區域就是橙色、黃色這些紅色到綠色的過渡顏色，其他區域也是同理，每個色相都映射一個角度。而讓原點的顏色為灰色，越往外顏色越鮮艷，則距離軸代表的就是飽和度。

題主問的是RGB三原色怎麼理解色相和飽和度，這裡我們再藉助向量。把R、G、B映射到角度軸，R、G、B的數值為距離軸，繪製三個向量。假設我們現在有一個顏色，R=100，G=150，B=200，那我們就在極坐標中，畫一個坐標為(100,0°)的向量，一個坐標為(150,120°)的向量，一個坐標為(200,240°)的向量。

然後把這三個向量做向量的加法，最終會落在一個點上。這個點的角度軸數值就是此顏色的色相，而距離軸數值就是它的飽和度了。

藍色箭頭終點即為此色，色相210°，飽和度50%

不過，這個極坐標是一個二維坐標，不能表示RGB顏色制式中的所有顏色，只能解釋色相和飽和度。如何使其表示所有顏色？我們需要再添加一個縱軸，變成了這樣：

這裡添加的這根縱軸就是亮度(Brightness)。而這個模型就是HSB模型/HSV模型。此外，還有個HSL模型，就是把Brightness軸替換成Lightness軸，替換後其頂層所有顏色都為白色。

頂層的縱坐標是255，白色是255，紅色也一樣是255，頂層大家的「光的量」Brightness都是最大值。底層的坐標是0，白色是0，紅色也是0，所以說亮度是表示單個顏色的含量的。但是紅色在上一個三維直角模型中，其投影並未到明度軸的頂點，其三數值平均值只有255/3=85，遠不到最大值255，「與白色的相近程度」還明顯差得很遠。

圖中，頂層是白色和最鮮艷的顏色，底層則清一色是黑色，想到了什麼？沒錯，Photoshop的調色板。Photoshop的調色板也是基於HSV模型設計的，色相軸被獨立出來在右側，亮度和飽和度在二維坐標中供調製。

主要的回答部分就到此結束了。此外再提及一下色環模型。

色環模型雖然也是一個立體的極坐標，但是和上一個HSV模型並不一樣。區別在於：

其一，縱軸使用的是明度(Lightness)，不是亮度(Brightness)。

其二，這個色環模型中的色相軸，紅、黃、藍三色之間互相間隔120°。而上面提到用於向量計算的極坐標中，是紅、綠、藍三色之間互相間隔120°。紅藍黃是藝術配色上的三原色，關乎人類的視覺體感；而紅綠藍是光學上的三原色，關乎RGB印刷（雖然印刷上更多用CMYK）和顯示器顯示。

以上。希望對答主和其他讀者有幫助。內容多為個人理解，如有錯誤請指出。

6我就跟你說下笨辦法咋弄

裝個PS，把這個東西弄出來

豎著看，有HSB RGB 框里都能打字對不對

就用圖裡面的這個顏色舉例RGB是（70，224，219）這個你懂

HSB是什麼意思呢？你就記HSB諧音好傻斃

「好」的值就是色相

「傻「的值就是飽和度

「斃」的值就是明度

那（70，224，219）這個色的色相就是178，飽和度69，明度88，不用算，看就行。

那麼問題來了，要把（70，224，219）調高飽和度怎麼調

整出來這個窗口，把178，69，88輸進去，然後把「傻」的S滑塊往右拉就是加飽和度，往左拉就是減飽和度。

調合適了你把HSB值輸回到這裡面去

就得到了RGB值。就是你要的

同理，拉「斃」的B滑塊就是調整明度，傻和斃都能拉，你別動「好」就行。這就是好傻斃的取色辦法，別管為什麼

色相就是以r=g=b這條線為z軸的theta

可以看看rgb和hsv的關係

python的話可以用skimage.color.rgb2hsv等函數對顏色空間轉換

我不懂，但看別人回答，驚呆了，能人大有。