“四舍五入”最接近一小组颜色的颜色值

Question

序言

作为我正在进行的项目的一部分，我试图提供一种在我们的系统中搜索图像的便捷方法。我们目前提供通过各种类型的用户添加的元数据（例如标题、描述、关键字）和通过我们提取的各种元数据（例如 EXIF、IPTC、XMP 等）进行搜索。我还想添加一个“颜色搜索”，类似于您在谷歌的图像搜索中看到的内容。

该项目使用PHP，我们可以使用Imagemagick扩展来分割和量化图像并从图像中提取最“重要”的颜色；我并不完全确定我在这里得到的结果，但它们看起来相当准确，而且肯定比没有好。

问题

我遇到的困难是将这些重要颜色转换为一组代表性颜色，例如，当您查看 Google 的图像搜索 那里有一组 12 种颜色。我想在数学上将我的颜色值“舍入”到最接近的代表颜色，以便我可以使用我检测到的颜色对图像进行索引，然后以这种方式对我的搜索结果进行分面。

有什么建议吗？

Answer 1

第一步是定义要比较的颜色。

第二步是找到您的颜色与您在上一步中选择的颜色之一之间的最小距离。为了能够测量该距离，您需要一个欧几里得空间来对颜色进行建模。

当然，简单的选择是 RGB 空间

以及两种颜色之间的距离 C₁(r₁, g₁, b₁) 和 C₂(r₂ sub>, g₂, b₂) 将是

sqrt( (r₁ - r₂ )² + (g₁ - g₂)² + (b₁ - b₂)²)。

但如果您需要更高的精度，最好使用 Hue-Chroma-Lightness 双锥空间，它是 HSL 圆柱体的衍生形式。

在 RGB 空间中，事情很简单，如 R、G 和 B，其中每个都在单独的轴上。在 HCL 中，我们需要计算每个轴上的坐标。

首先，我们计算色度（与饱和度有点不同）：

Chroma = max(Red, Green, Blue) - min(Red, Green, Blue)

然后我们对 H 进行归一化， C和L值，使得H从0到2（如果我们乘以PI并以弧度为单位覆盖一个圆），C从0到1（三角圆的半径），L从-1 （黑色）至 1（白色）。

接下来，我们采用 z = L 而不进行任何变换，因为从图像中可以清楚地看出它沿着垂直轴移动。

我们可以很容易地观察到，对于一种颜色，色度是距 z 轴的距离，色调是角度。所以我们得到

x = C * cos(H*PI)并且
y = C * sin(H*PI)

此时 x、y 和 z 都将在 [-1, 1] 中，并且两种颜色之间的距离将是，使用与上面相同的公式,

sqrt( (x₁ - x₂)² + (y₁ - y₂)² + (z₁ - z₂)² ) 。

---

为了获得更高的精度并根据人类颜色感知找到最接近的颜色，您可以使用 CIE- L*ab 建模空间并使用这些算法之一。原理与上面两种情况相同，只是算法更复杂。

---

更新（7年后）

xkcd终于推出了我可以在这篇文章中使用的漫画！

https://xkcd.com/1882/

Answer 2

function getSimilarColors (color) {
    var base_colors=["660000","990000","cc0000","cc3333","ea4c88","993399","663399","333399","0066cc","0099cc","66cccc","77cc33","669900","336600","666600","999900","cccc33","ffff00","ffcc33","ff9900","ff6600","cc6633","996633","663300","000000","999999","cccccc","ffffff"];

    //Convert to RGB, then R, G, B
    var color_rgb = hex2rgb(color);
    var color_r = color_rgb.split(',')[0];
    var color_g = color_rgb.split(',')[1];
    var color_b = color_rgb.split(',')[2];

    //Create an emtyp array for the difference betwwen the colors
    var differenceArray=[];

    //Function to find the smallest value in an array
    Array.min = function( array ){
           return Math.min.apply( Math, array );
    };


    //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
    $.each(base_colors, function(index, value) { 
        var base_color_rgb = hex2rgb(value);
        var base_colors_r = base_color_rgb.split(',')[0];
        var base_colors_g = base_color_rgb.split(',')[1];
        var base_colors_b = base_color_rgb.split(',')[2];

        //Add the difference to the differenceArray
        differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
    });

    //Get the lowest number from the differenceArray
    var lowest = Array.min(differenceArray);

    //Get the index for that lowest number
    var index = differenceArray.indexOf(lowest);

    //Function to convert HEX to RGB
    function hex2rgb( colour ) {
        var r,g,b;
        if ( colour.charAt(0) == '#' ) {
            colour = colour.substr(1);
        }

        r = colour.charAt(0) + colour.charAt(1);
        g = colour.charAt(2) + colour.charAt(3);
        b = colour.charAt(4) + colour.charAt(5);

        r = parseInt( r,16 );
        g = parseInt( g,16 );
        b = parseInt( b ,16);
        return r+','+g+','+b;
    }

    //Return the HEX code
    return base_colors[index];
}

Answer 3

这只是一个粗略的想法 - 您需要根据自己的需要进行调整。

基本上，我认为，由于颜色被记录为 RGB，或者作为十六进制字符串“#000000”到“#ffffff”，或者作为 RGB 集“rgb(0,0,0)”到“rgb(255,255,255)” ，并且这些是可互换/可翻译的，这是一个简单的数学舍入问题。

在全部颜色范围中，将有 (16*16)*(16*16)*(16*16) = 256*256*256 = 16,777,216 种可能的颜色。

将颜色舍入到最接近的单个字符十六进制值可将颜色减少为 16*16*16 = 4,096 种可能的颜色。虽然仍然太多，但已经越来越接近了。

将颜色舍入为单个字符值，然后将其进一步限制为 4 (0,3,7,f) 之一，将其减少为 4*4*4 = 32。对我来说足够接近了。

因此，我构建了一个非常基本的 PHP 函数来尝试实现此目的：

function coloround( $incolor ){
  $inR = hexdec( $incolor{0}.$incolor{1} )+1;
  $inG = hexdec( $incolor{2}.$incolor{3} )+1;
  $inB = hexdec( $incolor{4}.$incolor{5} )+1;
 # Round from 256 values to 16
  $outR = round( $outR/16 );
  $outG = round( $outG/16 );
  $outB = round( $outB/16 );
 # Round from 16 to 4
  $outR = round( $outR/4 );
  $outG = round( $outG/4 );
  $outB = round( $outB/4 );
 # Translate to Hex
  $outR = dechex( max( 0 , $outR*4-1 ) );
  $outG = dechex( max( 0 , $outG*4-1 ) );
  $outB = dechex( max( 0 , $outB*4-1 ) );
 # Output
  echo sprintf( '<span style="background-color:#%s;padding:0 10px;"></span> > <span style="background-color:#%s;padding:0 10px;"></span>%s has been rounded to %s<br>' ,
         $incolor , $outR.$outG.$outB ,
         $incolor , $outR.$outG.$outB );
}

当传递十六进制字符串时，该函数会回显原始颜色的样本和缩写颜色的样本。

这只是一个基本的概念验证，因为我不知道 Imagemagick 返回颜色的格式，但您也许可以利用此逻辑来创建您自己的逻辑。

然后，您可以从这 32 种颜色中，对相似的颜色进行分组（其中可能有大约 8 种灰色阴影），并命名其余的颜色，以便您的用户可以通过它们进行搜索。

Answer 4

根据您要查找的颜色数量，为什么不尝试使用按位运算符（PHP 的参考 这里，因为您在问题中提到了）以减少有效数字的数量？您也可以在移动之前对 RGB 值进行四舍五入，以提高准确性。