COLUMNコラム

デザインの配色を考える際に参考になるサイトまとめ

デザイナー初心者にとって、色の配色やバランスを考えるのって結構難しい。どの色をメインにして、どの色をアクセントにしようか考えた時に、配色する手助けになるサイトをご紹介します。

目次

いつもの制作過程で使えそう

color hunt

Colorable

cool colors

palette list

アイデアが思い浮かばないとき

Coolors

Colors UI

グラデーションを作成したいとき

Grabient

Itmeo

マテリアルデザインに特化したサイト

Material Palette

人工知能AIが配色してくれるサイト

Khroma

Color hunt

colorhunt-img

https://colorhunt.co/

ユーザーが配色を作成することができます。検索窓の「Search Paletts」からメインのカラーを選べることができるため、メインカラーは決まっているけれどサブカラーが決まらないといった際に配色アイデアの参考にもなります。

Colorable

https://colorable.jxnblk.com/

こちらの配色サイトは、制作したデザインコントラストがアクセシビリティに適しているかどうかチェックしてくれます。テキストと背景の色を設定し、テキストに「AAA」など表示されれば問題なし。「Fail」が表示されると配色に問題があるのでデザインカラーを変更した方が良いでしょう。

cool colors

coolclors

https://saruwakakun.com/design/gallery/palette

Webサイト制作でもわかりやすい記事を書かれている、サルワカさんの配色パターンサイトです。組み合わせは少ないですが、配色の割合もわかりやすく、右側に配色プレビューもあるので、デザイナー初心者にオススメなサイトです。

Palettelist

palettelist-img

https://www.palettelist.com/

2色選択するだけで、配色パレットを作成してくれます。デザイン制作において、ベースカラーは決まっているけれどアクセントカラーをどうしようか考えているときに、ヒントになりそうな配色サイトです。作成した配色パレットはcss、SASS、SVG形式にダウンロードもできます。

Coolors

coolors-img

https://coolors.co/

スペースキーでランダムに配色を設定します。何もアイデアがないときに役立ちます。変更したくない色は、鍵マークの「Toggle lock」をクリックすると固定されます。URLやPDF、CSSなどにエクスポートでき、機能が充実している配色サイトです。

Colors UI

colors-ul-img

https://colorsui.com/

パレット形式だけでなく、色を選択してその色の明度も作成できます。自分でカラーパレットを作成することもできるので、オリジナルの配色を作りたいときに使えそうです。また、写真や画像をアップロードして色を抽出する機能もあります。

Grabient

grabient-img

https://www.grabient.com/

グラデーション配色の参考になるサイトです。配色の割合や角度、色数を変更できるので、自分の好きな配色にしたい場合は便利です。webデザインでも、グラデーションを使用することがあるので役立ちます。

itmeo

itemo-img

https://webgradients.com/

こちらもグラデーション配色の参考になるサイトです。カラーコードが左下に記載されているので、デザインを制作する際にコピーして反映しやすいです。pngやcssに変換もできるので、デザイナーにとって使いやすい配色サイトだと思います。

Material Palette

material-img

https://www.materialpalette.com/

Googleが推奨する、マテリアルデザインに特化した配色参考サイトです。2色選択すると右側にプレビューが表示され、ベースカラーとアクセントカラーを配色してくれます。

Khroma

khroma

http://khroma.co/

AIで配色を作成してくれるサイトです。50色好きな色を選び「Start Training」ボタンを押すと、いい感じにカラーデザインを作成してくれます。さらに左上の「palette」「Image」「Gradient」を選択すると、グラデーションやパレット形式などで配色を確認することができます。機能性が高い配色サイトです。

色を選択すると、こんな感じになります。

khroma2-img

まとめ

ご紹介したような配色サイトを遊び感覚で触っていても、自分のデザインの引き出しになると思いました。色の数が増えるほどデザイン制作は難しくなりますが、アイデアに詰まったときに配色サイトを参考にすれば制作が捗りそうです。配色やカラーに困った時は、ぜひ配色の参考サイトを活用してみてください。

デザイナーにとって色決めや配色の割合って重要になります。色によって与える印象は異なるので、我々webデザイナーもお客様のイメージに沿ったデザイン案をご提案させていただいております。webサイトの立ち上げ・改修などをお考えの方はぜひご相談ください。

DOLに制作を相談する