カラーパレット抽出

palette

palette パラメータは画像から色のパレットを抽出し、指定された形式で返します。パレットの抽出は画像処理の後に行われるため、任意の調整やクロッピング効果を適用すると、色のパレットのレスポンスが変わります。有効な値は css と json です。

このパラメータは一般的に、2 つのパレットセットを出力します。両方のパレットセットは画像での色の優先順位に基づいて色を選択します。デフォルトのセットは厳密にアルゴリズムに基づいており、画像内の色の頻度に基づいています。"優位性"セットも頻度を重視しますが、画像のカラースペース全体でより調和のとれたパレットを提供するように色を選択し、色を相対値で名前付けます。Vibrant.js (opens in a new tab) のように。

デフォルトのパレットセットはデフォルトで 6 色ですが、colors パラメータでオーバーライドできます。優位性パレットセットは最大 6 つの名前付きの色を提供します:

Vibrant
Vibrant Dark
Vibrant Light
Muted
Muted Dark
Muted Light

優位性パレットは、画像の色が各名前の基準を満たすかどうかに応じて異なります（生成されない場合もあります）。すべての色、一部の色、またはなしを返す場合がありますが、ほとんどの画像は完全なセットを返します。

`palette=css`

画像リクエストへの応答は、text/css MIME タイプを持つ CSS ファイルになります。クラスのペアには「foreground」と「background」の定義があります。 foreground クラスには color プロパティが定義され、background クラスには background-color プロパティが定義されます。 CSS 出力には、image を置き換えるために prefix が設定されている場合、白と黒も含まれます。

.image-fg-1 {
  color: #ffd807 !important;
}
.image-bg-1 {
  background-color: #ffd807 !important;
}
.image-fg-2 {
  color: #6dca9a !important;
}
.image-bg-2 {
  background-color: #6dca9a !important;
}
.image-fg-3 {
  color: #04a450 !important;
}
.image-bg-3 {
  background-color: #04a450 !important;
}
.image-fg-4 {
  color: #971d01 !important;
}
.image-bg-4 {
  background-color: #971d01 !important;
}
.image-fg-5 {
  color: #566363 !important;
}
.image-bg-5 {
  background-color: #566363 !important;
}
.image-fg-6 {
  color: #463a49 !important;
}
.image-bg-6 {
  background-color: #463a49 !important;
}
.image-fg-ex-1 {
  color: #ffffff !important;
}
.image-bg-ex-1 {
  background-color: #ffffff !important;
}
.image-fg-ex-2 {
  color: #000000 !important;
}
.image-bg-ex-2 {
  background-color: #000000 !important;
}
.image-fg-vibrant {
  color: #ffd807 !important;
}
.image-bg-vibrant {
  background-color: #ffd807 !important;
}
.image-fg-muted-dark {
  color: #2b5557 !important;
}
.image-bg-muted-dark {
  background-color: #2b5557 !important;
}
.image-fg-muted {
  color: #589964 !important;
}
.image-bg-muted {
  background-color: #589964 !important;
}
.image-fg-vibrant-light {
  color: #a3e0da !important;
}
.image-bg-vibrant-light {
  background-color: #a3e0da !important;
}
.image-fg-muted-light {
  color: #d2cfb7 !important;
}
.image-bg-muted-light {
  background-color: #d2cfb7 !important;
}
.image-fg-vibrant-dark {
  color: #018f53 !important;
}
.image-bg-vibrant-dark {
  background-color: #018f53 !important;
}

こちらが実際の動作です:

<link
  rel="stylesheet"
  href="https://static.imgix.net/treefrog.jpg?w=640&h=320&fit=crop&palette=css&class=frog"
/>

A very colorful little frog

Original Palette

Dominance Palette

上記のように、パレットの計算はすべての他のリサイズや強調操作の後に行われます。こちらは、同じ画像にセピアフィルタを適用したもので、パレットは６色に制限されています：

<link
  rel="stylesheet"
  href="https://static.imgix.net/treefrog.jpg?w=640&h=320&fit=crop&palette=css&colors=8&sepia=80&class=frog2"
/>

A more subdued, sepia-tone frog

Original Palette

Dominance Palette

`palette=json`

レスポンスは、application/json MIME タイプの JSON オブジェクトです。JSON オブジェクトには、次の３つのトップレベルプロパティがあります：浮動小数点の average_luminance 値、オリジナルのパレットの色の配列である colors、Vibrant.js スタイルの値を表す dominant_colors 配列です。

colors および dominant_colors 配列内の各色には、その red、green、blue コンポーネント（0.0 から 1.0 までの浮動小数点数で表される）および hex 値を記述するハッシュが含まれています。

palette が json に設定されている場合、prefix パラメータは無視されます。

以下は、上記で使用したツリーフロッグの画像からの JSON ペイロードです：

{
  "average_luminance": 0.293949,
  "colors": [
    {
      "red": 1,
      "hex": "#ffd807",
      "blue": 0.027451,
      "green": 0.847059
    },
    {
      "red": 0.427451,
      "hex": "#6dca9a",
      "blue": 0.603922,
      "green": 0.792157
    },
    {
      "red": 0.0509804,
      "hex": "#0da46e",
      "blue": 0.431373,
      "green": 0.643137
    },
    {
      "red": 0.592157,
      "hex": "#971d01",
      "blue": 0.00392157,
      "green": 0.113725
    },
    {
      "red": 0.337255,
      "hex": "#566363",
      "blue": 0.388235,
      "green": 0.388235
    },
    {
      "red": 0.27451,
      "hex": "#463a49",
      "blue": 0.286275,
      "green": 0.227451
    }
  ],
  "dominant_colors": {
    "vibrant": {
      "red": 1,
      "hex": "#ffd807",
      "blue": 0.027451,
      "green": 0.847059
    },
    "muted_light": {
      "red": 0.823529,
      "hex": "#d2cfb7",
      "blue": 0.717647,
      "green": 0.811765
    },
    "muted": {
      "red": 0.345098,
      "hex": "#589964",
      "blue": 0.392157,
      "green": 0.6
    },
    "vibrant_dark": {
      "red": 0.00392157,
      "hex": "#018f53",
      "blue": 0.32549,
      "green": 0.560784
    },
    "vibrant_light": {
      "red": 0.639216,
      "hex": "#a3e0da",
      "blue": 0.854902,
      "green": 0.878431
    },
    "muted_dark": {
      "red": 0.168627,
      "hex": "#2b5557",
      "blue": 0.341176,
      "green": 0.333333
    }
  }
}

注意

colorquant を使用しても palette パラメータの結果に影響しません。 colorquant パラメータは、ベース画像に基づいて表示される色の数を制限します。ただし、これらの色は画像データ自体に存在します。

CSSプレフィックスパレットの色数