16

画像の上位 5 つの支配的な色のカラー パレットを生成する必要があります。Embedly の抽出ツールまたはColor Thiefの結果を再現したいと考えています。

次のコマンドでは、わずかに異なる結果が得られます。

convert testimage.jpg  -format %c -colorspace LAB -colors 5 histogram:info:- | sort -n -r
    157154: ( 19, 28, 35) #131C23 srgb(19,28,35)
     16164: ( 27, 51, 77) #1B334D srgb(27,51,77)
     15725: ( 79, 88, 84) #4F5854 srgb(79,88,84)
      8608: ( 44, 77,103) #2C4D67 srgb(44,77,103)
      5149: ( 84,126,150) #547E96 srgb(84,126,150)

単純なグラフィックス (Google ロゴなど) ではうまく機能しないことがわかったので、5 色に量子化する必要があるかどうかは少しわかりません。より大きなカラー パレットを使用して、上位n色だけを選択する方がよいでしょうか?

これは、使用される量子化アルゴリズムに関する次の質問につながります。Embedly Extract の結果を見ると、出力色は必ずしも最も頻度が高いわけではありませんが、互いに最も異なるクラスターのように見えます。

たとえば、非常に暗い画像 (黒/茶色) に明るい赤の小さなディテールがあるとします。ImageMagick に赤が含まれていることを確認するにはどうすればよいですか? （これがばかげているように聞こえる場合はお詫びします。色彩理論は私にとってまったく新しいものです！）。

以下は、テストに使用した画像です。

ここに画像の説明を入力

4

2 に答える 2

26

「トップ 5 のドミナント カラー」を定義していただけますか? これは思ったほど簡単ではないと思います...

これは、 Embed.lyとColor Thiefによるテスト画像の解釈のために提供したリンクにアクセスしたときに表示されるさまざまな結果によって明確に示されています。

Embed.ly

以下は、Embed.ly が 5 つの抽出された色としてリストしたものです (ページの HTML ソース コードを調べて調べました)。

 rgb(13, 28, 37)
 rgb(44, 74, 94)
 rgb(71, 112, 131)
 rgb(105, 147, 163
 rgb(198, 209, 216)

ImageMagick を使用して、次の 5 色のカラー パレットを作成します。

 convert                        \    
     -size 60x60                \    
      label:"        Embed.ly"  \
      xc:"rgb(13, 28, 37)"      \    
      xc:"rgb(105, 147, 163"    \    
      xc:"rgb(71, 112, 131)"    \    
      xc:"rgb(44, 74, 94)"      \    
      xc:"rgb(198, 209, 216)"   \
     +append                    \    
      embedly-palette-from-testimage.jpg

結果を見てください：

Embed.ly の 5 色の選択...

色泥棒

Color Thief は、1 つの色を「支配的な」色として挙げています。

 rgb(21, 30, 38)

Color Thief には、さらに 9 色のパレットもリストされています (ここでも、値は HTML ソース コードから取得されます)。

 rgb(18, 27, 35)
 rgb(100, 142, 164) 
 rgb(51, 84, 110) 
 rgb(32, 53, 74)
 rgb(47, 46, 43)
 rgb(83, 85, 76)
 rgb(145, 143, 128) 
 rgb(106, 141, 140) 
 rgb(62, 84, 81)

ImageMagick を使用して、Color Thief の 9 つのパレット カラーを含むカラー パレットを作成します。

 convert                        \    
     -size 60x60                \    
      label:"     Color Thief"  \
      xc:"rgb(18, 27, 35)"      \    
      xc:"rgb(100, 142, 164)"   \
      xc:"rgb(51, 84, 110)"     \    
      xc:"rgb(32, 53, 74)"      \    
      xc:"rgb(47, 46, 43)"      \    
      xc:"rgb(83, 85, 76)"      \    
      xc:"rgb(145, 143, 128)"   \
      xc:"rgb(106, 141, 140)"   \
      xc:"rgb(62, 84, 81)"      \    
     +append                    \    
      ct-palette-from-testimage.jpg

結果を見てください：

色泥棒が抽出した9色のパレット...

Color Thief は に基づいていquantize.jsます。によって提供されるメディアン カットアルゴリズムを使用してquantize.js類似の色をクラスタ化し、最大のクラスタからベース カラーを「ドミナント」カラーとして返します。

「パレットの色」として返す色を決定する方法は、Github でホストされているソース コードから決定できます。

ImageMagick の 5 つの量子化された色

あなたの質問には、画像を5色のみに量子化した後のImageMagickのヒストグラムの出力がリストされています。

次の 5 色を使用して、別のカラー パレットを作成します。

 convert                        \
     -size 60x60                \
      label:"   ImageMagick"    \
      xc:"srgb(19,28,35)"       \
      xc:"srgb(79,88,84)"       \
      xc:"srgb(44,77,103)"      \
      xc:"srgb(27,51,77)"       \
      xc:"srgb(84,126,150)"     \
     +append                    \
      im-palette-from-testimage.jpg

結果を見てください：

ImageMagick の 5 つの量子化された色...

3つのカラーパレットを比較

このコマンドを使用して、3 つのカラー パレットの視覚的な比較を作成します。

 convert                                    \
      ct-palette-from-testimage.jpg         \
      embedly-palette-from-testimage.jpg    \
      im-palette-from-testimage.jpg         \
     -append                                \
      color-palettes.jpg

結果：

作成した 3 つのカラー パレットを直接視覚的に比較...

明らかにわかるように、Color Thief にも、ImageMagick のヒストグラムからの 5 つの量子化された色にも、Embed.ly によって返されたかなり明るい 5 番目の色は含まれていません。

テスト画像と再度比較します。

テスト画像...

「より大きなカラー パレットを使用して、上位 n 色だけを選択する方がよいでしょうか?」

テストして自分で見つけてみませんか？

于 2014-11-13T19:32:44.853 に答える