CocosCreator HSL HSV RGB 颜色空间转换工具

最新推荐文章于 2024-05-06 14:55:10 发布
最新推荐文章于 2024-05-06 14:55:10 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： CocosCreator 文章标签： 颜色空间 cocos-creator typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a71468293a/article/details/121809791
版权

CocosCreator HSL HSV RGB 颜色空间转换工具

前言

遇到一个使用HSV颜色空间的问题，但是CocosCreator只支持RGB颜色空间，于是根据ls9512大佬的【C# / Algorithm】RGB、HSV、HSL颜色模型的互相转换一文把C#颜色空间转换代码改为了TypeScript代码，就可以在CocosCreator中开心进行颜色转化了。

颜色

HSL

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。

HSV

HSL即色调（H），饱和度（S），明度（V）。
HSV模型的三维表示从RGB立方体演化而来。设想从RGB沿立方体对角线的白色顶点向黑色顶点观察，就可以看到立方体的六边形外形。六边形边界表示色彩，水平轴表示纯度，明度沿垂直轴测量。
注：HSB又称HSV，表示一种颜色模式：在HSB模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度HSB模式对应的媒介是人眼。
下图为Unity中HSV颜色选择图
HSV颜色选择图

RGB

RGB即红(Red)、绿(Green)、蓝(Blue)。RGB色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
下图为Unity中RGB颜色选择图
RGB颜色选择图

源码

使用方法

//转换颜色空间
let hueToRGB= ColorHelper.HsvToRgb(new ColorHSV(200,235,240));
this.node.color=new cc.Color(hueToRGB.R ,hueToRGB.G,hueToRGB.B,255)

/**
 * H 色相 \ S 饱和度(纯度) \ L 亮度 颜色模型 
 * 原作者：ls9512
 * 
 * @export
 * @class ColorHSL
 */
export class ColorHSL {
    // public ColorHSL(h: number, s: number, l: number) {
    //     this._h = h;
    //     this._s = s;
    //     this._l = l;
    // }
    constructor(h: number, s: number, l: number){
        this._h = h;
        this._s = s;
        this._l = l;
    }

    /**
     * 色相
     *
     * @private
     * @type {number}
     * @memberof ColorHSL
     */
    private _h: number;
    public get H(): number {
        return this._h;
    }
    public set H(value: number) {
        this._h = value;
        this._h = this._h > 360 ? 360 : this._h;
        this._h = this._h < 0 ? 0 : this._h;
    }

    /**
     * 饱和度(纯度)
     *
     * @private
     * @type {number}
     * @memberof ColorHSL
     */
    private _s: number;
    public get S(): number {
        return this._h;
    }
    public set S(value: number) {
        this._s = value;
        this._s = this._s > 255 ? 255 : this._s;
        this._s = this._s < 0 ? 0 : this._s;
    }

    /**
     * L 亮度
     *
     * @private
     * @type {number}
     * @memberof ColorHSL
     */
    private _l: number;
    public get L(): number {
        return this._h;
    }
    public set L(value: number) {
        this._l = value;
        this._l = this._l > 255 ? 255 : this._l;
        this._l = this._l < 0 ? 0 : this._l;
    }
}


/**
 * H 色相 \ S 饱和度(纯度) \ V 明度 颜色模型 
 * 原作者：ls9512
 * @export
 * @class ColorHSV
 */
export class ColorHSV {
    /// <summary>
    /// 构造方法
    /// </summary>
    /// <param name="h"></param>
    /// <param name="s"></param>
    /// <param name="v"></param>
    // public ColorHSV(h: number, s: number, v: number) {
    //     this._h = h;
    //     this._s = s;
    //     this._v = v;
    // }
    constructor(h: number, s: number, v: number){
        this._h = h;
        this._s = s;
        this._v = v;
    }
    /**
     *  色相
     *
     * @private
     * @type {number}
     * @memberof ColorHSV
     */
    private _h: number;
    public get H(): number {
        return this._h;
    }
    public set H(value: number) {
        this._h = value;
        this._h = this._h > 360 ? 360 : this._h;
        this._h = this._h < 0 ? 0 : this._h;
    }

