RGB、YUV、HSV和HSL區別和關聯

来源:https://www.cnblogs.com/osmondwang/archive/2022/03/20/16031795.html
-Advertisement-
Play Games

RGB、YUV、HSV和HSL區別和關聯 近期在做的一個需求和顏色轉換有關係，所以本篇將開發過程中比較常見的 四種顏色 進行一番梳理。 一、RGB顏色空間 從我們最常見的RGB顏色出發，RGB分別對應著 Red（紅）、Green（綠）、Blue（藍），也就是我們平時所說的三原色，調整這三種顏色的比例 ...


RGB、YUV、HSV和HSL区别和关联

近期在做的一个需求和颜色转换有关系，所以本篇将开发过程中比较常见的 四种颜色 进行一番梳理。

一、RGB颜色空间

从我们最常见的RGB颜色出发，RGB分别对应着 Red（红）、Green（绿）、Blue（蓝），也就是我们平时所说的三原色，调整这三种颜色的比例，可以搭配出所有的色彩。

这时你可能就要问了，YUV、HSV、HSL也能描述所有色彩啊，为啥RGB是最常用的捏？

这就要回归到现实了，现实里显示器显像时，每一个像素点后面对应着 3个发光二极管，这3个二极管可以分别发出 红、绿、蓝 三种颜色，因此绝大部分人所能接触的颜色只与RGB有关系。

RGB（红绿蓝）是依据人眼识别的颜色定义出的空间，可表示大部分颜色。但在科学研究一般不采用RGB颜色空间，因为它的细节难以进行数字化的调整。它将色调，亮度，饱和度三个量放在一起表示，很难分开。它是最通用的面向硬件的彩色模型。该模型用于彩色监视器和一大类彩色视频摄像。

二、YUV颜色空间

YUV 多出现在音视频合成领域，音视频合成领域要求在表达同样内容时，争取占用更少的空间。同个视频，YUV空间要比RGB空间描绘省下来一半的空间消耗（YUV4:2:0）。

YUV（也称：YCbCr）：Y表示明亮度，UV的作用是描述影像色彩及饱和度。

主要的采样格式有 YUV4:2:0（最常用）、YUV4:2:2 和 YUV4:4:4 ，也就是说 RGB 主要用于屏幕图像的展示，而 YUV 多用于采集与编码。

YUV 和 RGB 相互转换的公式为：

三、HSV（HSB） 和 HSL

可以发现 RGB 主要为硬件显示器服务，YUV 主要为音视频编解码服务，这么说下来和色彩最亲密的 设计师 该用哪种颜色呢？

他们也有自己行业特别关注的颜色，主要使用 HSV 和 HSL。

（一）为什么RGB不适用于图像处理

人眼对于RGB这三种颜色分量的敏感程度是不一样的，在单色中，人眼对红色最不敏感，蓝色最敏感，所以 RGB 颜色空间是一种均匀性较差的颜色空间。如果颜色的相似性直接用欧氏距离来度量，其结果与人眼视觉会有较大的偏差。对于某一种颜色，我们很难推测出较为精确的三个分量数值来表示。

简单来说，如果计算不同颜色之间的对比度，如果使用 RGB 来计算：

(R1-R2)^2 + (G1-G2)^2 + (B1-B2)^2

即使两组颜色数值相同，人的感触还是不一样的，比如这里我选三个颜色：

  • RGB_1：110,0,110
  • RGB_2：60,0,100
  • RGB_3：160,0,110

可以看到尽管 RGB_1 和 RGB_3 距离 RGB_2 计算的欧式偏差是一样的，但我们还是会明显觉得 RGB_1 相比 RGB_3 更接近 RGB_2 ，因为 RGB_3 看上去比 RGB_1 和 RGB_2 更亮一些。

所以，RGB 颜色空间适合于显示系统，却并不适合于图像处理，图像处理强调的更多是 感触。

（二）HSV颜色空间

根据颜色的直观特性创建的一种颜色空间，有 A.R. Smith 在 1978年创建的一种颜色空间，也称 六角椎体模型。

  • 色调 Hue
  • 饱和度 Saturation
  • 明度（亮度）Value

HSV 对用户来说是一种 直观的颜色模型，我们可以从一种纯色彩开始，即指定色彩角H，并让V=S=1，然后我们可以通过向其中加入黑色和白色，来得到我们需要的颜色。

  • 增加黑色可以减小V而S不变
  • 同样增加白色可以减少S而V不变

例如：要得到深蓝色：V=0.4，S=1，H=240度。

此外需要额外注意的是，HSV和HSB代指的是同一种颜色空间算法。

（三）HSL 颜色空间。

