デザイン
2022.08.01

配色に悩んだときの参考サイト7選!

こんにちは。WebデザイナーIFのひよりんです。

Webデザイン作成時に配色に頭を悩ませている方も多いのではないでしょうか?
配色はデザインにおいて基本であり、重要な要素です。
そんな時に手助けしてくれる便利な配色ツールをご紹介していきます!

配色参考サイト

Adobe Color

まずは王道のAdobe Color!Adobe Colorは機能がとても豊富に揃っています。

下記の機能を用途に合わせて使いこなせるようになるととても便利です。

 

①カラーホイール

カラーハーモニーを選択し、ホイールを動かすだけで簡単に5色のカラーパレットが作成できます。

 

②トレンド

ヘッダー中央にある「トレンド」をクリックするとファッション・グラフィックデザイン・イラスト・UIUX等、様々なジャンルにおける最新のカラートレンドを探すことができ、写真・画像と共に使用されているカラーパレットもサムネイルで表示されます。

 

③写真・画像から

写真や画像からカラーを自動で抽出したり、グラデーションを作成することも可能です。

 

④探索

ヘッダー中央にある「探索」をクリックすると膨大な量のカラーパレットが表示されます。

 

⑤アクセシビリティツール

どのような方でも利用できるように、色覚多様性に対応したカラーパレットを作成できたり、コントラストチェッカーで文字のコントラスト比や判定結果を自動で表示してくれます。

Adobe Color

 

COLOR SUPPLY

補色や類似色、トライアド等、2色、3色、4色の組み合わせから配色を探せるツールです。

選んだ配色がアイコン、パターン、グラデーションに自動で反映され、確認できるのも便利なポイント!

COLOR SUPPLY

 

Coolors

キーボードのスペースキーを押すたびに、ランダムで5色のカラーパレットを生成してくれるサービスです。

気に入った色が見つかればその色を「ロック」することができ、その色に合う4色がランダムで生成されていきます。

また、トレンドのカラーパレットを一覧で見ることも可能です。

自分好みの配色を見つけてみましょう!

​​Coolors

ColorDrop

4色のカラーパレットを集めたシンプルなサイトです。

ソートやフィルタリング、背景色変更等機能が充実しています。

4色のカラーパレットをクリックすると、カラーコードとrgba値が表示され、そのテキストをクリックするだけで簡単にコピーができます。

また、カラーパレットだけでなく、フラットカラーや、画像からカラーを抽出することもできます。

ColorDrop

 

Pigment

Pigment(顔料)とLightning(光)の2つの量を調整して自分好みの配色を見つけられるサービスです。

配色パターン数は非常に多く、パターンをクリックすると、トーンを調節することができます。

検索機能では写真を基に配色を探すこともできます。

Pigment

NIPPON COLORS

日本の伝統的な色を探せるサイトです。

和テイストのデザインを作成するときにおすすめ!

色の名前をクリックすると背景がその色に切り替わります。

色の切り替わりの際のアニメーションも美しく、色の名前を見ているだけでも楽しいサイトです。

NIPPON COLORS

WebGradients

美しいグラデーションの配色パターンが揃ったサービスです。

優しいグラデーションから補色を使ったメリハリのあるグラデーションまで様々なグラデーションを探すことができます。

cssコードのコピー、2500x2500pxのPNGファイルでグラデーション画像のダウンロードができます。

また、PhotoshopとSketch用にすべてのグラデーションをダウンロードすることもできます

WebGradients

まとめ

配色は簡単そうに見えて難しく、奥が深いものです。

感覚で配色を行うのもいいですが、配色に理由づけがあると、デザインを提案する際の

説得材料になったり、論理的な配色はやはり目を惹くデザインになることが多いです。

デザイン初心者さんの配色に慣れるまでの手助けや、色の勉強として、ベテランさんでも、行き詰まった時の解決策として、用途に合わせてツールを使用してみてはいかがでしょうか?

Contact

お問い合わせ