    /**
     * 饱和度(纯度)
     *
     * @private
     * @type {number}
     * @memberof ColorHSV
     */
    private _s: number;
    public get S(): number {
        return this._s;
    }
    public set S(value: number) {
        this._s = value;
        this._s = this._s > 255 ? 255 : this._s;
        this._s = this._s < 0 ? 0 : this._s;
    }

    /**
     * 明度
     *
     * @private
     * @type {number}
     * @memberof ColorHSV
     */
    private _v: number;
    public get V(): number {
        return this._v;
    }
    public set V(value: number) {
        this._v = value;
        this._v = this._v > 255 ? 255 : this._v;
        this._v = this._v < 0 ? 0 : this._v;
    }

}

/**
 * R 红色 \ G 绿色 \ B 蓝色 颜色模型
 * 所有颜色模型的基类，RGB是用于输出到屏幕的颜色模式，所以所有模型都将转换成RGB输出
 * 原作者：ls9512
 * @export
 * @class ColorRGB
 */
export class ColorRGB {
    /// <summary>
    /// 构造方法
    /// </summary>
    /// <param name="r"></param>
    /// <param name="g"></param>
    /// <param name="b"></param>
    // public ColorRGB(r: number, g: number, b: number) {
    //     this._r = r;
    //     this._g = g;
    //     this._b = b;
    // }

    constructor(r: number, g: number, b: number){
        this._r = r;
        this._g = g;
        this._b = b;
    }

    /**
     * 红色
     *
     * @private
     * @type {number}
     * @memberof ColorRGB
     */
    private _r: number;
    public get R(): number {
        return this._r;
    }
    public set R(value: number) {
        this._r = value;
        this._r = this._r > 255 ? 255 : this._r;
        this._r = this._r < 0 ? 0 : this._r;
    }
    /**
     * 绿色
     *
     * @private
     * @type {number}
     * @memberof ColorRGB
     */
    private _g: number;
    public get G(): number {
        return this._g;
    }
    public set G(value: number) {
        this._g = value;
        this._g = this._g > 255 ? 255 : this._g;
        this._g = this._g < 0 ? 0 : this._g;
    }
    /**
     * 蓝色
     *
     * @private
     * @type {number}
     * @memberof ColorRGB
     */
    private _b: number;
    public get B(): number {
        return this._b;
    }
    public set B(value: number) {
        this._b = value;
        this._b = this._b > 255 ? 255 : this._b;
        this._b = this._b < 0 ? 0 : this._b;
    }

    /**
     * 获取实际颜色
     *
     * @return {*}  {cc.Color}
     * @memberof ColorRGB
     */
    public GetColor(): cc.Color {
        return new cc.Color(this._r, this._g, this._b);
    }
}

/**
 * 颜色转换帮助类
 *
 * @export
 * @class ColorHelper
 */
export class ColorHelper {

    /**
     * RGB转换HSV
     *
     * @static
     * @param {ColorRGB} rgb
     * @return {*}  {ColorHSV}
     * @memberof ColorHelper
     */
    public static RgbToHsv(rgb:ColorRGB) :ColorHSV{
        let min, max, tmp, H, S, V;
        let R = rgb.R * 1.0 / 255, G = rgb.G * 1.0 / 255, B = rgb.B * 1.0 / 255;
        tmp = Math.min(R, G);
        min = Math.min(tmp, B);
        tmp = Math.min(R, G);
        max = Math.min(tmp, B);
        // H
        H = 0;
        if (max == min) {
            H = 0;
        } else if (max == R && G > B) {
            H = 60 * (G - B) * 1.0 / (max - min) + 0;
        } else if (max == R && G < B) {
            H = 60 * (G - B) * 1.0 / (max - min) + 360;
        } else if (max == G) {
            H = H = 60 * (B - R) * 1.0 / (max - min) + 120;
        } else if (max == B) {
            H = H = 60 * (R - G) * 1.0 / (max - min) + 240;
        }
        // S
        if (max == 0) {
            S = 0;
        } else {
            S = (max - min) * 1.0 / max;
        }
        // V
        V = max;
        return new ColorHSV(Math.floor(H), Math.floor(S * 255), Math.floor(V * 255));
    }


