2013.05.26
design

デザインするときに便利な色一覧

DTPデザインでもWebデザインでも色選びはとても大切です。
何色を使うか、どんな色の組み合わせにするかというのは制作物のイメージを大きく左右します。

色を選んだり、色の調整をしたりするときに便利なサイトを紹介します。

Webデザインに便利な色見本サイト

HTMLやCSSなどのコーディングをするときに使える#ではじまる6ケタの色番号が表示されるのでとっても便利です。
またCSSではrgbaで色を指定することも多いと思いますが、rgbカラーについても同時に表示されるようになっています。

WEB色見本 原色大辞典 – HTML Color Names

http://www.colordic.org/

一覧から任意の色を選ぶと下記のような画面になり、色情報の詳細を見ることができます。

この場合は#20b2aaをそのままコピペしてHTMLもしくはCSSで使用。

例えば
HTMLソース 

<p style="color:#20b2aa">lightseagreenって明るい海の緑色と訳せば良いでしょうか。</p>
文字が指定した色で表示されます。 

lightseagreenって明るい海の緑色と訳せば良いでしょうか。

このウェブサイトではもっと細かい一覧もあるのでこちらも参考にどうぞ。
http://www.colordic.org/colorsample/

色見本と配色サイト – color-sample.com

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

色の系統からイメージを考えたいときにはこちらのサイトの方が色んな情報があって良いです。
メニューバーから色を選ぶと、その系統の色をランダムで25個ずつ表示してくれます。
ブラウザを更新するとまたランダムで違う色が表示されるようです。

また、似た色を使用したウェブサイトや、Flickrでの類似色の画像を表示してくれます。

その他明度や彩度などでも色一覧が見られます。

DTPデザインで便利な色見本サイト

上記の2つのサイトでも十分対応できますが、DTPの場合はDICカラーやPantoneカラーで色を指定されることもあります。
そんな時は以下の2つのサイトが色見本として最適です。

DICカラー・一覧
Pantoneカラー・一覧

とはいっても印刷の場合はモニターの色とは違うことがほとんどなので、最終的な色のチェックは実際のカラーチップでする必要があるかと思います。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP