はじめに
今回の記事では、ShopifyのColor filterを全てまとめてみました。
こちらを参考にしました。
Color filter
Colorフィルタは、CSS色の文字列からプロパティーを変更したり、抽出したりします。
一般的に、カラーテーマの設定で使用されます。
Color filtersを見てみましょう。
color_to_rgb
CSS色の文字列を、rgb()形式に変換します。
{{ '#7ab55c' | color_to_rgb }}
rgb(122, 181, 92)
入力色にalpha要素（透過度）を含む時、出力はrgba()形式になります。
{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}
rgba(122, 181, 92, 0.5)
color_hsl
CSS色の文字列を、hsl()形式に変換します。
{{ '#7ab55c' | color_to_hsl }}
hsl(100, 38%, 54%)
入力色にalpha要素を含む時、出力はhsla()形式になります。
{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}
hsla(100, 38%, 54%, 0.5)
color_to_hex
CSS色の文字列を、hex6形式に変換します
{{ 'rgb(122, 181, 92)' | color_to_hex }}
#7ab55c
Hex出力では、常にhex6形式で出力されます。
入力色にalpha要素を含んでいても、出力には表示されず、alpha要素の値が1に変わってしまいます。
{{ 'rgba(122, 181, 92, 0.5)' | color_to_hex }}
#7ab55c
入力値：rgba(122, 181, 92, 0.5) → 出力値：#7ab55c ( = rgba(122, 181, 92, 1.0) )
color_extract
色から特定の要素を抽出することができます。
抽出できる要素は、red、blue、green、alpha、hue(色相)、saturation(彩度)、lightness(明度)の7つです。
{{ '#7ab55c' | color_extract: 'red' }}
122
color_brightness
指定した色の明るさを計算し、その値を抽出します。
明るさの計算には、W3C recommendations for calculating perceived brightness が使用されています。
{{ '#7ab55c' | color_brightness }}
153.21
color_modify
入力した色の指定した要素を変更します。
変更値の条件は以下の通りです。
- red、green、blue の値は
0から255の間の数値 - alpha は
0は1までの10進数 - hue(色相)は、
0° ~ 360°の間の値 - saturation(彩度)とlightness(明度)は、
0~ 100 %の間の値
例では、red要素の値を、7aからff(255)に変更しています。
{{ '#7ab55c' | color_modify: 'red', 255 }}
#ffb55c
入力値：#7ab55c → 出力値：#ffb55c
このcolor_modifyフィルタは、変更された要素が表示できる形式でCSS色を返します。
alpha要素を変更した場合を考えます。
入力した色が hex形式でalpha要素を変更するとき、hex形式ではalpha要素は表示できません。
そのため、color_modifyフィルタは、rgba()形式でCSS色を返します。
{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}
rgba(122, 181, 92, 0.85)
入力値：#7ab55c → 出力値：rgba(122, 181, 92, 0.85)
color_lighten
入力した色を、指定した割合(%)だけ明るくします。
変更値は、0 ~ 100[%]で指定します。
{{ '#7ab55c' | color_darken: 30 }}
#d0e5c5
入力値：#7ab55c → 出力値：#d0e5c5
color_darken
入力した色を、指定した割合(%)だけ暗くします。
変更値は、0 ~ 100%で指定します。
{{ '#7ab55c' | color_darken: 30 }}
#355325
入力値：#7ab55c → 出力値：#355325
color_saturate
入力した色の彩度を、指定した割合(%)だけ上げます
変更値は、0 ~ 100%で指定します。
{{ '#7ab55c' | color_saturate: 30 }}
#6ed938
color_desaturate
入力した色の彩度を、指定した割合(%)だけ下げます
変更値は、0 ~ 100%で指定します。
{{ '#7ab55c' | color_saturate: 30 }}
#869180
入力値：#7ab55c → 出力値：#869180
color_mix
入力した色とcolor_mixで指定した2色を、指定した割合(%)でプレンドすることができます。
{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}
#bdbb94
入力値：( #7ab55c , #ffc0cb ) → 出力値：#bdbb94
もし、一方の入力にalpha要素があり、他方にalpha要素がない色をブレンドする場合、alpha要素がない方のalpha要素の値は、1としてブレンドされます。
{{ 'rgba(122, 181, 92, 0.75)' | color_mix: '#ffc0cb', 50 }}
rgba(189, 187, 148, 0.875)
入力値：( rgba(122, 181, 92, 0.75) , #ffc0cb ) → 出力値：rgba(189, 187, 148, 0.875)
color_contrast
2色間のコントラスト比を計算します。
例えば、2色間のコントラスト比が3.5:1の場合、フィルタは3.5を返します。
色を指定する順番は関係なく、フィルタが自動的に明るい色と暗い色を検出して計算してくれます。
コントラスト比は、WCAG2.0のアクセシビリティ評価の指標になります。
{{ '#495859' | color_contrast: '#fffffb' }}
7.4
#495859 #fffffb
color_difference
2色間の色差を計算して、その値を返します。
色差とは色の違いを値にしたもので、色差の値が大きほど色の区別がしやすく、値が小さいとほど色の区別が困難になります。
アクセフィリティに関して、W3Cは、色差を500以上にすることを推奨しています。
色差の計算方法に関しては、こちらに記載されています。
{{ '#ff0000' | color_difference: '#abcdef' }}
528
#ff0000 #abcdef
brightness_difference
2色間の明るさの差を計算して、その値を返します。
先程のW3Cは、明るさの差を125以上にすることを推奨しています。
{{ '#fff00f' | brightness_difference: '#0b72ab' }}
129
#fff00f #0b72ab
終わりに
今回の記事はここまでになります。
お疲れさまでした。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。