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

color_extract フィルター（色成分の抽出）

カラーコード（例: #EA5AB9）から指定した色成分（赤、緑、青、色相、彩度、明度など）を数値で抽出するフィルター。

用途

テーマカスタマイザーで設定された色から特定の RGB 値や HSL 値を取得し、JavaScript や動的な CSS 値として利用したいとき。

設置場所

Liquid 内で `{{ color_value | color_extract: 'red' }}` のように記述し、color_value に色コード、'red' の部分に抽出する成分名(alpha / red / green / blue / hue / saturation / lightness)を指定する。

注意点

抽出可能な成分は alpha、red、green、blue、hue、saturation、lightness の7種類のみ。戻り値は数値型なので、百分率や 256 段階の値として計算処理が必要な場合は JavaScript で調整する。色コードは 16 進数形式（#RRGGBB または #RRGGBBAA）で指定する必要がある。

タグ:colorfilterrgbhslcustomization

仕様

40 行 / json

{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "Accepts the following color components:\n\n- `alpha`\n- `red`\n- `green`\n- `blue`\n- `hue`\n- `saturation`\n- `lightness`",
  "parameters": [
    {
      "description": "The color component that you want to extract.",
      "name": "color_component",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    }
  ],
  "return_type": [
    {
      "type": "number",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | color_extract: 'red' }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Extracts a specific color component from a given color.",
  "syntax": "string | color_extract: string",
  "name": "color_extract"
}

出典・ライセンス

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

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

color_extract フィルター（色成分の抽出）

仕様

出典・ライセンス

関連項目

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

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

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

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

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

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