【2020年版】すぐ使える配色パターン参考サイト6選

【 厳選 】もう迷わない!すぐ使える配色パターン参考サイト6選

こんにちは、LiDoです。
配色はデザインをする上でとても大切ですが、苦手な人は無駄に時間が取られがちです。
webデザインやUIデザインは、可読性を気にしたり色幅が広く迷ってしまうことも。

今回は数多くある配色パターンサイトを厳選して解説してます。

>>【基礎編】配色のコツは色彩の特徴を知ること!で具体的な方法について知ることができます。

すぐ使える配色パターン参考サイト

配色パターンのサイトは数が多いため、以下のポイントを基準に厳選しました。

  • 簡単に操作できる
  • カラーコードをコピー可能
  • 機能が多い

複数色のパターンサイト

お気に入りのサイトにブックマークをつけて置けば、いつでも使用可能。
基本的にデザインする上で単色の配色は参考になります。
私はサイトのコンセプトを決めたら、配色を探りながらデザインを詰めていきます。

Color Hunt

サイト名colorhunt

画像引用元:color Hunt

お気に入り登録ができる配色見本サイト。
全世界のユーザーが投稿したカラーパレットを無料で見ることができます。
配色を見本にカラーの割合などはお好みで使用するのがおすすめです。

ここから「color Hunt」へ飛べます

Color Hunt

HELLO COLOR

サイト名hellocolor

画像引用元:hello color

色のコントラストがわかるカラーパターンサイト。
コントラスト比が3以上の配色のみがランダムで表示され、可読性を重視する場合はとても使い勝手が良いです。配色ごとにURLが異なるので、URLをコピーしておけばいつでも見ることができます。

ここから「hello color」へ飛べます

hello color

ColorDrop

サイト名colordrop

画像引用元:ColorDrop

最近流行りのダークモードで確認できる配色サイト。
一番の特徴は近年UIデザインで人気なダークモードverで確認できます。

このサイトで使用しやすい機能は2つ

【Scan Image】
写真など画像をアップロードすると、画像から自動でカラーコードを読むとってくれます。参考にしている画像に似せたい時などに使用できます。

【gradient Editor】

簡単にオリジナルのグラデーションを作ることが可能。
さらに、作ったグラデーションはcssに自動で起こしてくれます。

ここから「ColorDrop」へ飛べます

ColorDrop

綺麗なグラデーション配色サイト

最近流行りのグラデーション取り入れたい時に最適です。
一からグラデーションを考えるのは、難しく結構面倒です。
わたしはグラデーション配色ツールから調整して、デザインに取り入れていました。

Grabient

サイト名grabient

画像引用元:Grabient

自由にカスタマイズできるグラデーション配色サイト
見本になるグラデーションから色の追加角度の変更が可能ができます。
調整した配色はCSSでコピー可能です。

ここから「Grabient」へ飛べます

Grabient

WebGradients

サイト名webgradients

画像引用元:WebGradients

グラデーションに名前が付いているのが特徴です。
気になる色をクリックすると、全画面で確認することができます。
CSSに変換は勿論、PNG画像として保存が可能です。

ここから「WebGradients」へ飛べます

WebGradients

【 おまけ 】日本の伝統色参考サイト

日本の伝統色参考サイトを紹介します。

Nippon colors

サイト名nipponcolors

画像引用元:NIPPON COLORS

和風デザインがしたい時に実際に参考にしました。
「色名」「CMYK」「RGB」「カラーコード」全てが揃っているので、紙媒体からweb媒体まで作品の幅が広がります。サイト自体のデザイン性が高く、デザインの参考になるかもしれません。

ここから「NIPPON COLORS」へ飛べます

NIPPON COLORS

配色パターン参考に時短を目指せ

配色パターンサイトを使用すれば、作業効率が上がり時短になります。
サービスの中には、「PSDデータ」や「Sketchデータ」としてダウンロードできます。
カラーコードをコピペすれば、デザインやコーディングにも使用できます。

下記の記事は、具体的なポイントを抑えた内容になります。

では、また次の記事でお会いしましょう。

コメント

タイトルとURLをコピーしました