配色パターンにも色彩ごとに黄金比が有り、人が見たときに美しいと感じるかどうかはその方程式の理にかなっているかどうかが重要になります。
今回紹介する無料ツールは私も日頃からヘビーに使い倒している「〜大辞典」シリーズというサイトです。
カラーコードもhtml変換してくれるので、デザイン関係だけじゃなくweb担当者も使える使える神ツールですよ！
Contents
- 1 色の見本や配色パターンをhtmlのカラーコード付きで表示してくれる無料ツール
- 2 色使いの一番の基礎「原色大辞典」
- 3 ちょっと渋い配色デザイン「和色大辞典」
- 4 海外っぽい色の相関図「洋色大辞典」
- 5 webセーフカラーの「web216」
- 6 かわいい配色を目指すなら「パステルカラー」
- 7 色彩の三原色を含む「ビビッドカラー」
- 8 最もスタンダードな配色デザイン見本帳「モノトーン」
- 9 奇抜な配色デザイン見本帳に「メトロカラー」
- 10 配色大辞典/配色パターンをカラーコード付きで表示
- 11 キーワード/イメージ検索で思い描く色彩やカラーコードを特定する
- 12 上級者向け「色彩を調合する」機能
- 13 上級者向け「カラーピッカー」
- 14 色彩占いも出来ちゃいます！「ラッキーカラー」
- 15 好きな言葉から連想されるストライプカラーを自動生成
- 16 言葉から色彩の成分を解析
- 17 人気のある色彩＆配色ランキング
- 18 まとめ
色の見本や配色パターンをhtmlのカラーコード付きで表示してくれる無料ツール
こちらがトップページになりますが、非常に色んな機能があるので順々に説明していきます。
まずは色彩を一覧表示する大辞典シリーズの各カテゴリーから見ていきましょう！
色使いの一番の基礎「原色大辞典」
原色を一覧表示していますが、まずこの時点で自分が配色に組み合わせたい色彩が何となく見えてきませんでしょうか？
lavenderとかaliceblueとか良い感じの色合いですね！
ここで心に響く色彩を探していきます。
個人的にはこの原色大辞典が1番探しやすいかなという印象。
ちょっと渋い配色デザイン「和色大辞典」
こちらが「和色大辞典」のメインメニューです。
一気に日本っぽい感じの雰囲気が増しましたね。あずき色とか桜色など絶妙な所を突いていると思います。
原色のみならツール無しでも色彩を見つけられる方も多いと思いますが、こういった微妙なニュアンスを表現するにはめちゃめちゃ便利すぎるツールです。
海外っぽい色の相関図「洋色大辞典」
何となくヨーロピアンなイメージの色彩がしっかり選定されています。
パスタ屋さんとかピザ屋さんを連想する感じの色ですね。
日本人にはあんまり馴染まない色かも？
ただやっぱり、webサイトのコンテンツに合わせて、色彩をデザインしていく時に使えますよ。本当に。
webセーフカラーの「web216」
こちらもwebセーフカラーに焦点を当てて抽出されています。
ちなみにwebセーフカラーとは…
- 216色ある
- ページの背景色や文字色には、WEBセーフカラーを配色する事が理想的
- webセーフカラー以外ののカラーだの場合、端末により表示の際に色が自動変換されてしまう可能性がある
ですので、webサイトの背景や文字色を模索している時にはwebセーフカラーから順に見ていくのがベストだとは思います。
現在はwebサイトを表示する端末も進化してきたので、webセーフカラーじゃないと表示されないっていう訳ではありません。
かわいい配色を目指すなら「パステルカラー」
こちらは「パステルカラー」のカテゴリーページ。
一気に優しい印象の色合いになりましたね。
自分でこの辺の調整をするよりは見本から探してhtmlコードを抜粋していく方が時短術としても効率が良いと思います。
特にパステルカラーは調整が難しいので、助かりますね。
色彩の三原色を含む「ビビッドカラー」
「ビビッドカラー」の一覧。目がチカチカしちゃいそうです。
ビビッドカラーばっかで組み合わせると趣味が悪くなっちゃうので、メインカラーの選定の際に見たい一覧ですね。
最もスタンダードな配色デザイン見本帳「モノトーン」
こちらは「モノトーン」です。
グレーにも幅があるなぁ〜とつくづく感じますね！
グレーの色彩を微調整していくだけでも、イメージはガラリと変わりそうです。
モノトーン色、とりわけグレーはあなどれません。
奇抜な配色デザイン見本帳に「メトロカラー」
最後は「メトロカラー」です。
地下鉄のイメージにちなんだ色彩が選定されていますので、ちょっとマニアックなカテゴリー。
色でここまでイメージ作りが可能になるのか、って感じですね。
次は配色の辞典になります。
配色大辞典/配色パターンをカラーコード付きで表示
アルファベットのAをサンプル文字に一覧表示しているので、文字色を検討したい時にベストかなぁと思います。
配色パターンはこの各色彩のリンクをクリックすると表示してくれます。
例えばgoldという色で配色パターンを打診してみた結果は…
こんな感じ。
配色パターンの方程式をベースに表示してくれるので、本当に便利ですよ。
ここでサブカラーなどの候補を検討出来ます。
次に色彩と配色のイメージ検索機能 です。
キーワード/イメージ検索で思い描く色彩やカラーコードを特定する
この機能では検索したい色やカラーコードから色彩を見つけたり、なんとなくのイメージから連想される色彩を生成してくれます。
色検索の欄は個人的には入力が面倒なので、いつも2番目のイメージ検索で探してます。
イメージの項目もこれだけありますし…
色彩の指定もこれだけあります。
明るい陽気なイメージの黄で検索してみました！
黄色にもこんなに種類があるのか！！！
って感じです。
色彩や配色を検討する時って大概の人はイメージはあるけど、具体的に固まらない事がほとんどだと思います。
ですので、このイメージ検索は個人的にはこのツールのイチオシ機能かなぁという風に思ってます。
オススメの機能ですっ！！！
上級者向け「色彩を調合する」機能
好きな色彩が分かったら、次はそのカラーコードを元に調合をします。
個人的にはここまでの機能を使う機会はそんなに無いかな？って思いますが、一応こんな機能もありますよという事でインフォメーションです。
上級者向け「カラーピッカー」
これはWordPressのカスタマイザー画面によくある、丸カーソルを移動させた所の色彩が生成されるやつです。
カーソルを動かしながらリアルタイムで色調変化を確認出来るので、良い機能だと思いますよ。
個人的にはこの機能も使う機会は少ないですね。
色彩占いも出来ちゃいます！「ラッキーカラー」
ここからは遊び感覚の要素が詰まった機能です。
ラッキカラー占いみたいなやつで、誰がその色を選定しているのかは不明ですがネタとしては使えますね！
好きな言葉から連想されるストライプカラーを自動生成
これは結構面白いですよ！
言葉を入力すると連想されるストライプが生成されるんですが、「Mac」で検索してみたら…
紫寄りの青のストライプが生成されました！
個人的にはシルバーとかモノトーンのイメージだったんですけど、どういうアルゴリズムで生成しているんでしょうね。
自分の発想には無かった色彩の案を模索する際には使えると思います。
言葉から色彩の成分を解析
この機能もすっごいオススメです！
先ほどのストライプに似てますが、こちらは色彩の成分を自動解析して調合した場合の出来上がり色まで教えてくれます。
人気のある色彩＆配色ランキング
これはこのツールを使う人たちの中でどの色彩が人気だったかをポイント形式で計上しています。
人気がある色＝見る人にとっても嬉しい色
という事にもなるのでは無いでしょうか？そう考えると人気色で固めちゃうってのも選択肢としてはアリですよね！
まとめ
いかがでしたでしょうか？
このツールがあれば素人でも大概の配色デザインは方程式に則って選定できるはずなので、webサイトの背景とかヘッダー、メニュー、リンク色など迷っている人にはオススメできますね。
デザイナー関係の方にとっても自分の中で凝り固まった配色をぶっ壊してくれる機能もあるので、新しいアイデアの原点になるかもしれませんよ。
他にも配色系のオススメツールがもう一つあって、それは随分前に過去記事で特集しましたが、気になる方は同じカテゴリーにあるんで比較して見てくださいっ！
そんでは、またね！
