配色ツール

配色ツール厳選13選|パターンの参考、カラースキームの作成に役立つツールを紹介

配色ツール

配色はデザインにおいて重要な役割を担っています。しかし配色に慣れている人でないと、バランスの取れた配色を選ぶのは容易なことではありません。そこで活用したいのが「配色ツール」です。配色ツールとはWebサイトやアプリのデザインを決めるときに役立つツールのことです。配色ツールを活用することで、多数ある配色パターンから色の組み合わせを参考にできます。本記事では、配色ツールの選び方からおすすめの配色ツールを解説します。

Ads

配色ツールの選び方

配色ツールを選ぶ方法として、大きく3点あります。1点目は目的に沿ったものから選ぶ方法です。配色ツールにはそれぞれ便利な機能が搭載されています。写真から色を抽出できるもの、AIを活用したものなどがあるため、目的に即した適切なツールを選択しましょう。2点目は使用する色数で絞る方法です。使用する色数が決まっている場合には、色数をもとにツールを選ぶことができます。2色や3色、4色など、色の組み合わせが決まっていれば、各配色に特化したツールの使用を推奨します。3点目は操作性で絞る方法です。定期的に使用するのであれば、操作性の高いツールを選ぶことが重要です。

配色パターンを見たいときに役立つツール

ここからは配色パターンを見たいときに役立つツールとして、代表的な9つを紹介します。

Material UI

Material UI

Material UIは、マテリアルデザインに使える配色をまとめたサイトです。マテリアルデザインとは、2014年にGoogleが提供したデザイン手法のことです。

  • グラデーションのカラーパレットを一覧で確認できる
  • 色をクリックすると、RGBカラーコードをコピーできる
  • 色彩を探しやすく、立体感のあるマテリアルデザインを作成する際に便利

 

ImageHues

ImageHues

ImageHuesは、写真素材サイトのunsplash.comからランダムに画像・写真をセレクトし、抽出された色のカラーコードをコピーできるサイトです。

  • 画像・写真から4色が抽出・展開されている
  • モダンな画像が多数掲載されている
  • 画像・写真の右上のハートマークから「お気に入り」登録ができる

 

Ads

Color Supply

カラーサプライ

Color Supplyは、色相環から多様な色の組み合わせを発見できるサービスです。トライアドやテトラードなどのイメージをサッと理解するのに役立ちます。

  • 12色の色相環から、選択している色に近い組み合わせが20パターン提供される
  • 選択したパターンが適用されたデザインやグラデーションを確認できる
  • ビジネスプラン:40ドル、プロフェッショナルプラン:20ドルなど

SchemeColor.com

SchemeColor.com

SchemeColor.comは、様々な配色のカラーパレットが掲載されているツールです。2色から6色までの配色パターンが提供されています。

  • カラーパレットに名前が付いていて、キーワードからカラーパレットを探せる
  • 画像から4色を抽出できる
  • 気になるカラーパレットをクリックすると、カラーの変更やカラーコードのコピー、カラーの移動ができる

 

WebGradients

WebGradients

WebGradientsは、180種類が用意されているグラデーション専用の無料配色ツールです。

  • すべて線形グラデーションで、グラデーションの種類は2色のみ
  • Webサイト上で反映できるCSS、PSD、PNGなどの拡張子でダウンロードが可能
  • サイト背景やボタン、サムネイル画像などにグラデーションを利用したい人におすすめ
Ads

BrandColors

BrandColors

BrandColorsは、頻繁に必要とされるブランドカラーコードの参考資料として作られたツールです。FacebookやAmazonなど、世界中の企業のブランドカラーがわかります。

  • 600以上のブランド、1600以上のカラーが掲載されている
  • 海外企業やブランドのカラーがアルファベット順でまとめられている
  • 検索すると調べたいブランドカラーのカラーコードを入手できる

 

Palette List

Palette Listは、好きな2色を選択すると、その色を使った配色パターンを自動生成してくれるツールです。

  • 基本の12色の中から2色を選択する
  • 生成したカラーパレットはCSS、SASS、SVG形式からダウンロード可能
  • UI・UXがスタイリッシュで使いやすい

 

Ads

LOL Colors

LOL Colorsは、涙型あるいはドロップ型の4色の配色パターンが掲載されているサイトです。全部で65の配色パターンがあります。

  • 各配色パターンの「いいね」の数を参考にできる
  • マウスカーソルを合わせると、各カラーコードを参照できる
  • 涙のような配色パレットが可愛らしい

 

Happy Hues

Happy Huesは、プレビューを確認しながら配色を探せるツールです。全部で17色のカラーパレットが用意されています。

  • プレビュー表示を確認しながら色を選べるので、イメージに合った配色を選べる
  • 画面左側のカラーパレットを選択すると、実際にサイトのカラーが変更される
  • 色の用語、色の与える印象などに関する説明も記載されている

 

カラースキームの作成に役立つツール

ここからはカラースキームを作成するときに役立つツールとして、代表的な4つを紹介します。

Adobe Color

Adobe Color

Adobe Colorは、カラーハーモニー(色彩調和)から配色パターンを生成できるAdobe製のツールです。

  • 類似色、モノクロマティック、トライアド、補色、シェード、カスタムなどのカラーハーモニーからカラーパレットを選べる
  • 画像からカラーパレットやグラデーションを生成することも可能
  • ログインすると、ライブラリにカラーパレットを保存できる

 

Coolors

Coolors

Coolersは、Spaceキーを押すたびに、5色の配色パターンの見本がランダムで切り替わるツールです。

  • 気に入った色が見つかったら、その色をロックして他の4色を変えることもできる
  • 写真からパレット、コラージュを作成できる機能、色覚障害診断ツールもある
  • 「Explore Trending Palettes」をクリックすると、話題になっているトレンドカラーを一覧で確認できる

 

Paletton

Paletton

Palettonは、カラースキーム(色彩計画)を自動で選んでくれるツールです。

  • ベースカラーを選ぶと、補色や隣接色、トライアド、テトラッドなど相性の良いカラーを表示してくれる
  • 「EXAMPLE」をクリックすると、カラーコードを合わせたサンプルサイトが見られる
  • HTMLやCSS、LESS、SASS、PNG、XML、TEXTなどさまざまな形式で出力できる

COLOR TOOL

COLOR TOOL

COLOR TOOLは、プライマリーカラー(メインカラー)を決めた後、6パターンのページレイアウトを使って配色見本を提示してくれるツールです。

  • プライマリーカラーを決めると、自動で2色(ライト&ダーク)を提案してくれる
  • セカンダリーカラーやテキストのカラーも選択できる
  • HTML、CSS、Javascriptのソースコードを生成できる

 

目的・用途に応じて配色ツールを使いこなそう

本記事では、配色ツールの選び方からおすすめの配色ツールを用途別に解説しました。配色は簡単に思えるようで、実は奥が深い世界です。そのため慣れるまでは配色ツールを利用しながら、優れた配色パターンやカラースキームを探すのが良いかもしれません。配色ツールは、色の組み合わせを無限に提案してくれるため、Webデザインやサイト制作、アプリやイラスト作成に大いに役立ちます。配色ツールを利用する際には、目的や用途に合ったツールを選ぶことが重要です。あとは色数や操作性から比較検討するのも良いでしょう。本記事を参考にしながら、最適な配色ツールを見つけて、使いこなしてみてください。

Ads
配色ツール
フォローして最新情報をチェック!

Utillyに御社のサービスを掲載しませんか?

成果報酬型のリード獲得メニューやサービスのレビュー記事広告など、
御社サービスのマーケティングに活用できます。まずはお問い合わせください。