【Shopify】Color filtersの種類と使い方を解説

悩む人

・Color filtersってどんなのがあるの？
・Color filtersの使い方が知りたい！

こんなご要望にお応えします。

Shopifyでテーマ開発やカスタマイズをしている際、

「もうちょっとここの色を明るくしたり暗くしたりしたいな〜」

「透明度は固定で、色だけテーマ設定から変えられるようにしたいな〜」

なんてことを感じることってありますよね？

トマトソース

そんな時は、色を自在に操れるColor filtersが役立ちます！

ということで、今回はShopifyのテーマ開発で使えるColor filtersの使い方について解説していきます。

本記事を参考にすれば、もう色のカスタマイズでストレスを溜めずに済むようになるはずです。

Color filtersとは

Color filtersとは、CSSのカラーコードを変更したり、抽出したりできるフィルターのことです。

トマトソース

一般的には、カラーテーマ設定で使われることが多いです。

Color filtersの種類

Shopifyで使えるColor filtersは以下の14種類です。

トマトソース

Color filtersは全部で14種類と意外と多いようですね！

Color filtersの使い方

では、Color filters14種類の使い方をそれぞれ解説していきます。

color_to_rgb

color_to_rgbは、CSSのカラー文字列をCSSのrgb()フォーマットに変換します。

color_to_rgbの記述例と出力結果は以下の通りです。

{{ '#fff' | color_to_rgb }}

//出力：
rgb(255, 255, 255)

ちなみに、カラーインプットがαコンポーネントを持っている場合は、CSSのrgba()フォーマットで出力されます。

トマトソース

rgba()フォーマットでの出力例は以下の通りです。

{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}

出力：
rgba(122, 181, 92, 0.5)

color_to_hsl

color_to_hslは、CSSのカラー文字列をCSSのhsl()フォーマットに変換します。

color_to_hslの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_to_hsl }}

//出力：
hsl(100, 38%, 54%)

color_to_hslも上記のcolor_to_rgbと同様に、カラーインプットがαコンポーネントを持っている場合は、CSSのhsla()フォーマットで出力されます。

トマトソース

hsla()フォーマットの出力例は以下の通りです。

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}

//出力：
hsla(100, 38%, 54%, 0.5)

color_to_hex

color_to_hexは、CSSのカラー文字列をCSSのhex6フォーマットに変換します。

color_to_hexの記述例と出力結果は以下の通りです。

{{ 'rgb(0, 0, 0)' | color_to_hex }}

//出力：
#000000

color_to_hexの注意点としては、αコンポーネントが出力されない点です。

color_to_hexではカラーインプットがαコンポーネントを持っている場合でも、出力結果は常時hex6フォーマットでの出力となります。

トマトソース

その場合のhex6フォーマットの出力例は以下の通りです。

{{ 'rgba(0, 0, 0, 0.5)' | color_to_hex }}

//出力：
#000000

color_extract

color_extractは、カラーから指定したコンポーネントを抽出します。

color_extractで抽出できるコンポーネントは、以下の7つです。

color_extractの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_extract: 'red' }}

//出力：
122

color_brightness

color_brightnessは、入力したカラーの明るさを算出します。

color_brightnessの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_brightness }}

//出力：
153.21

color_modify

color_modifyは、指定したカラーコンポーネントで修正します。

指定できるカラーコンポーネントとその範囲は以下の通りです。

color_modifyの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_modify: 'red', 255 }}

//出力：
#ffb55c

上記の例では、redの値を255に指定しているため、出力結果は「7a」から「ff」と変換されています。

color_modifyでhexからrgbaに変換できる

color_modifyを使ってalphaを指定すると、入力したカラー文字列がhexフォーマットでも出力を以下のようにrgba()フォーマットに変換して出力できます。

{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

//出力：
rgba(122, 181, 92, 0.85)

トマトソース

これはちょっと便利そうですね！

color_lighten

color_lightenは、指定した値で色を明るくします。

明るさは1〜100%の間で指定できます。

color_lightenの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_lighten: 30 }}

//出力：
#d0e5c5

color_darken

color_darkenは、指定した値で色を暗くします。

暗さは1〜100%の間で指定できます。

color_darkenの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_darken: 30 }}

//出力：
#355325

color_saturate

color_saturateは、指定した値で色の彩度を明るく変更します。

彩度は1〜100%の間で指定できます。

color_saturateの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_saturate: 30 }}

//出力：
#6ed938

color_desaturate

color_desaturateは、指定した値で色の彩度を落とします。

彩度は1〜100%の間で指定できます。

color_desaturateの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_desaturate: 30 }}

//出力：
#869180

color_mix

color_mixは、二色のカラーをブレンド（混同）します。

ブランド具合は1〜100%の間で指定できます。

color_mixの記述例と出力結果は以下の通りです。

{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}

//出力：
#bdbb94

ちなみに、color_mixを使う場合、片方がαコンポーネントを持っていて、もう片方が持っていない場合は、αコンポーネントを持っていない方の色は1として算出されます。

トマトソース

そのような場合は、以下のような出力結果となります。

{{ 'rgba(122, 181, 92, 0.75)' | color_mix: '#ffc0cb', 50 }}

//出力：
rgba(189, 187, 148, 0.875)

上記のように、αコンポーネント0.75と1を足して割った数値が出力結果のαコンポーネントとして出力されています。

color_contrast

color_contrastは、二色のカラーのコントラスト比率を算出します。

コントラスト比は、1を基準とした結果が出力され、例えば、コントラスト比が4:1であれば、4という出力結果となります。

color_contrastの記述例と出力結果は以下の通りです。

{{ '#495859' | color_contrast: '#fffffb' }}

//出力：
7.4

color_contrastの補足として、Shopifyでは見やすさなどの観点から、コントラスト比を最低でも3:1〜4.5:1を推奨しています。

Shopifyで推奨されているコントラスト比率について詳しくは、「WCAG 2.0 level AA」や「 Level AAA 」をご覧ください。

color_difference

color_differenceは、二色のカラーの色の違いや距離を算出します。

見やすさなどの観点から、W3Cでは色の差異が500以上になることが推奨されています。

color_differenceの記述例と出力結果は以下の通りです。

{{ '#ff0000' | color_difference: '#abcdef' }}

//出力：
528

brightness_difference

brightness_differenceは、二色のカラーの明るさの差異を算出します。

見やすさなどの観点から、W3Cでは明るさの差異が125以上になることが推奨されています。

brightness_differenceの記述例と出力結果は以下の通りです。

{{ '#fff00f' | brightness_difference: '#0b72ab' }}

//出力：
129

Color filtersの種類と使い方を解説：まとめ

今回は、Shopifyで使えるフィルターの一つ、Color filtersについて解説してきました。

正直そこまで便利なものでもなさそうですが、もし何か色の出力などで困った際はこの記事をぜひご活用いただければ幸いです。

関連記事 URL filtersの種類と使い方を解説①

関連記事 画像がうまく表示されない時の対処法｜画像URLフィルターについて解説

関連記事 ストア通貨の設定とMoney filtersの使い方を解説