CSSでのHSLカラー指定

sample photo

CSS3から追加されたHSLカラーでの色指定サンプルです。
上のモノクロ写真にHSL(左下)とRGB(右下)の指定でそれぞれ色を被せてみました。

sample photo
● HSL指定:hsla(300,100%,50%,0.1);
sample photo
● RGB指定:rgba(255,0,255,0.1);
両者とも「magenta(#FF00FF)」アルファ値:0.1(不透明度:10%)で指定。
RGB・HSLの色変換はこちらのサイトを利用。

 

若干、HSL指定のほうが彩度が高く見える気がしますが、皆さんのモニタではいかがでしょうか。

HSL対応ブラウザ:IE9+ Chrome 6+ Firefox 3.0+ Safari 3+ Opera 10+

色彩学の基礎

グラフィックデザインやWebデザインに配色の知識は必要不可欠です。 基礎知識くらいはしっかりと憶えておきましょう。 基本的な色のお話しはこちらのサイトでどうぞ。

PCCSカラーシステム

PCCS 色相環 PCCS トーン

色に関する資格

デザイン以外にも色に関連する職業はたくさんあります。
必ずしも資格がないとグラフィックデザインやWebデザインができないわけではありませんが持っていても損はないでしょう。

色に関する雑学

色の知識は仕事だけじゃなく私生活にも活用できます。

参考サイト