【完走賞ゲット-5】「Chroma.js Color Palette Helper」というサイトを試してみる（設定変更とカラーパレットの出力）

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 5日目の記事です。

## 今回の内容
今回の記事で扱うのは「[Chroma.js Color Palette Helper](https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1)」です。
![Chroma.js Color Palette Helper](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a4c8166b-cf6d-ccb9-6a86-d28fb7b928c9.png)
[過去の自分がよく記事を書いている「p5.js」関連の話](https://qiita.com/search?q=p5.js%20user%3Ayoutoy&sort=created)でも、よく考える場面が出てくる色・カラーパレットに関する話題です。

色・カラーパレットに関する情報を調べていて、上に書いた「Chroma.js Color Palette Helper」というサイトを見かけました。このサイトを使うと、カラーパレットを GUI上で簡単に作れそうで、とても気になりました。

また、このサイトのタイトルに出てきている「chroma.js」は、過去に少し使ったことがあるライブラリで（※ その時に書いた記事が以下）、その点も少し気になったサイトでした。

●chroma.js を使った HSB（HSV） と16進数カラーコードの変換やその他の処理を p5.js Web Editor上で試す - Qiita
　https://qiita.com/youtoy/items/513009ebfdd04872e059

## Chroma.js Color Palette Helper を利用する
上で書いていた Chroma.js Color Palette Helper を、利用してみようと思います。

### デフォルトで表示されている内容を少し変えてみる
Chroma.js Color Palette Helper に関して、まずはデフォルトで表示されている内容を見てみます。

![Chroma.js Color Palette Helper のデフォルト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/74bcf43b-f542-5769-9920-7666e22a5c70.png)

上記のようなカラーパレットが提示されていました。
ここから、設定を少し変えてみて、表示される内容を確認してみます。

#### 色の数を変える
以下は、デフォルトで「9」という値になっていた「Number of colors」を「5」にしてみたものです。
![色の数を変える](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b078eb6b-6ddc-ebe0-862c-e6df35fd0f5e.png)

「Check and configure the resulting palette」の部分を見てみると、表示されている色数が指定した数に合わせて減っています。

#### Palette type を変更してみる
次は「Palette type」を変えてみます。
デフォルトでは「sequential」が選択されていた部分を、「diverging」にしてみました（※ 色の数は、先ほど減らしたものを、また元にもどしました）。
![Palette type を変更](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8213d693-930a-57eb-22c2-69db49679899.png)

「2Select and arrange input colors」のところに、色の指定が増えて、上記のように赤系の色も混在した形になりました。

#### Palette type の変更 ＋ 入力とする色の変更
先ほど、Palette type を変更しましたが、その状態で入力として指定されている色を変えてみます。
以下のようなカラーパレットが得られましたが、赤字で「This palette is not colorblind-safe.」という文字が出てきました。
![Palette type の変更 ＋ 入力とする色の変更](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eedfa425-a2b7-7b4e-934a-cc2365fe1f79.png)

どうやら、配色的にはあまり良くないものを作ってしまった状態のようです。

#### simulate の設定を変えてみる
次に、simulate という部分を変更してみます。
いったん設定はデフォルトに戻し、その後に「simulate」を「deut.」・「prot.」・「trit.」にそれぞれ変更してみます。

![deut.](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2faed5f0-eef3-a8f6-6b8a-1434485cfee3.png)

![prot.](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/217e6618-dc23-de0d-3e9e-046f0def25a3.png)

![trit.](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4ce4d48f-f0a7-6d58-b57c-0e92477d7f81.png)

どうやら、以下のサイトなどに出てくるような、遺伝的に色合いの相違を区別できない状態の見え方をシミュレーションするもののようです。
●Types of Colour Blindness - Colour Blind Awareness
　https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

### 出力されたカラーパレットを取り出す
上で、Chroma.js Color Palette Helper の設定を変えて、出力が変わる様子をいろいろと見てみました。

最後に、ここで生成されたカラーパレットを取り出す部分を確認してみます。
「Export the color codes in various formats」という項目の部分を確認します。
![出力されたカラーパレットを取り出す](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/87f4a4be-c9ab-1a24-577f-b39c524ec278.png)

そうすると、6パターンの表記でカラーパレットを出力してくれているようでした。

## おわりに
今回、色・カラーパレット関連の調べものをしていて見つけた「Chroma.js Color Palette Helper」というサイトを簡単に試してみました。

今回、そもそも使い方がよく分からない状態だったため、設定を変更して挙動を確認してみるということをやりました。今後は、具体的にカラーパレットの作成やその活用をやってみられればと思います。