javascript - Hex 到 HunterLab 颜色转换值

标签 javascript jquery colors hex

我必须将 XYZ 转换为 HunterLab 颜色。我已经使用这个网站计算 ( http://www.easyrgb.com/en/math.php ) 尝试了下面的代码。问题是我没有得到准确的输出值。

在下面的 Fiddle 中,我选择了这个十六进制颜色代码 ("#e33054")。我的三恩时结果是43.6862,63.8433,16.6580

当我与这个网站 (http://www.color-hex.com/color/e33054) 比较时,输出 (43.6863, 63.8431, 16.6536) 值有点错误。

我附上了 easyrgb.com 网站的截图。我使用了下图中的大部分 X、Y、Z 值。如果我想显示正确的准确结果,我需要使用哪些 X、Y、Z 值。

enter image description here

JsFiddle

$(document).ready(function() {

function RGBtoXYZ(R, G, B)
{
    var_R = parseFloat( R / 255 )        
    var_G = parseFloat( G / 255 )        
    var_B = parseFloat( B / 255 )        

    if ( var_R > 0.04045 ) var_R = Math.pow(( ( var_R + 0.055 ) / 1.055 ), 2.4)
    else                   var_R = var_R / 12.92
    if ( var_G > 0.04045 ) var_G = Math.pow(( ( var_G + 0.055 ) / 1.055 ), 2.4)
    else                   var_G = var_G / 12.92
    if ( var_B > 0.04045 ) var_B = Math.pow(( ( var_B + 0.055 ) / 1.055 ), 2.4)
    else                   var_B = var_B / 12.92

    var_R = var_R * 100
    var_G = var_G * 100
    var_B = var_B * 100

    //Observer. = 2°, Illuminant = D65
    X = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805
    Y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722
    Z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505
    return [X, Y, Z]
}

function XYZtoHunter(X, Y, Z) 
{
    var_Ka = ( 175.0 / 198.04 ) * ( 100.000 + 98.03894 )
    var_Kb = (  70.0 / 218.11 ) * ( 100.000 + 118.1045 )

    Hunter_L = 100.0 * Math.sqrt( Y / 100.000 )
    Hunter_a = var_Ka * ( ( ( X / 98.03894 ) - ( Y / 100.000 ) ) / Math.sqrt( Y / 100.000 ) )
    Hunter_b = var_Kb * ( ( ( Y / 100.000 ) - ( Z / 118.1045 ) ) / Math.sqrt( Y / 100.000 ) )
    return [Hunter_L, Hunter_a, Hunter_b]
}

$("#flat").spectrum({
        color: "#fff",
        showInput: true,
        preferredFormat: "hex6",

        change: function(color) {
      var xyz = color.toRgbString().replace('rgb(','');
            var xyzclr = xyz.replace(')','');
            var mystring = xyzclr;
            var splits = mystring.split(",");
      var bbb = RGBtoXYZ(splits[0], splits[1], splits[2]);
      var ccc = XYZtoHunter(bbb[0], bbb[1], bbb[2]);
      $(".hunterlb").text("Hunter Lab: " + ccc);
      }
      });

});

最佳答案

这可能与计算中的精度问题或各种矩阵和光源数据的舍入方式有关。

作为引用,我使用 #e33054 获得并使用 Colour 计算的 CIE XYZ 三刺激值 如下:

[0.343348156796269 0.190877270586848 0.102641996187028]

这不同于 http://www.color-hex.com/color/e33054[34.3357 19.0849 10.2616]

虽然这是一个有争议的实际问题,但您实际上遇到了一个主要的实现问题,它也影响了您引用的网站,因为您得到的结果几乎相同:

根据您在 RGBtoXYZ 函数中使用的传递函数和转换矩阵,假定您的十六进制值使用 sRGB 色彩空间进行编码。 sRGB 使用 D65 光源,其 CIE XYZ 三刺激值如下:

[95.045592705167152 100.000000000000000 108.905775075987847]

但是您的XYZtoHunter 函数使用不同的引用白点,接近C:

[98.03894 100.000 118.1045]

这是不正确的,您需要使用与用于 sRGB 到 CIE XYZ 转换的光源相同的光源,或者将您的三刺激值在色度上调整为 XYZtoHunter 函数使用的光源。

我已经为您的测试颜色计算了各种光源下相应的 Hunter Lab 值:

RGB:  [227.000000000000000 48.000000000000000 84.000000000000000]
XYZ:  [0.343348156796269 0.190877270586848 0.102641996187028]
A [46.504499644334125 64.843762706004426 10.523794703973838]
C [43.793566931997233 65.186253736429975 15.569392726793327]
D50 [44.346077037498887 68.520955438240733 13.605094920688586]
D60 [43.868910583037632 67.708490946827283 14.514756461641493]
D65 [43.688755978973106 67.215867228676174 14.862203270379064]
D75 [43.406074307560630 66.195808970976557 15.425166890191013]
F2 [44.802450532649551 68.731031818870903 12.746488963663195]
TL 4 [45.145148163779659 67.238144444096079 12.884252260395227]
UL 3000 [46.368214893847501 65.905510666492106 10.227507087643088]

获取这些值的代码:

import numpy as np
import colour
from colour.notation.triplet import HEX_to_RGB

RGB = HEX_to_RGB('#e33054')
print('RGB: ', np.round(RGB * 255))
print('XYZ: ', colour.sRGB_to_XYZ(RGB))
for name, illuminant in sorted(
        colour.HUNTERLAB_ILLUMINANTS['cie_2_1931'].items()):
    XYZ = colour.RGB_to_XYZ(
        RGB,
        colour.ILLUMINANTS['cie_2_1931']['D65'],
        colour.XYZ_to_xy(illuminant.XYZ_n),
        colour.sRGB_COLOURSPACE.RGB_to_XYZ_matrix,
        decoding_cctf=colour.sRGB_COLOURSPACE.decoding_cctf)
    print(name, colour.XYZ_to_Hunter_Lab(
        XYZ * 100, XYZ_n=illuminant.XYZ_n, K_ab=illuminant.K_ab))

关于javascript - Hex 到 HunterLab 颜色转换值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46128258/

相关文章:

javascript - 为什么 child 功能不起作用?

javascript - 动态更新从 AJAX 查询返回的 JSON 数组

java - 将 RGBA 值转换为十六进制颜色代码

javascript - 删除 SQL 事务在 javascript 中不起作用

javascript - 使用 Express.js 从 Angular.js 下载文件

Javascript 属性镜像到另一个实例

r - 为 stat_density2d 图手动设置 scale_alpha

php - 从 JQuery 插件收集使用分析数据

javascript - 从 .csv 中提取的变量不会添加

html - html 中的 StackExchange 颜色图标