    /**
     * RGB转换HSV 简易版
     * 参考 EnjoyGet
     * @static
     * @param {ColorRGB} rgb
     * @return {*}  {ColorHSV}
     * @memberof ColorHelper
     */
    public static RgbToHsvEasy(rgb:ColorRGB) :ColorHSV{
        let min, max; 
        let H, S, V;
        min = Math.min(Math.min(rgb.R, rgb.G), rgb.B);
        max = Math.min(Math.min(rgb.R, rgb.G), rgb.B);

            H = 0;
            if (max == min)
            {
                H = 0;
            }
            else if (max == rgb.R && rgb.G > rgb.B)
            {
                H = Math.floor(60 * (rgb.G - rgb.B) / (max - min) + 0);
            }
            else if (max == rgb.R && rgb.G < rgb.B)
            {
                H = Math.floor(60 * (rgb.G - rgb.B)/ (max - min) + 360);
            }
            else if (max == rgb.G)
            {
                H = Math.floor(60 * (rgb.B - rgb.R) / (max - min) + 120);
            }
            else if (max == rgb.B)
            {
                H = Math.floor(60 * (rgb.R - rgb.G) / (max - min) + 240);
            }

            S = max != 0 ? (max - min) * 1.0 / max : 0;       
            V = max/255;
            return new ColorHSV(H, S , V);
    }




    /**
     * HSV转换RGB
     *
     * @static
     * @param {ColorHSV} hsv
     * @return {*}  {ColorRGB}
     * @memberof ColorHelper
     */
    public static  HsvToRgb( hsv:ColorHSV):ColorRGB {
        if (hsv.H == 360) hsv.H = 359; // 360为全黑，原因不明
        let R = 0 , G = 0 , B = 0 ;
        if (hsv.S == 0) {
            return new ColorRGB(hsv.V, hsv.V, hsv.V);
        }
        let S = hsv.S * 1.0 / 255, V = hsv.V * 1.0 / 255;
        let H1 = Math.floor(hsv.H * 1.0 / 60), H = hsv.H;
        let F = H * 1.0 / 60 - H1;
        let P = V * (1.0 - S);
        let Q = V * (1.0 - F * S);
        let T = V * (1.0 - (1.0 - F) * S);
        switch (H1) {
            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;
        }
        R = R * 255;
        G = G * 255;
        B = B * 255;
        while (R > 255) R -= 255;
        while (R < 0) R += 255;
        while (G > 255) G -= 255;
        while (G < 0) G += 255;
        while (B > 255) B -= 255;
        while (B < 0) B += 255;
        return new ColorRGB(Math.floor(R), Math.floor(G), Math.floor(B));
    }



    /**
     * RGB转换HSL
     *
     * @static
     * @param {ColorRGB} rgb
     * @return {*}  {ColorHSL}
     * @memberof ColorHelper
     */
    public static  RgbToHsl( rgb:ColorRGB):ColorHSL {
        let min, max, tmp, H, S, L;
        let R = rgb.R * 1.0 / 255, G = rgb.G * 1.0 / 255, B = rgb.B * 1.0 / 255;
        tmp = Math.min(R, G);
        min = Math.min(tmp, B);
        tmp = Math.min(R, G);
        max = Math.min(tmp, B);
        // H
        H = 0;
        if (max == min) {
            H = 0; // 此时H应为未定义，通常写为0
        } else if (max == R && G > B) {
            H = 60 * (G - B) * 1.0 / (max - min) + 0;
        } else if (max == R && G < B) {
            H = 60 * (G - B) * 1.0 / (max - min) + 360;
        } else if (max == G) {
            H = H = 60 * (B - R) * 1.0 / (max - min) + 120;
        } else if (max == B) {
            H = H = 60 * (R - G) * 1.0 / (max - min) + 240;
        }
        // L 
        L = 0.5 * (max + min);
        // S
        S = 0;
        if (L == 0 || max == min) {
            S = 0;
        } else if (0 < L && L < 0.5) {
            S = (max - min) / (L * 2);
        } else if (L > 0.5) {
            S = (max - min) / (2 - 2 * L);
        }
        return new ColorHSL(Math.floor(H), Math.floor(S * 255), Math.floor(L * 255));
    }

