皆様こんにちは！最近WP-Eメンバーに本名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。

さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。

Adobe Kuler

まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります)

「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。

Color Hexa

Color Hexaは、ページ上部の検索欄に任意のカラーコードを入力すると、その色に関する様々な情報をはき出してくれます。
例えば「#ff0000」と入力すると、以下のスクリーンショット(ページの一部です)のような画面になります。他にもカラースキームやシェードとチントなど。便利です。私は頻繁にこちらのサイトを利用させてもらっています。

Color Scheme Designer3

こちらは直感的に操作できるので詳しい説明は省きますが、Color Scheme Designer3は画面上で基準となる色をくるくるまわすと、その色に基づいたカラーパターンを生成してくれます。

COLOURlovers

COLOURloversは配色のコミュニティーサイトです。作った配色やパターンを投稿したり、他の人のものを共有することもできます。デザインの参考になりそうですね！

color hailpixel

color hailpixelにアクセスすると、初期状態では上のスクリーンショットのような画面になり一瞬「？」となります（というか私がなりました）が、画面上でマウスポインタを動かすと動的に色が変わり、クリックすると画面上に保存されます。これを何回か繰り返すと以下の画像のようになります。

CLOUR CODE

CLOUR CODEはcolor hailpixelの操作と似ていますが、生成したカラーパターンをscssファイルやlessファイルにしてダウンロードすることができます。生成後の画面は以下のスクリーンショットのようになります。生成したパターンをサイドバーにあるカラースキームごとに調整することも可能です。

0 to 255

0 to 255は画面真ん中の「Get started now」の「PICK A COLOR」をクリックして任意のカラーコードを入力すると、そのカラーを基にきれいなグラデーションが生成されます。各カラーをクリックするとクリップボードにコピーされます。

HUE/360

HUE/360はある色を選択すると、その色に合った配色を表示してくれます。使い方に関しては、配色で迷った時に使えるツール！「HUE/360」が詳しいので参考にしてみてください。

日本の伝統色

和な色が欲しい！という方は日本の伝統色がおすすめです。画面上の好きな色のリストをクリックすると背景色がその色に変わり、CMYKやRGBの数値も出してくれます。また、画面のあるところをクリックすると、ちょっと面白いことが起こります。

色の名前と色見本（和の色）

色の名前と色見本（和の色）も和の色の一覧を見ることができます。実際のサイトでは和の色だけでなく、Webセーフカラー等も見ることができます。

いかがでしたか？全部知ってるよ、という方はまたご自分でいろいろと探してみるともっと便利なツールに出会えるかもしれません。知らなかった！という方はぜひこういったツールを利用してみてくださいね！私も配色に悩んだときはお世話になろうと思います。