HSV 和 HSL 在字面意思上是一样的：

  • H 指的是色相（Hue），就是颜色名称，例如“红色”、“蓝色”；
  • S 指的是饱和度（Saturation），即颜色的纯度；
  • L（Lightness） 和 V（Value）是明度，颜色的明亮程度

在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样， L 和 B （明度 ）也不一样：

  • HSV 中的 S 控制纯色中混入白色的量，值越大，白色越少，颜色越纯；
  • HSV 中的 V 控制纯色中混入黑色的量，值越大，黑色越少，明度越高
  • HSL 中的 S 和黑白没有关系，饱和度不控制颜色中混入黑白的多寡；
  • HSL 中的 L 控制纯色中的混入的黑白两种颜色。

（四）PS上的示例

下面是 Photoshop 和 Affinity Designer 的拾色器。

两者分别使用了 HSB 和 HSL 颜色模型。两个拾色器都是 X 轴表示饱和度，越往右，饱和度越高；Y 轴表示明度，越往上明度越高。

先看 Photoshop 的 HSB 颜色模型拾色器，如下图所示，HSB 的 B（明度）控制纯色中混入黑色的量，越往上，值越大，黑色越少，颜色明度越高。

如下图所示，HSB 的 S（饱和度）控制纯色中混入白色的量，越往右，值越大，白色越少，颜色纯度越高。

接下来看 Affinity Designer 的 HSL 颜色模型拾色器。如下图所示，Y 轴明度轴，从下至上，混入的黑色逐渐减少，直到 50% 位置处完全没有黑色，也没有白色，纯度达到最高。继续往上走，纯色混入的白色逐渐增加，到达最高点变为纯白色，明度最高。

（五）RGB、HSV、HSL转换方程式

typedef struct {
    NSUInteger r;
    NSUInteger g;
    NSUInteger b;
    CGFloat a;
} RGB;

typedef struct {
    NSUInteger h;
    CGFloat s;
    CGFloat l;
    CGFloat a;
} HSL;

typedef struct {
    NSUInteger h;
    CGFloat s;
    CGFloat v;
    CGFloat a;
} HSV;

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
HSL RGBToHSL(RGB rgb) {
    CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;
    CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);
    CGFloat h = 0, s = 0, l = (max + min) / 2;

    if (max == min) {
        h = s = 0; // achromatic
    } else {
        CGFloat d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        if (max == r) {
            h = (g - b) / d + (g < b ? 6 : 0);
        } else if (max == g) {
            h = (b - r) / d + 2;
        } else {
            h = (r - g) / d + 4;
        }

        h /= 6;
    }
    return (HSL){ .h = static_cast<NSUInteger>(round(h * 360.0)), .s = s, .l = l, .a = rgb.a };
}

/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
RGB HSLToRGB(HSL hsl) {
    CGFloat h = hsl.h / 360.0, s = hsl.s, l = hsl.l;
    CGFloat r = 0, g = 0, b = 0;

    if (s == 0) {
        r = g = b = l; // achromatic
    } else {
        CGFloat (^hue2rgb)(CGFloat, CGFloat, CGFloat) = ^CGFloat(CGFloat p, CGFloat q, CGFloat t) {
            if (t < 0.0)
                t += 1;
            if (t > 1.0)
                t -= 1;
            if (t < 1 / 6.0)
                return p + (q - p) * 6 * t;
            if (t < 1 / 2.0)
                return q;
            if (t < 2 / 3.0)
                return p + (q - p) * (2 / 3.0 - t) * 6;

            return p;
        };

        CGFloat q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        CGFloat p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3.0);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3.0);
    }

    NSUInteger red = round(r * 255);
    NSUInteger green = round(g * 255);
    NSUInteger blue = round(b * 255);

    return (RGB){ .r = red, .g = green, .b = blue, .a = hsl.a };
}

/**
 * Converts an RGB color value to HSV. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and v in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSV representation
 */
HSV RGBToHSV(RGB rgb) {
    CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;
    CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);
    CGFloat h = 0, s = 0, v = max;

    CGFloat d = max - min;
    s = max == 0 ? 0 : d / max;

    if (max == min) {
        h = 0; // achromatic
    } else {
        if (max == r) {
            h = (g - b) / d + (g < b ? 6 : 0);
        } else if (max == g) {
            h = (b - r) / d + 2;
        } else {
            h = (r - g) / d + 4;
        }

        h /= 6;
    }

    return (HSV){ .h = static_cast<NSUInteger>(round(h * 360)), .s = s, .v = v, .a = rgb.a };
}

/**
 * Converts an HSV color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
 * Assumes h, s, and v are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  v       The value
 * @return  Array           The RGB representation
 */
