COLUMN コラム

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

Color hunt

https://colorhunt.co/

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

Colorable

https://colorable.jxnblk.com/

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

cool colors

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

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

Palettelist

https://www.palettelist.com/

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

Coolors

https://coolors.co/

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

Colors UI

https://colorsui.com/

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

Grabient

https://www.grabient.com/

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

itmeo

https://webgradients.com/

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

Material Palette

https://www.materialpalette.com/

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

Khroma

http://khroma.co/

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

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

まとめ

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

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