万人受けするカラーパレット？

昔のＥｘｃｅｌのカラーパレットはシンプルで好き :blush:
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/bc16bf0f-77da-c115-cbee-c6920c401ac9.png)

今のＥｘｃｅｌのカラーパレットは・・・
ちと使いづらい（個人の感想です。）
![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/eb834c12-e181-3275-59ca-437a5336681c.png)

##理想のカラーパレット

上の例のように、色がデフォルトで用意されている
「パレット」について私見を述べます。
（カラーピッカーとも言いますが、以下、便宜上 パレットと呼びます。）

なお、本記事でパレットを使うのは、プログラマー／デザイナーというより、
Excel や wysiwyg を使う一般ユーザを想定しています。

私は、色やデザインの専門家ではないですが、
こういうのが理想ではないかと思います。
>・（多くの人が）欲しいと思う色を含んでいること。
>・色の選択時にストレスがないこと。
>・色を選ぶ平均時間が短いこと。

では上記を実現するには？
>・色の選択肢が、多すぎず少なすぎないこと。
>・色の偏りがないこと。
>・近い色同士で整列していること。

##よく使うのは、背景色と文字色

ＥｘｃｅｌにしてもＨＴＭＬにしても、
純粋な画像を除けば、パレットの適用先は、
背景色と文字色だと思います。

ここで背景色が、明るくもなく暗くもない、
中間の明度の色だと、文字が少々見づらいのです。
![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/159b3e7e-2813-881f-adb9-1317dac04052.png)

それを踏まえると、下部のようなパレットの
丸の部分は省いてもよいのでは？ と思います。
つまり、明るい色と暗い色に限定したほうが、
色選びの間違いは減らせそうです。
![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/d112003c-04c5-9174-e3d2-16f8531072d7.png)

##カラーパレット提案

そこでカラーパレットを作ってみました。ツールは spectrum です。

セレクトボックスで、３パターン
・基本色
・明るい色（主に背景色）
・暗い色（主に文字色）
を切り替えられるようにしました。

![img11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/9f2292d4-4a57-5c28-696a-a66b17308e34.png)
![img12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/14bee94b-c7ea-8b5a-f8a7-3cb528f67238.png)
![img13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419851/4377ee67-2654-4f90-a515-6a2adb402416.png)

「基本色」は以下で構成しています。
・ＨＴＭＬ基本１６色
・昔のＥｘｃｅｌの明るい色（参考：＊１）
・グレースケール

「明るい色」（パステル）は女子目線でセレクト :heart_eyes:
（参考：＊２）

「暗い色」は・・・もともと互いに区別が付きにくいので
あまりこだわらずに構成しました。
（参考：＊３）

ＲＧＢは以下のとおりです。

```javascript

//基本色
if ( SelectBox == 1 ) {

    Colors = [ [ '#000000', '#808080', '#c0c0c0', '#ffffff' ]
             , [ '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#9900ff', '#ff00ff' ]
             , [ '#ff99cc', '#ffcc99', '#ffff99', '#ccffcc', '#ccffff', '#99ccff', '#cc99ff', '#ffccff' ]
             , [ '#800000', '#808000', '#008000', '#008080', '#000080', '#800080' ]
             , [ '#303030', '#505050', '#707070', '#909090', '#b0b0b0', '#c8c8c8', '#e0e0e0', '#f0f0f0' ]
             ];

//明るい色
} else if ( SelectBox == 2 ) {

    Colors = [ [ '#fff4f4', '#fff9f4', '#fffff4', '#f9fff4', '#f4fff4', '#f4fff9', '#f4ffff', '#f4f9ff', '#f4f4ff', '#f9f4ff', '#fff4ff', '#fff4f9' ]
             , [ '#ffeaea', '#fff4ea', '#ffffea', '#f4ffea', '#eaffea', '#eafff4', '#eaffff', '#eaf4ff', '#eaeaff', '#f4eaff', '#ffeaff', '#ffeaf4' ]
             , [ '#ffe0e0', '#ffefe0', '#ffffe0', '#efffe0', '#e0ffe0', '#e0ffef', '#e0ffff', '#e0efff', '#e0e0ff', '#efe0ff', '#ffe0ff', '#ffe0ef' ]
             , [ '#ffd6d6', '#ffead6', '#ffffd6', '#eaffd6', '#d6ffd6', '#d6ffea', '#d6ffff', '#d6eaff', '#d6d6ff', '#ead6ff', '#ffd6ff', '#ffd6ea' ]
             , [ '#ffcccc', '#ffe5cc', '#ffffcc', '#e5ffcc', '#ccffcc', '#ccffe5', '#ccffff', '#cce5ff', '#ccccff', '#e5ccff', '#ffccff', '#ffcce5' ]
             ];

//暗い色
} else if ( SelectBox == 3 ) {

    Colors = [ [ '#aa5555', '#aa8055', '#aaaa55', '#80aa55', '#55aa55', '#55aa80', '#55aaaa', '#5580aa', '#5555aa', '#8055aa', '#aa55aa', '#aa5580' ]
             , [ '#8d4747', '#8d6a47', '#8d8d47', '#6a8d47', '#478d47', '#478d6a', '#478d8d', '#476a8d', '#47478d', '#6a478d', '#8d478d', '#8d476a' ]
             , [ '#723838', '#725538', '#727238', '#557238', '#387238', '#387255', '#387272', '#385572', '#383872', '#553872', '#723872', '#723855' ]
             , [ '#552b2b', '#55402b', '#55552b', '#40552b', '#2b552b', '#2b5540', '#2b5555', '#2b4055', '#2b2b55', '#402b55', '#552b55', '#552b40' ]
             , [ '#381d1d', '#382b1d', '#38381d', '#2b381d', '#1d381d', '#1d382b', '#1d3838', '#1d2b38', '#1d1d38', '#2b1d38', '#381d38', '#381d2b' ]
             ];

}

```


##課題

そもそもユーザが、色を選ばなくてよいように
自動で色がセットされる機能も必要でしょう。

グラフなどでは既にありますね。

それにしてもグラフでは どうやって
色を決めているのでしょう？ 決め打ちですかね？

ちなみに私が決め打ちする場合は、
白、黒、赤、青、黄、緑、橙、桃、紫
の順です:sweat: :sweat: :sweat:

##参考ページ

＊１
[110color（56色のカラーコード一覧表）](http://www2s.biglobe.ne.jp/~iryo/vba/part1/110color.html)

＊２
[パステルカラー | Webサイト制作支援 | ShanaBrian Website](http://shanabrian.com/web/colorcode/pastel.php)

＊３
[Spectrum - The No Hassle jQuery Colorpicker](https://bgrins.github.io/spectrum/)

＊４
[Spectrumの使い方（Webページにカラーピッカーを導入する）](https://qiita.com/nissuk/items/fc84c772782e71a46725)