    /**
     * HSL转换RGB
     *
     * @static
     * @param {ColorHSL} hsl
     * @return {*}  {ColorRGB}
     * @memberof ColorHelper
     */
    public static  HslToRgb( hsl:ColorHSL):ColorRGB {
        let R = 0, G = 0, B = 0;
        let S = hsl.S * 1.0 / 255, L = hsl.L * 1.0 / 255;
        // let temp1, temp2, temp3;
        let temp2, temp3;

        if (S == 0) // 灰色
        {
            R = L;
            G = L;
            B = L;
        } else {
            if (L < 0.5) {
                temp2 = L * (1.0 + S);
            } else {
                temp2 = L + S - L * S;
            }
            // temp1 = 2.0 * L - temp2;
            let H = hsl.H * 1.0 / 360;
            // R
            temp3 = H + 1.0 / 3.0;
            if (temp3 < 0) temp3 += 1.0;
            if (temp3 > 1) temp3 -= 1.0;
            R = temp3;
            // G
            temp3 = H;
            if (temp3 < 0) temp3 += 1.0;
            if (temp3 > 1) temp3 -= 1.0;
            G = temp3;
            // B
            temp3 = H - 1.0 / 3.0;
            if (temp3 < 0) temp3 += 1.0;
            if (temp3 > 1) temp3 -= 1.0;
            B = temp3;
        }
        R = R * 255;
        G = G * 255;
        B = B * 255;
        return new ColorRGB(Math.floor(R), Math.floor(G), Math.floor(B));
    }

}

参考

  1. 【C# / Algorithm】RGB、HSV、HSL颜色模型的互相转换
  2. 分享颜色转换之RGB转HSL/HSV方法-ColorConverter by C#
