こんにちは、LiDoです。
配色はデザインをする上でとても大切ですが、苦手な人は無駄に時間が取られがちです。
webデザインやUIデザインは、可読性を気にしたり色幅が広く迷ってしまうことも。
今回は数多くある配色パターンサイトを厳選して解説してます。
>>【基礎編】配色のコツは色彩の特徴を知ること！で具体的な方法について知ることができます。
すぐ使える配色パターン参考サイト
配色パターンのサイトは数が多いため、以下のポイントを基準に厳選しました。
- 簡単に操作できる
- カラーコードをコピー可能
- 機能が多い
複数色のパターンサイト
お気に入りのサイトにブックマークをつけて置けば、いつでも使用可能。
基本的にデザインする上で単色の配色は参考になります。
私はサイトのコンセプトを決めたら、配色を探りながらデザインを詰めていきます。
Color Hunt
画像引用元：color Hunt
お気に入り登録ができる配色見本サイト。
全世界のユーザーが投稿したカラーパレットを無料で見ることができます。
配色を見本にカラーの割合などはお好みで使用するのがおすすめです。
HELLO COLOR
画像引用元：hello color
色のコントラストがわかるカラーパターンサイト。
コントラスト比が3以上の配色のみがランダムで表示され、可読性を重視する場合はとても使い勝手が良いです。配色ごとにURLが異なるので、URLをコピーしておけばいつでも見ることができます。
ColorDrop
画像引用元：ColorDrop
最近流行りのダークモードで確認できる配色サイト。
一番の特徴は近年UIデザインで人気なダークモードverで確認できます。
このサイトで使用しやすい機能は2つ
【Scan Image】
写真など画像をアップロードすると、画像から自動でカラーコードを読むとってくれます。参考にしている画像に似せたい時などに使用できます。
【gradient Editor】
簡単にオリジナルのグラデーションを作ることが可能。
さらに、作ったグラデーションはcssに自動で起こしてくれます。
綺麗なグラデーション配色サイト
最近流行りのグラデーション取り入れたい時に最適です。
一からグラデーションを考えるのは、難しく結構面倒です。
わたしはグラデーション配色ツールから調整して、デザインに取り入れていました。
Grabient
画像引用元：Grabient
自由にカスタマイズできるグラデーション配色サイト
見本になるグラデーションから色の追加や角度の変更が可能ができます。
調整した配色はCSSでコピー可能です。
WebGradients
画像引用元：WebGradients
グラデーションに名前が付いているのが特徴です。
気になる色をクリックすると、全画面で確認することができます。
CSSに変換は勿論、PNG画像として保存が可能です。
【 おまけ 】日本の伝統色参考サイト
日本の伝統色参考サイトを紹介します。
Nippon colors
画像引用元：NIPPON COLORS
和風デザインがしたい時に実際に参考にしました。
「色名」「CMYK」「RGB」「カラーコード」全てが揃っているので、紙媒体からweb媒体まで作品の幅が広がります。サイト自体のデザイン性が高く、デザインの参考になるかもしれません。
配色パターン参考に時短を目指せ
配色パターンサイトを使用すれば、作業効率が上がり時短になります。
サービスの中には、「PSDデータ」や「Sketchデータ」としてダウンロードできます。
カラーコードをコピペすれば、デザインやコーディングにも使用できます。
下記の記事は、具体的なポイントを抑えた内容になります。
では、また次の記事でお会いしましょう。
コメント