eyecatch_color_mini

配色を考えるときに便利なオンラインツール10個集めてみました

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

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

Adobe Kuler

adobe_kuler

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

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

adobe_kuler_edit

Color Hexa

color_hexa

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

color_hexa_color-info

Color Scheme Designer3

color_scheme_designer3

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

COLOURlovers

colour_lovers

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

colour_lovers_patterns

color hailpixel

color_hailpixel_top

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

color_hailpixel_edit

CLOUR CODE

colour_code_top

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

colour_code_edit

0 to 255

0_to_255_top

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

0_to_255_edit

HUE/360

hue_360

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

日本の伝統色

nippon_colors

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

色の名前と色見本(和の色)

irononamae-to-iromihonn

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

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

10 thoughts on “配色を考えるときに便利なオンラインツール10個集めてみました

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です