色彩學|認識 HSB 色彩模式

更新 發佈閱讀 1 分鐘
HSB色彩模式

HSB色彩模式

課堂上常常上完課,同學還是把RGB、CMYK、HSB等等之類的內容混攪在一起,這邊單獨拉出來發一篇~ 快來看🤓

HSB色彩模式常見於設計軟體、多媒體軟體中,屬於非常直覺操作、以視覺看到顏色明暗深淺濃度、什麼顏色的方式進行直接調整與挑選。

  • H → Hue (色相)
  • S → Saturation (飽和度)
  • B → Brightness (明度/亮度)

從下圖可見在 H色相進行色彩的挑選,而 S 飽和度越往右越鮮豔飽和,越往下顏色越深

HSB 色彩模式

HSB 色彩模式

Hue 色相指的是「有彩色」,用光的波長來延伸解釋,在下圖可見紫外線光的紫色到紅外線的紅色,濃縮就幾乎等於 HSB 中的 H 色相的彩色漸層色塊。

光的波長

光的波長

「有彩色」可以分為Hue (色相)、Saturation (飽和度)及Brightness (明度/亮度)。無彩色則是指「灰階(黑白灰)」,整合起來就是本文中的第二張 HSB 圖片。

有彩色與無彩色

有彩色與無彩色

下圖用 GIF 動態圖片展示 H色相,不過 GIF圖片只能顯示256種顏色,所以看起來會是很奇怪的色塊 (>人<;)

raw-image

這樣對 HSB 色彩模式有了解囉?

留言
avatar-img
Anita 裴恩的沙龍
26會員
34內容數
嗨~ 我是 Anita裴恩,平常是電腦補習班的講師,有接企業教育訓練、政府職訓課程、業界產學合作相關課程。 方格子沙龍預計會發佈教學文章、知識分享、旅遊紀錄、旅行規劃筆記、個人想法等等,想要不設限的多方發展~ 若有課程接洽邀約,請洽詢 boshiou@gmail.com ,謝謝
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
這篇文章主要介紹了繪圖軟體中的色彩模式,包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
Thumbnail
這篇文章主要介紹了繪圖軟體中的色彩模式,包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
Thumbnail
對於設計師來說,理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是,如何使用Canva工具來校對CMYK顏色,這不僅是設計的基礎元素之一,更是溝通與表達創意的關鍵。然而,很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕(RGB顏色模型)和印刷設備(CM
Thumbnail
對於設計師來說,理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是,如何使用Canva工具來校對CMYK顏色,這不僅是設計的基礎元素之一,更是溝通與表達創意的關鍵。然而,很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕(RGB顏色模型)和印刷設備(CM
Thumbnail
在數位設計的世界中,我們總是被色彩所包圍,而其中一個關鍵的元素就是色彩描述檔(又稱:描述檔、ICC色彩描述檔)。 它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷!或許你也曾經思考過,當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時,心中
Thumbnail
在數位設計的世界中,我們總是被色彩所包圍,而其中一個關鍵的元素就是色彩描述檔(又稱:描述檔、ICC色彩描述檔)。 它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷!或許你也曾經思考過,當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時,心中
Thumbnail
PH預設CMYK為Japan Color 2001 Coated(日本色域)也是台灣常用色域,基本很少會更換。除非有接到美國來的稿件,才會更改色域US. Sheetfed Coated v2。 日本色域---偏藍 美國色域---偏紅 如果在開檔時出現警告與電腦中描述檔不符時才要注意。 RGB轉換CM
Thumbnail
PH預設CMYK為Japan Color 2001 Coated(日本色域)也是台灣常用色域,基本很少會更換。除非有接到美國來的稿件,才會更改色域US. Sheetfed Coated v2。 日本色域---偏藍 美國色域---偏紅 如果在開檔時出現警告與電腦中描述檔不符時才要注意。 RGB轉換CM
Thumbnail
最近好幾位闆闆真是十八般武藝樣樣精通!!LOGO、包裝通通都要自己設計! 對稿時有時候會遇到檔案顏色格式設定錯誤的問題,如果你也想要自己設計,不妨看一下可以讓你少花很多冤枉的時間喔!!
Thumbnail
最近好幾位闆闆真是十八般武藝樣樣精通!!LOGO、包裝通通都要自己設計! 對稿時有時候會遇到檔案顏色格式設定錯誤的問題,如果你也想要自己設計,不妨看一下可以讓你少花很多冤枉的時間喔!!
Thumbnail
常常聽到的RGB色彩,是什麼呢?這篇超簡單說明給你~
Thumbnail
常常聽到的RGB色彩,是什麼呢?這篇超簡單說明給你~
Thumbnail
影像中的紋理要很自然的合成到另一影像之中,可以利用由色板上找到影像細節的選取範圍,再利用選取範圍製造出特殊效果。 Step1. 開啟範例練習檔,在材質素材圖的色版浮動視窗上,一一檢視每個分色色版,檢視發現在紅色分色版上有較佳的紋理,所以請點取紅色分色版。 在紅色色版上按下滑鼠右鍵,選擇執行「複製
Thumbnail
影像中的紋理要很自然的合成到另一影像之中,可以利用由色板上找到影像細節的選取範圍,再利用選取範圍製造出特殊效果。 Step1. 開啟範例練習檔,在材質素材圖的色版浮動視窗上,一一檢視每個分色色版,檢視發現在紅色分色版上有較佳的紋理,所以請點取紅色分色版。 在紅色色版上按下滑鼠右鍵,選擇執行「複製
Thumbnail
在色版上可以使用調整色彩指令,來改變分色色版上的黑灰白分佈,如「曲線」、「亮度對比」、「臨界值」、「色調分離」、「負片效果」等調整分色色版的黑灰白分佈,也可以處理出特別的影像顏色效果。 Step1. 開啟範例練習檔,執行「視窗」→「色版」開啟色版浮動視窗。由於色彩模式是RGB,所以在色版浮動視窗上會
Thumbnail
在色版上可以使用調整色彩指令,來改變分色色版上的黑灰白分佈,如「曲線」、「亮度對比」、「臨界值」、「色調分離」、「負片效果」等調整分色色版的黑灰白分佈,也可以處理出特別的影像顏色效果。 Step1. 開啟範例練習檔,執行「視窗」→「色版」開啟色版浮動視窗。由於色彩模式是RGB,所以在色版浮動視窗上會
Thumbnail
Photoshop開啟影像檔案時,在色版浮動視窗上(視窗>色版)會自動顯示色彩資訊色版,影像的色彩模式會決定所建立的色版數目,每個色版內容皆以八個位元(256色)的灰階影像描述顏色。 依檔案的色彩模式,色版浮動視窗上會顯示「複合色版」與「分色色版」。例如,RGB 影像有每一種色彩的分色色版 (紅色、
Thumbnail
Photoshop開啟影像檔案時,在色版浮動視窗上(視窗>色版)會自動顯示色彩資訊色版,影像的色彩模式會決定所建立的色版數目,每個色版內容皆以八個位元(256色)的灰階影像描述顏色。 依檔案的色彩模式,色版浮動視窗上會顯示「複合色版」與「分色色版」。例如,RGB 影像有每一種色彩的分色色版 (紅色、
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News