📘 公式リファレンス🔧 リファレンス/フィルター初級

color_mix フィルター（色のブレンド）

2つの色を指定の割合でブレンドし、中間色を生成するフィルター。パーセンテージが 100 なら元の色、0 なら指定した色が返される。

用途

テーマカスタマイザーで複数のカラー設定を持つときに、プライマリカラーとセカンダリカラーを混ぜたバリエーション色を動的に生成する。ホバー状態やグラデーション背景の中間色として活用。

設置場所

CSS 変数やインラインスタイルの色値として、`{{ color1 | color_mix: color2, 50 }}` の形で Liquid 内に記述する。テーマ CSS 内で色を動的に生成したい箇所に使用。

注意点

パーセンテージは 0 ～ 100 の範囲で指定する必要がある。色値は 16 進数（#RRGGBB）または rgb / rgba 形式で指定でき、一方が rgba で透明度を持つ場合、もう一方には透明度 1.0 が自動的に補われる。色値が無効な形式だと予期しない結果が返される可能性があるため、テーマカスタマイザーで色選択ピッカーを使う場合は Liquid で追加のバリデーションは不要。

タグ:colorcss-variabledesignblending

仕様

59 行 / json

{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "&gt; Tip:\n&gt; A percentage factor of 100 returns the color being filtered. A percentage factor of 0 returns the color\n&gt; supplied to the filter.",
  "parameters": [
    {
      "description": "A color to mix with the provided color.",
      "name": "color",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    },
    {
      "description": "The percentage amount to mix the colors by.",
      "name": "percent",
      "positional": true,
      "required": true,
      "types": [
        "number"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#E800B0' | color_mix: '#00936F', 50 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "",
      "description": "If one input has an alpha component, but the other does not, an alpha component of 1.0 will be assumed for the input without an alpha component.\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ 'rgba(232, 0, 176, 0.75)' | color_mix: '#00936F', 50 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Blends two colors together by a specific percentage factor. The percentage must be between 0 and 100.",
  "syntax": "string | color_mix: string, number",
  "name": "color_mix"
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/filters.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

color_mix フィルター（色のブレンド）

仕様

出典・ライセンス

関連項目

avatar フィルター（顧客アバター画像HTML生成）

default_errors フィルター（フォーム送信エラーを日本語化）

date フィルター（日付を指定形式でフォーマット）

payment_terms フィルター（Shop Pay分割払いバナーを生成）

abs フィルター（数値の絶対値を取得）

append フィルター（文字列の末尾に追加）