実は配色には幾つもの配色ルールやコツがあり、感覚で決めている訳ではありません。例えばwebサイトをデザインする際も、カラーパレットやカラーコードを用意して配色を決めます。
配色はとても重要で、配色次第でサービス全体の印象が変わってしまう程の影響力があります。
そこで今回は、初心者の方でも目的をイメージした配色が作れるサイトをまとめました。
カラーパレットや配色パターン、カラーコードを調べる事が出来るサイトなので、配色に迷った時の参考にどうぞ。
こんな時は参考になります。- Webデザイン・グラフィックデザイン作成時
- Excel・PowerPoint等のofficeでのグラフとか資料作成時
本当に使えるツールは数える程しかありません。終了したサービスや実用性に欠けるものは外しています。（2023年1月時点）
かわいい、おしゃれ、レトロ、誠実など、狙ったイメージを表す配色を探してみて下さいね。
この記事の目次
カラーパレットやサイト配色ツール
Adobe Color
皆さんご存じのAdobeの提供する配色ツール。配色パターンやカラーパレットを作れます。
画像から配色パレット、グラデーションを作ったり、カラーハーモニーに基づいた配色も作る事が出来ます。
全てのサービスの中で一番バランスが取れています。もちろんアドビユーザーなら保存して他のアプリで使う事も出来ます。
機能の特徴
かなり高機能なサービスで、配色パターンを作れるだけでなく、カラーパレットと同じ色で構成された画像を探せたりします。
また、背景色とテキスト色のコントラストのチェックやアクセシビリティのチェックも出来ます。配色が上手な人は、色のコントラストにも気を配っていますから、この機能は理にかなっています。
特にウェブサイトだとアクセシビリティとして色のコントラストも評価されますから重要ですね。
配色では、ベースカラーを設定するとそのカラーに基づいて調整したカラーハーモニーを適用してくれます。
- カラーハーモニーとは
- 色彩調和（カラーハーモニー）とは、「2色または多色の配色に秩序を与えること、また、統一と変化、秩序と多様性の様な反対要素を、矛盾や衝突が起こらないように調和させること」です。色の調和には幾つものルールがあります。
リンク先：Adobe Color
Color Hunt
世界中のユーザーが投稿した4色の配色パターンが掲載されていて、お気に入りの登録数でそれぞれの配色パターンの人気が分かります。
パレット内に配置されたカラーの表示領域の広さで「ベース」「メイン」「サブ」「アクセント」を表しています。
機能の特徴
ハートのアイコンを押すと、「Likes」としてパレットが右上にストック表示されていきます。SNSみたいな感じですね。
メニュー内に「Likes」があるので、後から「Likes」したパレットを一覧表示も出来ます。
カラーコードも取得出来ますし、パレットを画像としてダウンロードも出来ます。
画面右上の「create」メニューから自分で配色を試作出来るのも便利です。
目的の配色パターンを探したい時は、画面上部のプルダウンからイメージカテゴリーを選びましょう。
リンク先：Color Hunt
SCHEMECOLOR
各カラーパレットにはキーワードで名前が付けられていて、内容をイメージ出来ます。もちろんキーワードからカラーパレットを探す事も。
トップページの下には、更にイメージしやすい様に写真付きで各ジャンルの配色パターンがまとめてあります。
機能の特徴
カラーパレットをクリックする事で、そのカラーパレットの編集も出来ます。色をドラッグで並び替えたり、カラーコードもコピー出来ます。RGBやCMYK、Hexで取得出来るので便利ですね。
英語が分からなくても、トレンドのジャンルから配色を探すことも出来ます。目的のテイストに合わせて検索してみましょう。
リンク先：SchemeColor
PALETTELIST
PALETTELISTは、最初に好きな2色を選択すると、その色をベースに合計4色のカラーパレットを提案してくれるサービス。
凄くシンプルなので、すでに使いたいベースのカラーが決まっている時は便利です。
機能の特徴
任意の2色を選ぶ事で残りの色を自動で提案してくれます。カラーパレットも複数のバリエーションがあります。
生成したカラーパレットは、CSS、SASS、SVG形式から選択してダウンロードすることができます。
リンク先：PALETTELIST
COOLORS
Coolersは、カラーパレットをカスタマイズしたりトレンドの配色を探すことの出来るサービス。凄く見やすいだけでなく、かなり高機能です。画像から配色パレットを作ったりも出来ます。
英語ですが、アイコンにマウスを重ねると説明がポップして表示されるので、見れば直感的に分かると思います。
機能の特徴
カラーパレットは「MAKE A PALLETTE」から。
配色パターン検索は「EXPLORE」からどうぞ。
配色数は2色から5色の間で作る事が出来ます。ただし、5色での配色は難易度が高いので注意が必要です。
パレットではベースとなる色を固定して他の色を切り替えたり、並び順をドラッグで変更する事も可能です。カラーを使いたい時は、画面上の「Export」から画像やCSSで取り出す事も出来ます。
アプリやアドビのエクステンションにも対応しています。
リンク先：Coolors
ColorDrop
Color Dropは、4色の配色パターンを参考に出来るサービス。配色を自分でも試すことも出来ますが、色見本として使う方が分かり易いです。
機能の特徴
気に入った配色はハートアイコンを押せばお気に入りとしてストックされます。また、他のおすすめツールと同様に、様々な機能が右上のメニューにあります。初期表示は「paletted」です。
- paletted
- Flate Colors
- Scan image
- Color Code Converter
- Gradient Editor
このサービスも画像から配色パターンを作れますし、グラデーションも作成可能です。
リンク先：ColorDrop
NIPPON COLORS
日本の伝統色（和色）がユニークなUIで紹介されたサイトです。和テイストの色が集められた数少ないサイト。見てるだけでも素敵です。
配色パターンではなく、配色パレットとして、色と色名、色コードを知る事が出来ます。
機能の特徴
画面左に並んだ各色をクリックすると、画面全体がその選んだ色に変わります。
実はただそれだけなのですが美しく、勉強になります。
リンク先：NIPPON COLORS
グラデーションの配色見本サイト
グラデーションの配色自体は簡単に作れますが、綺麗な配色パターンは意外と難しく苦手な人も多い様です。
そんな時は、ツールを活用しましょう。
WebGradients
WebGradientsは、2色のグラデーションの配色見本が紹介されているサービス。
パステル調の優しいグラデーションから、ビビッドなグラデーションまで様々なグラデーションがあります。
機能の特徴
カラーコードだけでなくCSSのコードも取得出来ます。配色パターンを作るのではなく、配色見本として使います。
円形のカラーをクリックすると矩形のグラデーションに変わります。円形と矩形では印象が違いますから、両方確認出来るのはとても便利です。
リンク先：WebGradients
uiGradients
uiGradientsも先程と同じく、2色のグラデーションの配色見本が紹介されているサービス。
画面の左右の矢印をクリックする事で次々と配色を見ていく事が出来ます。
機能の特徴
画面左上の「Show all gradients」からグラデーションの配色パレットを一覧で見る事が出来ます。
画面右上のアイコンでは、押すたびにグラデーションの角度を変更できます。もちろんカラーコードだけでなく、CSSも取得出来ます。こちらでは各ブラウザに対応したCSSコードです。
リンク先：uiGradients
まとめ
配色はデザインだけでなく、サービス全体のイメージを印象付けるくらい重要な物。慎重に決めたいですよね。
慣れないうちは色数を抑えるのがおすすめです。ツールを使って配色パターンを探す際は、多くても3色から4色くらいまでの配色で考えてみましょう。
配色パターンのサイトは沢山ありますが、実用的なツールはごくわずかです。使う際も配色ルールを意識すると気付きが多く勉強になります。
この記事が配色の参考になれば嬉しいです。
note