SlowFeather
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HSV和RGB转化小工具
11-24
自己开发的一个HSV和RGB转化的小工具，使用的时VC++ 2005，时间仓促做的不太漂亮，但是好用。有源码，需重新编译。
颜色空间转换
06-28
Convert color between RGB,HSL,HSB,CMYK,YUV,YIQ,XYZ,xyY,Lab,Luv,LCH ...
Python：颜色转换器，一个转换颜色格式、调节颜色的小工具，支持RGB、HSV
最新发布
2401_84139944的博客
05-06 866
我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了，只是里面的项目比较多，水平也是参差不齐，大家可以挑自己能做的项目去练练。这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。工欲善其事必先利其器。
HSV HSL与RGB转换
河边钓虾
02-04 290
算法公式请参考：转换公式 转换工具请参考：在线转换 下方代码可直接编译测试 #include <stdio.h> // #define RAND_MAX_ONE //h:0-360 s:0-1 v:0-1 非百分比 #define RAND_MAX_HUNDRED //h:0-360 s:0-100 v:0-100 百分比 #define MAX(R,G,B) (((R)>(G))?(((R)>(B))?(R):(B)):(((
色彩空间转换小软件
08-06
支持两种YCBCR与RGB的转换标准：HDTV和SDTV。分别采用BT656和BT709系数转换。
cocos creator hsl shader
06-26
cocos creator hsl shader cocos creator 1.9.x 用的色相饱和度亮度插件
Python高光谱图像可视化展示(imgvision 1.7.3)
热门推荐
Syuhen的博客
01-31 1万+
imgvision.spectra()通过一行代码将任意分辨率光谱图像转换至任意光源下的RGB或XYZ空间，配合imgvision.cvtcolor()可以实现任意颜色空间转换
C# RGB与HSV，HSL,HTML颜色相互之前转换
02-09
在C#中，没有内置的类来直接处理HSV或HSL颜色，但可以通过算法将RGB转换为HSV和HSL，反之亦然。例如，你可以编写自定义方法，利用三角函数和数学运算实现这种转换。 HTML颜色通常用6位十六进制表示，如`#FF0000`...
RGB和HSL色彩空间转换
04-16
总的来说，RGB和HSL色彩空间转换涉及颜色理论、图像处理和编程实践，理解这些概念并能进行实际操作对于进行颜色处理的任何工作都十分必要。MATLAB提供的转换函数方便了这一过程，使得在不同色彩空间之间切换变得更加...
glsl-hsl2rgb:GLSL 中 HSL 到 RGB 颜色的转换
06-11
GLSL 中的 HSL 到 RGB 颜色转换。 #pragma glslify : hsl2rgb = require(glsl - hsl2rgb) ... // 75deg hue, 50% sat, 25% lightness vec3 rgb = hsl2rgb( 75.0 / 360.0 , 0.5 , 0.25 ); gl_FragColor = vec4 ...
颜色模型互转 rgb hsl lab hsv
04-30
通过这些文件，你可以直接在C++项目中集成颜色模型转换功能，方便在RGB、HSL、Lab和HSV间进行灵活切换。 在实际开发中，理解并掌握这些颜色模型的转换对于色彩处理、图像分析以及UI设计等场景至关重要。例如，当...
hsl2rgb 和 rgb2hsl 转换：在 RGB 和 HSL 之间转换的功能-matlab开发
06-01
这个包由 3 个文件组成：rgb2hsl.m、hsl2rgb.m 和 hsltest.m。 前两个执行 1d 和 2d 数组（图像）的 HSL 和 RGB 颜色空间之间的颜色转换。 最后一个文件包括用于转换的单元测试。
实现RGB颜色空间到HSV和YCbCr颜色空间的转换
11-22
实现RGB颜色空间到HSV和YCbCr颜色空间的转换
HSV到RGB转换工具
04-27
开发有关bitmap方面的程序时，经常需要将位图的颜色在RGB和HSV色彩空间之间转换，前段时间本人研究过，现在整理一下，希望对大家能有所帮助，
opencv RGB转换成HSV并且从R G B H S V三个单通道输出
04-14
该代码用opencv和vs2010联合编程实现了讲RGB图像转换成HSV图像，并且实现了R G B H S V单通道输出
RGB HSV 颜色模型转换matlab实现
03-15
RGB HSV 颜色模型转换matlab实现
changspace.zip_RGB颜色空间转HSL空间_hsl
07-14
RGB颜色空间和HSL颜色空间是两种常见的颜色表示方法，它们在计算机图形学、图像处理以及色彩设计等领域有着广泛的应用。RGB（Red, Green, Blue）颜色空间基于加性混色原理，通常用于显示器等发光设备，而HSL（Hue, ...
各个颜色空间的转换
cay22的专栏
04-15 1723
// 没有验证过 // RGBYUV // RGBXYZ // RGBLAB // RGBHSV // RGBCMY // XYZLAB // YUV ->XYZ // LAB ->HSV // XYZ ->HSV // RGB ->CMYK // CMYK->CMY // http://www.cnblogs.com/phinecos/archive/2009/05/03/1448121.
Cocos Shader实现HSL和RGB颜色模型
楚游香的博客
05-11 855
HSL和RGB是两种常见的颜色模型，被广泛应用于计算机图形学、数字图像处理、Web设计等领域。在进行颜色处理时，经常需要将HSL和RGB相互转换，本demo演示如何通过Cocos Creator 3.7游戏引擎，用HSL模型来调节图片颜色，并详细介绍HSL和RGB互相转换的方法。一 效果预览色调（Hue）的取值范围是 (0, 360)，饱和度（Saturation）的取值范围是 (-1, 1)，亮...
编程完成图像在RGB、HSV、HSL颜色空间的转换程序。
05-03
以下是Python的代码示例： ```python import colorsys from PIL import Image # 打开图像文件 img = Image.open('image.jpg') # 将图像转为RGB模式 img = img.convert('RGB') # 获取图像的像素矩阵 pixels = img.load() # 遍历所有像素点，并将RGB转为HSV和HSL for i in range(img.size[0]): for j in range(img.size[1]): r, g, b = pixels[i, j] # RGB转HSV h, s, v = colorsys.rgb_to_hsv(r / 255, g / 255, b / 255) # HSV转RGB r1, g1, b1 = tuple(int(x * 255) for x in colorsys.hsv_to_rgb(h, s, v)) # RGB转HSL h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255) # HSL转RGB r2, g2, b2 = tuple(int(x * 255) for x in colorsys.hls_to_rgb(h, l, s)) # 将转换后的颜色设置回像素矩阵 pixels[i, j] = (r1, g1, b1) # 保存转换后的图像 img.save('converted_image.jpg') ``` 这个程序使用了Python内置的colorsys库来进行RGB、HSV、HSL之间的转换，同时使用了Pillow库来打开、保存图像文件。在程序中，我们先将图像转为RGB模式，然后遍历所有像素点，将RGB值转为HSV和HSL，并将转换后的颜色设置回像素矩阵。最后，将转换后的图像保存回文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值