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

color_lighten フィルター（色を明るくする）

16進数カラーコードを指定した比率で明るくするフィルター。0～100 の範囲で指定したパーセンテージ分、色を淡くする。

用途

ボタンやバッジの背景色をテーマ設定から読み込み、ホバー時の明るい色を動的に生成したいとき。また、ダークモード対応時に同じ色を複数の明度で使い分ける場合に活用する。

設置場所

色変数を扱う CSS 内や Liquid テンプレートで、`{{ '#EA5AB9' | color_lighten: 30 }}` の形で使用する。settings.product_color などのメタフィールドや theme settings の色値に対してフィルターを適用できる。

注意点

パーセンテージは 0～100 の範囲に限定される。範囲外の値を渡すと正しく動作しないため、ユーザー入力や計算結果には事前にバリデーションを加える。また、色値が正しい 16進数形式（「#」で始まる6桁または3桁）である必要がある。不正な形式を渡すとエラーが発生するため、色設定の信頼性を確保する。

タグ:colorfilterlightenhex-colortheme-customization

仕様

40 行 / json

{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "parameters": [
    {
      "description": "The amount to lighten the provided color by.",
      "name": "percent",
      "positional": true,
      "required": true,
      "types": [
        "number"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | color_lighten: 30 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Lightens a given color by a specific percentage. The percentage must be between 0 and 100.",
  "syntax": "string | color_lighten: number",
  "name": "color_lighten"
}

出典・ライセンス

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

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

color_lighten フィルター（色を明るくする）

仕様

出典・ライセンス

関連項目

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

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

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

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

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

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