タイトルで全部言っちゃってるので他に書くことないんですけども......
私、Web サイトやアプリケーションのモックアップ作っている時とか、あと、お仕事ではない自分のサイト （この Blog なんかも含めて） を作っている時などに、色に関しては Material Design で公開されているカラーパレット （2014 Material Design color palettes） から選択する場合が多いです。なので、以前からカラーコードをコピペしやすいように自前でそのためのツールを作って使ってました。
で、カラーコードをコピーするのと同時に、選択した色と、その色の上に乗っかる文字の色、あるいはその色の背景となる色との間のコントラスト比を調べておくと後で面倒くさくないので、そのツールにはコントラスト比をチェックする機能も持たせていたんですが、こういうのって私以外にも需要あるのかな？ ということで少し見た目を調整したりして、人様に見られてもある程度は大丈夫な状態 （元のやつは自分でしか使わないので見た目とかすごく適当でしたので） にしたものを作ってみましたので、公開してみようと思います。
実際の画面は上記のような感じで、上部に 「2014 Material Design color palettes」 に掲載されいている色のリスト、その下には 「CSS Color Module Level 3」 および 「CSS Color Module Level 4」 で定義されているカラーネーム全148色 （といっても実際には名前が違うけれど同じ色というのがいくつか混ざってるんですが） を掲載しています。
各カラーパレットにマウスオーバーすると、その色の16進数カラーコード or RGB値 or RGBA値を、CSS にペーストすればそのまま使える状態でコピーできるボタンが表示されますので、クリックしてもらえればクリップボードにテキストが保存されます。
あとは必要なら下部に設置してあるコントラスト比チェッカーでコントラスト比を調べてみてください。選択した2つの色の組み合わせが、Web アクセシビリティ的に問題あるかないかを調べることができますので、例えば選択した色を背景色にした場合、白抜きの文字だとコントラスト比が足りないな...... みたいな感じで確認ができます。
なお、以下の点はご注意ください。
- IE （Internet Explorer） では動作しませんし、動作するようになんとかする気もありません。
- Mac Safari で動作確認ができていません。何かおかしい部分があったら教えていただけると喜びます。
- なるべく大きい画面で操作することを前提にしています。スマートフォンなど小さい画面での使用はあまり考慮していません。
- コントラスト比チェックには RGBA 値も使用できますが、アルファチャンネルの値は無視されますので、RGB 値で入力した場合と同じ結果になります。
ちなみに、コントラスト比チェックの部分は自分だけで使っている状態の時は、16 進数カラーコードだけチェックできるコードを自前で適当に書いていましたが、今回ツールを公開するにあたってちゃんとしないとということで、下記の JavaScript を利用させていただきました。おかげさまで簡単に実装できて助かりました。
