img_post_6499_eyeCtch

デザインの強い味方!配色を考える時に使える便利ツール

 

こんにちは!ひろしです!

ハロウィンも終わり、街はすっかりクリスマスムード,,,
服装は落ち着いた色になりがちですが、街並みはとても華やかですね!

この間、そんな街を見ていて
「色って大事やなぁ」
と、唐突に思いました。

なので今回は、そんな大事な配色を考えるときに使っている便利ツールをご紹介したいと思います!

COOLORS

有名ですね!
スペースを押すたび、新たな色を作ってくれます。
また、一部の色をロックして固定し、ロックしていない色のみを変更していくこともできます。

URL:https://coolors.co/

Adobe Color CC

こちらも有名ですね!
Adobe提供のツールで、様々なカラーパターンを確認できます。
また、Adobe Creative Cloudのアカウントがあれば、お気に入りを登録したり、編集したりもできます。
PhotoshopやIllustratorと連携機能があり、選んだ色をそのままパレットに追加できます!とても便利です!

URL:https://color.adobe.com/ja/create/color-wheel/

Paletton.com

直感的に操作できるので簡単に使えます。
カラーコードを入力したりポイントを動かしてベースカラーを決めると、その色に基づいたカラーパターンを生成してくれます。
また、4パターンの配色ルールが用意されており、そのルールに従って生成されるので、類似色や反対色等もクリック一つで変更できます。

URL:http://paletton.com/

日本の伝統色

和風な色を考えるならこれです!
カラーコードだけでなく、CMYK値やRGB値でも表記してくれます。
また、MUNSELLをONにした時の動きも面白いです。
個人的には色の名前が「日本!」って感じで素敵だなと思います。

URL:http://nipponcolors.com/

0to255

指定した色を基に綺麗なグラデーションを生成してくれます。
ホバー色を選ぶ時や同系色の配色を考えるときに便利です。
また、クリックするとカラーコードがクリップボードにコピーされるのもありがたいです。

URL:http://www.0to255.com/

Flat UI Color

フラットデザインに使える色がまとまったカラーパレットです。
このツールも、クリックするとカラーコードがクリップボードにコピーされます。
また、このツールはコピーの形式をカラーコード、RGB値、RGBA値から選択できます。
色数は多くありませんが、ほかのツールと併用して使っています。

URL:http://flatuicolors.com/

最後に

いかがでしたでしょうか?
色決めは難しいですよね、でもとても重要ですよね。。
ツールを使って少しでも簡単にできればと思い、今回ご紹介しました。

少しでもどなたかの参考になればと思います。

CONTACT US

株式会社プロフェッサはWEB制作会社です。
ウェブサイト制作やシステム開発など、ウェブに関するご相談は下記よりお気軽にどうぞ


Previous Post

Next Post