Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。
そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。
そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。
1. Adobe Color CC
「Adobe Color CC」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。
「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。
さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。
納得いく配色パターンができないときは、「探索」のメニューからパターンを探してみてください。
また、Adobe IDでログインすると、作成したカラーテーマを保存できます。
作成したカラーテーマは他のAdobe製品やアプリで使用可能です。
2. Color Scheme Designer3
http://colorschemedesigner.com/csd-3.5/
「Color Scheme Designer3」は、色相環から1色選ぶと自動で配色パターンを生成してくれるツールです。
「mono」「complement」「triad」など6種類のカラールールからひとつを選び、パターンを作っていきます。
また、右上のメニューからランダムでパターンを生成することもできます。
何も思いつかないときは、ランダム機能を使って偶然の出会いに期待するのもよいのではないでしょうか。
3. Paletton
先ほどの「Color Scheme Designer3」の姉妹版にあたる配色ツール「Paletton」。
こちらも使い方は同じで、自動で配色パターンを生成してくれます。
右上にある「RANDOMIZED」から、似たような配色パターンをランダムで切り替えたり、全く違った配色パターンを切り替えたりできます。
4. [ HUE / 360 ]
1色選択すると、その色に調和する配色を教えてくれるツール「HUE / 360」。
リセットの方法は、ページ下部に選択した色が表示されるので、「×」をクリックすると可能となっています。
5. 0 to 255
選択したカラーを元に、グラデーションを生成してくれるツール「0 to 255」。
生成されたカラーをクリックすると、カラーコードをクリップボードにコピーできます。
6. colourcode
「colourcode」はマウス操作で配色ができるカラースキームツールで、使いやすさに定評があります。
マウスを上下に動かすと光度を、マウスを左右に動かすと色相を、スクロールで彩度を変更できます。
クリックするとロックされ、もう一度クリックするとロックが解除されます。
生成したスキームは、scssファイル、lessファイル、pngファイルのいずれかの形式でダウンロードできます。
7. Color Hailpixel
「Color Hailpixel」は、使い方は先ほどの「colourcode」とほぼ同じで、マウス操作で光度と色相を調整します。
クリックすると色が追加され、作成した色は後で個別に調整できます。
機能が限られていますが、シンプルで直感的に操作できるので使いやすいのが特徴です。
8. Coolors
スペースキーを押すと、ランダムでカラーパレットを生成してくれる配色ツール「Coolors」。
生成された色は個別に微調整をしたり、ドラッグで並び替えたり、ロックしたりできます。
また、カラーコードは任意で変更可能なので、ベースカラーをひとつ決めてあとはランダムに任せるという使い方も可能となっています。
9. Coleure
カラーパレットから色を選択すると、テキストを白抜きと黒抜きで表示してくれるツール「Coleure」。
2つの色を「Compare（比較）」、または「Mix（混ぜる）」させる機能も備わっています。
「Mix」では配色の割合をスライドで調整できます。
10. ウェブ配色ツール Ver2.0
http://www.color-fortuna.com/color_scheme_genelator2/
「ウェブ配色ツール Ver2.0」は、カラーピッカーから色を選ぶと、それに合った配色を提案してくれるツールです。ロゴの文字や色は任意で変更できます。
また、プレビューがサイトになっているので、イメージがしやすくなっており、業務の効率化にも役立ちます。
11. BrandColors
「BrandColors」は、Adobe、Amazon、Google、Microsoft、Twitterなど、IT関連企業のブランドロゴの配色をまとめたサイトです。マウスオーバーでカラーコードが表示されます。
有名IT企業がどんな配色でロゴをデザインしているのかがわかるので、配色に詰まったときに見てみるとヒントが得られるかもしれません。
12. NIPPON COLORS - 日本の伝統色
日本の伝統色をインフォグラフィックで表現したサイト「NIPPON COLORS - 日本の伝統色」。伝統色が250収録されていて、背景が選択した色に切り替わります。
日常生活では聞き慣れない伝統色が多数あるため、「こんな名前もあるんだ」という発見があります。
まとめ
今回紹介した配色ツールはいずれも無料で使用できます。悩んだときに配色ツールに頼るのは全然悪いことではありません。解決の糸口として、また配色の時間短縮にぜひ活用してください。ランダムで配色パターンを生成すると、意外な発見があるかもしれませんよ。