RGB HSVToRGB(HSV hsv) {
    CGFloat r = 0, g = 0, b = 0, h = hsv.h / 360.0, s = hsv.s, v = hsv.v;

    NSUInteger i = floor(h * 6);
    CGFloat f = h * 6 - i;
    CGFloat p = v * (1 - s);
    CGFloat q = v * (1 - f * s);
    CGFloat t = v * (1 - (1 - f) * s);

    switch (i % 6) {
        case 0: {
            r = v;
            g = t;
            b = p;
            break;
        }
        case 1: {
            r = q;
            g = v;
            b = p;
            break;
        }
        case 2: {
            r = p;
            g = v;
            b = t;
            break;
        }
        case 3: {
            r = p;
            g = q;
            b = v;
            break;
        }
        case 4: {
            r = t;
            g = p;
            b = v;
            break;
        }
        case 5: {
            r = v;
            g = p;
            b = q;
            break;
        }
    }

    NSUInteger red = round(r * 255);
    NSUInteger green = round(g * 255);
    NSUInteger blue = round(b * 255);

    return (RGB){ .r = red, .g = green, .b = blue, .a = hsv.a };
}

文章首发：问我社区

这个公众号会持续更新技术方案、关注业内技术动向，关注一下成本不高，错过干货损失不小。
↓↓↓


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於SQL Server 各種安裝失敗均失敗，報錯“等待資料庫引擎恢複句柄失敗”的經驗分享
    最近安裝SQL 2019遇到這個問題，試過網上幾乎所有辦法，都安裝不上。最後在微軟社區提問解決了，由於這個問題不常見，並且網上幾乎沒有正確的解決方案，因此將我的解決過程及經驗記錄分享一下，也為後來者提供參考。 1、如果是許可權問題，現有的網上很多修改許可權的方案是可以解決安裝問題的，在此不做介紹。 2、 ...
  • redis基礎
    一、介紹 Redis誕生於2009年全稱是Remote Dictionary Server,遠程詞典伺服器，是一個基於記憶體 的鍵值型NoSQL資料庫。 特征： ●鍵值(key-value)型, value支持 多種不同數據結構,功能豐富　●單線程, 每個命令具備原子性　●低延遲,速度快(基於記憶體、1 ...
  • 面試必問的安卓虛擬機，你真的掌握了麽？——安卓虛擬機基礎知識回顧
    前言 21世紀，安卓虛擬機正在一步步的走入我們的生活，小到個人部分朋友在電腦上使用安卓虛擬機玩手游，大到安卓從業人員在虛擬機上面跑程式。不得不承認，對於每一位Androider 而言，安卓虛擬機是我們日常開發中不可或缺的一環，但是關於安卓虛擬機的一些知識點和小細節你真的完全掌握了麽？本文將就主要包括 ...
  • 華為音頻編輯服務，實時分離人聲、伴奏和樂器聲
    想獲取一首歌的伴奏卻找不到資源怎麼辦？沒關係，我們可以自己解決。音頻編輯服務提供音源分離的功能，幫助開發者在應用中構建人聲與伴奏分離的功能。 目前，音源分離功能已經開放了人聲與伴奏、樂器等多種分離的方式，可以實時解析並將樂器中的人聲和各種樂器元素提取到獨立的音軌上，滿足創作者對伴奏製作、扒帶、音樂創 ...
  • 如何在 Flutter 中集成華為應用內消息
    一、安裝flutter環境 1、下載Flutter sdk包，地址：https://flutter.dev/docs/get-started/install/windows 2、將壓縮包解壓到任意文件夾 3、將flutter命令文件添加到環境變數中 4、在Android Studio中下載Flutt ...
  • 一篇文章扒掉“橋梁Handler”的底褲
    Android跨進程要掌握的是Binder, 而同一進程中最重要的應該就是Handler 消息通信機制了。我這麼說，大家不知道是否認同，如果認同，還希望能給一個關註哈。 什麼是Handler？ Handler主要用於非同步消息的處理：當發出一個消息之後，首先進入一個消息隊列，發送消息的[函數]即刻返回 ...
  • 如何使用Google Analytics Universal Analytics增強型電子商務
    Google Analytics: Universal Analytics增強型電子商務，可以讓運營人員輕鬆地跟蹤用戶在其購物歷程中與產品的互動，包括產品展示、產品點擊、查看產品詳情、將產品添加到購物車、結賬流程、交易以及退款等操作。 目前，Google Analytics: Uniersal An ...
  • Masonry在視圖相對關係處理中的各種“offset”
    如果我們需要設置一個view在另一個view的右邊緣距離一定距離的地方，利用Masonry這麼寫： offset可以讓我們在設置視圖之間相對位置時起到很大作用，但是也有很多情況下用不到，比如size、center等等，而調查Maronry的底層方法，可以看到和offset類似的方法還有很多: off ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類