Webデザイン「配色パターン」色で迷った時に参考になるサイト

Webデザイン「配色パターン」色で迷った時に参考になるサイト

Webデザインで「配色パターン」に迷った時に参考になるサイトを紹介します。

Webデザイン「配色パターン」参考サイト

Webサイトのデザインで重要な「配色」選びに役立つサイトを紹介します。サイトの印象が決まるイメージカラーやアクセントカラーを選ぶ時、バナー作成の時などに参考にしている「色見本」や「配色パターン」のおすすめサイトを厳選しました。配色に迷った時にとても役立つので、ブックマークに入れておくと便利です。

Color Hunt

「Color Hunt」は、配色のパターンが参考になるサイトです。4色の配色パターンがたくさん見れるので色に迷ったらとりあえず、このサイトから見ていきます。配色の組み合わせや色の相性などを全体的に見れるので、とてもオススメです。

Color Hunt : https://colorhunt.co

配色の見本帳

選んだ色を「キーカラー」にして色の法則から多彩な配色を提案してくれます。Webカラーをベースに色数値情報も掲載されていて、他にも「カラー分析」や「配色展開」などもあります。色を展開したいときや新しい色の組み合わせと出会いたいときは「配色の見本帳」がオススメです。

配色の見本帳 : https://ironodata.info

原色大辞典

色の名前やカラーコードが一目でわかる「WEB色見本」で、ブラウザで名前が定義されている140色の色名と16進数がわかります。「現色大辞典」は、9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー(216色)、パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色の9つから構成されています。

原色大辞典 : https://www.colordic.org

HUE/360

「HUE/360」は、色相、彩度、明度を直感的に操作しながら色の組み合わせを探す事ができます。色を選ぶと相性の良い色を提案してくれます。選択された色が画面の下部に表示されて、他の色と比較したりもできます。

HUE/360 : http://hue360.herokuapp.com

shade

「shade」は、カラーコードを入力してベースカラーを決めると、自動的に「グラデーション」を生成してくれるツールです。グラデ好きはチェックしてみて下さい。

shade : https://jxnblk.com/shade/

Flat UI Colors

「Flat UI Colors」は、フラットデザインに使える色を選べるツールです。パレットを選択して、色をクリックするだけでカラーコードがコピーできるので、とても便利です。

Flat UI Colors : https://flatuicolors.com

この記事が気に入ったら
いいね!しよう

Twitter で
          

関連記事


Written by

Videographer / Web Designer 動画編集・映像制作(Final Cut Pro X,YouTube)Webデザイン・HP制作(WordPress,SEO,アフィリエイト)一眼レフカメラ・ドローン(Vlog撮影,一眼動画撮影)などの情報を「松岡高宏」がブログで発信します。

ほしい物リスト