JaGraプロフェッショナルDTP&Webスクール スキルアップブログ

JaGraプロフェッショナルDTP&Webスクールの講師とスタッフが綴る、日々感じたさまざまなできごとやお役立ち情報!

好みの色の16進数カラーコードを知る方法

XHTML+CSSベーシックトレーニング」講座の受講者の方より、下記の質問をいただきました。

CSSで背景色を変える際、微妙な色の違いを確認してからCSSで設定するには、どうしたらよいでしょうか。


色のコードを知るには、PhotoshopFireworksなどのグラフィックソフトを使用するのが業務では一般的です。
picker02.jpg上の画像はPhotoshopのカラーピッカーですが、ほとんどのグラフィックソフトには、お好みの色を選ぶとWeb用に16進数カラーコードが表示される機能があります。
また、Webセーフカラーに制限したい場合は、選んだ色にもっとも近いWebセーフカラーを知ることもできます。

スクール受講者の方の中には、プロのWebデザイナーの方以外にも、企業内Web担当者や、事務の一環としてWebの更新業務を行っている方もいらっしゃいます。
そのような場合、グラフィックソフトをお持ちでないかもしれませんが、現在インターネット上には無料で利用できるさまざまなオンラインカラーピッカーがありますので、その一部をご紹介しましょう。
====


また、カラーを選択しカラーコードを知るだけでなく、配色の研究に役立つツールもあります。

  • ColorJack:Sphere(英語)
    http://mudcu.be/sphere/
    カラーピッカーから色を選択すると、相性のいい色を提案してくれます。2色、6色等の色数も選択可能。
  • Color of Book
    http://colorchart.jp/
    本や雑誌からWebに使える配色を調べることができます。お好みの雑誌を探してみては?
  • Web Site Color Picker
    http://pick.v-colors.com/
    URLを入れると、そのサイトに使われている色を抽出してくれます。このサイトの配色素敵だな!と思ったら、配色を研究してみましょう。


スクールでは、実務でWebに携わっている方のどんな些細なご質問にもお答えしていきます!