【色】配色などに迷った時にめっちゃ使えるサイトまとめ

ブログやサイトを運営していると、文字や背景の色を変えてみたくなったりしませんか?

だいたい色って、htmlやcssでは、ハッシュ( # )で始まる6桁のカラーコードで指定されてますよね。
でもカラーコードってどこで探せばいいの?
配色がよくわからない!
ってときに役立つ便利なサイトを3つご紹介します!

スポンサーリンク
[ad]

原色大辞典

http://www.colordic.org/

ブラウザで名前が定義されてる、つまりカラーコードでなくてもカラーネームを記述したら反映される140色を紹介してるサイト。
もちろんカラーコードも書いてあります。
1

color-sample.com

http://www.color-sample.com/

こちらのサイトでは、カラーホイールで好きな色を選ぶことができます。

9

もちろん、見本の中から選ぶこともできます。

4

flickr で、選んだ色がベースカラーの画像を見つける

flickrとは、クラウド型の写真共有サービスです。

容量の大きな写真を何百、何千とPCや外付けHDDに保存するのって無理ですよね。
flickrは、オンライン上に写真を保存・共有できるんです。
ほかの人が共有してる画像もダウンロードできます。
選んだベースカラーの画像が一覧表示されるので、便利です。

2

助かるのは、配色見本があること

読者からの投稿ですが、膨大な量の色の組み合わせから相性のいい配色を投稿したものと、それを使ったサイト見本が見れるので、イメージしやすいです。
10

 

実際にその色をベースカラーとして使っているサイトの紹介などもあり、かなり参考になります。

 

Adobe Kuler

https://color.adobe.com/

Adobe Kulerとは?

KulerはAdobe製のオンラインカラー作成ツールで、カラーテーマ(5色)をつくったり他の人が作ったカラーテーマを見ることができます。
PC画面やFlickrの画像から色を抽出できるので便利!気に入った色をそっくりコピーすることができます。

色にも流行があり、ここを見てると、今どんな配色が人気なのかがなんとなくわかってきます。

人気テーマを見る

起動して、上部にあるメニューの【探索】から【人気】を選ぶと、ほかの人が作ったカラーテーマで、人気のあったものが出てきます。
5

 

テーマを作る

上部のメニューの【作成】をクリックします。

中央にあるカラーホイール(色相と彩度)、明度スライダーで色を選択できます。
カラーホイールは円の中心ほど彩度が低く外側ほど高くなります。
明度スライダーは左にいくほど暗く、右に行くほど明るくなります。

7

カラーホイールには5本のセレクターがあり、太丸のセレクターがベースカラーになります。

 

ベースカラーとは?

ベースカラーは全体的なイメージとなる色で、もっとも多くの領域を占めるカラーです。ブログだったら、背景色になる色です。
黄色や赤などの原色だと、人目を引くための広告とかならいいんですが、読ませるためのブログなどには向きません。
目が疲れるからね。
個人的に、黒がベースで黄色の文字とかも、ものすごく目が疲れるのでやめてほしいです。

で、ベースカラーを変更すると、サブカラーもベースカラーに合わせて変わります。
これ、めっちゃ便利ですね。

カラールール

  • 類似色
  • モノクロマティック
  • トライアド
  • 補色
  • コンパウンド
  • シェード
  • カスタム

とありますが、それぞれのルールにのっとって、ベースカラーに合うサブカラーを見つけてくれます。

 

配色や色の選択で迷っていたり、そもそも色のコードがわからない!って方は、このようなサイトを使って、イメージ通りのサイト作りをしてくださいね!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

thirteen + 7 =