【カラーサンプル】ホームページの色選択で悩んでる時に役立つサイト8選!


ホームページの色を決めるのって悩みますよね?
こんな風に考えこむのは僕だけじゃないはず!笑

ゴリラの画像

サイトのジャンルやテーマによりなんとなく色の方向性は決まっているけど、青1つにしても無数の色が存在していて、「あ~もぅどうしようッ!!」って叫んでいる時に僕が参考にしているカラーサンプルサイト8選を紹介します。

iOS8のようなフラットな感じや心奪われる鮮やかなグラデーションを教えてくれる『iOS8 colors』

iOS8Colorsの画像

リンク iOS 8 colors

iPhoneの色ってなんだか洗礼されていて心が奪われますよね?

さすが時価総額世界1位のクオリティーです。そんなプロ集団が悩みぬいて苦労に苦労を重ねて見つけたであろう配色を知ることが出来ちゃうのがこのサイトです。マウスオンでカラーコードが表示されるため簡単にコピペ出来てあなたのサイトに反映出来ちゃいます。

簡単に相性の良い同系色を教えてくれる『Paletta』

palettaの画像

このサイトの特徴は、とりあえず好きな系統の色をクリックすると相性の良い同系色を教えてくれる点です。僕はこのサイトで自分の理想に近い色を探したりします。また、カラーコードをクリックするだけでコピペ出来るので楽ちんです。

フラットデザインに合う色を教えてくれる『Flat UI Colors』

Flat UI Colorsの画像

リンク Flat UI Colors

僕はフラットデザインというのが大好きなようで、基本的な色をまずはこのサイトで決めています。こちらも好きな色をクリックすれば簡単にコピペ出来ます。

このサイトは色が限られているので必ずしもイメージに合致するわけではありませんが、「こんな感じの色いいなぁ~♪」という色の方向性を決める段階に役立ちます。

世界中の人が作った配色を拝借できる『Adobe Color CC』

Adobe Color CCの画像

サイトの色が1色でいいのなら苦労しませんが、実際にはリンクやマウスオーバーなどで色を変える必要がユーザビリティー的にも必然です。

ただ、『色』というのは奥が深く、少し違うだけで受ける印象が想像以上に違ってしまいます。色彩学的な専門知識があれば別なのかも知れませんが、自分一人の頭で考えるよりも、世界中の頭脳を使ったほうが、到底想像すら出来ない色の組み合わせを知ることが出来ます。

眺めているだけで楽しいサイトなので、少々気をつける必要があります。時は金なり。

世界の名だたる企業のブランドカラーが分かる『BrandColors』

BrandColorsの画像

リンク BrandColors

世界的に有名なブランドのメインカラーを知ることが出来るサイトです。僕は無知ゆえにに知らないブランドがたくさんあるのですが、それぞれ微妙に違い、絶妙な色の組み合わせにただただ脱帽します。

また、ブランド名をクリックするとチェックマークされCSSなどをダウンロード出来ます。

日本の伝統色とその由来を教えてくれるサイト

日本の伝統色の画像

日本人だから色の名前も日本語表記のほうがイメージしやすいですよね?

カテゴリー分けがものすごく分かりやすく、例えば「江戸時代の色」なんてのもあります。サイトのジャンルやテーマのイメージから「なんかのお花っぽい色がいいなぁ~…。」なんて時には「花の色」カテゴリーじっくり見ておくとイイ発見があると思います。

世界の伝統色の名前が分かるサイト

世界の伝統色の画像

日本の伝統色の方がイメージしやすい時もあれば、世界の伝統色の方がイメージしやすい時もあるはずです。そんな時はこのサイトが参考になります。また、同一サイト内に日本の伝統色のページもあるので見比べたりも出来ます。

好きな色を自分で探したい時に役立つ『Coolors』

Colorsの画像

なかなか思うような色に巡り合えない時にはこのサイトがとてもとても参考になります。

スペースキーを押すことで自動的に色が生成されます。気に入った色があった場合、その色をクリックすればロックできます。また、ドラックで移動できるので同時に色の並びおよび組み合わせも追求できます。

時間がある時にじっくりと理想の色を追求したい時にはもってこい!僕が今1番お気に入りのサイトです♪

まとめ

いかがでしたでしょうか?

以上が僕が普段利用しているカラーサンプルサイト8選です。ただ、色見本サイトというのはものすごくたくさんあるので、ぜひあなたも探してみてください。

もし良いサイトがあったら僕にも教えてね!
あ~ホームページの色を決めるのって悩むなぁ♪


IT・WEB
アクセス数: 2465

スポンサーリンク

よかったらシェアして下さい!

関連記事 これも読むんだよ♪

キタ━(゚∀゚)━!YouTubeから『第三者のコンテンツと一致しました。』CONTENT IDというのに引っかかったらしい

キタ━(゚∀゚)━!YouTubeから『第三者のコンテンツと一致しました。』CONTENT IDというのに引っかかったらしい


今見てるサイトのフォントが分かるChromeの拡張機能『WhatFont』

今見てるサイトのフォントが分かるChromeの拡張機能『WhatFont』


【Wi-Fi WALKER】WiMAX2+ HWD15のネット接続スピードを測定検証!

【Wi-Fi WALKER】WiMAX2+ HWD15のネット接続スピードを測定検証!


コメントはお気軽にどうぞ
内容に問題なければ下記の「コメントを送信する」ボタンを押してください。