【Shopify】LiquidのColor filterを全てまとめてみた話

#はじめに
今回の記事では、ShopifyのColor filterを全てまとめてみました。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/color-filters)を参考にしました。
#Color filter
Colorフィルタは、CSS色の文字列からプロパティーを変更したり、抽出したりします。

一般的に、カラーテーマの設定で使用されます。

Color filtersを見てみましょう。

##color_to_rgb
`CSS色の文字列を、rgb()形式に変換します。`

```.liquid
{{ '#7ab55c' | color_to_rgb }}
```
>rgb(122, 181, 92)


入力色に`alpha`要素（透過度）を含む時、出力は`rgba()`形式になります。

```.liquid
{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}
```
>rgba(122, 181, 92, 0.5) 




##color_hsl
`CSS色の文字列を、hsl()形式に変換します。`

```.liquid
{{ '#7ab55c' | color_to_hsl }}
```
>hsl(100, 38%, 54%)

入力色に`alpha`要素を含む時、出力は`hsla()`形式になります。

```.liquid
{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}
```
>hsla(100, 38%, 54%, 0.5)


##color_to_hex
`CSS色の文字列を、hex6形式に変換します`

```.liquid
{{ 'rgb(122, 181, 92)' | color_to_hex }}
```
>\#7ab55c

Hex出力では、**常にhex6形式**で出力されます。

**入力色に`alpha`要素を含んでいても、出力には表示されず、`alpha`要素の値が`1`に変わってしまいます。**

```.liquid
{{ '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つです。

```.liquid
{{ '#7ab55c' | color_extract: 'red' }}
```
>122


##color_brightness
`指定した色の明るさを計算し、その値を抽出します。`

明るさの計算には、[W3C recommendations for calculating perceived brightness](https://www.w3.org/TR/AERT/#color-contrast) が使用されています。

```.liquid
{{ '#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)`に変更しています。

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

>\#ffb55c

入力値：`#7ab55c` → 出力値：`#ffb55c`

この`color_modify`フィルタは、**変更された要素が表示できる形式でCSS色を返します。**

`alpha`要素を変更した場合を考えます。

入力した色が `hex`形式で`alpha`要素を変更するとき、hex形式では`alpha`要素は表示できません。

そのため、color_modifyフィルタは、`rgba()`形式でCSS色を返します。

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

>rgba(122, 181, 92, 0.85)

入力値：`#7ab55c` → 出力値：`rgba(122, 181, 92, 0.85)`


##color_lighten
`入力した色を、指定した割合(%)だけ明るくします。`

変更値は、`0 ~ 100`[%]で指定します。

```.liquid
{{ '#7ab55c' | color_darken: 30 }}
```

>\#d0e5c5

入力値：`#7ab55c` → 出力値：`#d0e5c5`

##color_darken
`入力した色を、指定した割合(%)だけ暗くします。`

変更値は、`0 ~ 100`%で指定します。

```.liquid
{{ '#7ab55c' | color_darken: 30 }}
```
>\#355325

入力値：`#7ab55c` → 出力値：`#355325`

##color_saturate
`入力した色の彩度を、指定した割合(%)だけ上げます`

変更値は、`0 ~ 100`%で指定します。

```.liquid
{{ '#7ab55c' | color_saturate: 30 }}
```

>\#6ed938

##color_desaturate
`入力した色の彩度を、指定した割合(%)だけ下げます`

変更値は、`0 ~ 100`%で指定します。

```.liquid
{{ '#7ab55c' | color_saturate: 30 }}
```
>\#869180

入力値：`#7ab55c` → 出力値：`#869180`


##color_mix

`入力した色とcolor_mixで指定した2色を、指定した割合(%)でプレンドすることができます。`

```.liquid
{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}
```
>\#bdbb94

入力値：(  `#7ab55c` , `#ffc0cb` )  →　出力値：`#bdbb94`


もし、一方の入力に`alpha`要素があり、他方に`alpha`要素がない色をブレンドする場合、`alpha`要素がない方の`alpha`要素の値は、`1`としてブレンドされます。

```.liquid
{{ '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](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast)のアクセシビリティ評価の指標になります。

```.liquid
{{ '#495859' | color_contrast: '#fffffb' }}
```
>7.4

`#495859`　`#fffffb`

##color_difference
`2色間の色差を計算して、その値を返します。`

色差とは**色の違いを値にしたもの**で、**色差の値が大きほど色の区別がしやすく、値が小さいとほど色の区別が困難**になります。

アクセフィリティに関して、[W3C](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast)は、色差を**500**以上にすることを推奨しています。

色差の計算方法に関しては、[こちら](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast)に記載されています。

```.liquid
{{ '#ff0000' | color_difference: '#abcdef' }}
```
>528

`#ff0000`　`#abcdef`


##brightness_difference
`2色間の明るさの差を計算して、その値を返します。`

先程のW3Cは、明るさの差を**125**以上にすることを推奨しています。

```.liquid
{{ '#fff00f' | brightness_difference: '#0b72ab' }}
```
>129

`#fff00f`　`#0b72ab`

#終わりに
今回の記事はここまでになります。

お疲れさまでした。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search