ウェブエンジニアのための色の話

ウェブエンジニアのための色の話 2017/04/06 kiban LT 珍田(@ckazu)

色とは網膜の { L , M , S }
錐体への光の刺激によって知覚されるもの光の波長に反応する錐体があり、それによって色を知覚する色覚異常は錐体の感度の個体差 400 Violet Blue Cyan Green Yellow Red 0 50 100 420 S R M L 534 498 564 500 Wavelength (nm) Normalized absorbance 600 700 桿体: 暗所で光を感じる。色は感じない ※ 桿体の感度のピークは緑にあたる => 非常口案内の光は緑: 暗闇でも感知しやすい

光とは 17C: ニュートン「光とは粒子」 vs ホイヘンス「光とは波動」 18C: ヤングの干渉実験「
光が波動であることの証明」 20C: アインシュタイン「光とは光子」

ウェッブエンジニアにおなじみのRGB(+A) 光の三原色: Red, Green, Blue 光の合成混ぜると白になる => 加法混色

補足: RGB で色の明るさが揃わない問題輝度の違い RGB を使って緑だけ明るく見えて色が揃わないのは、緑の輝度が高いから色の感度比率の定義: R:G:B
≒ 0.2988 : 0.5868 : 0.1143 ≒ 3 6 1 #f00#0f0#00f #c33#3c3#33c 輝度 ≠ 明度明度は測定可能な明るさ、輝度は人間が感じる感覚的な明るさ # f 0 0 , # 0 f 0 , # 0 0 f は同じ明るさだが輝度は異なる。人間にとっては緑が一番明るく青が一番暗く見える

Adobe ユーザにおなじみの CMYK 色の三原色: Cyan, Magenta, Yellow, Black(Key plate?)
インクの合成．混ぜると黒になる => 減法混色（混ぜれば混ぜるほど、反射する光が減る） ※ C M Y 1 0 0 % もしくは C M Y 0 % , K 1 0 0 % で真っ黒を作るのは難しく、色を混合して黒らしい黒を印刷している Pure Black, True Black, Rich Black... などと呼ばれる

混色以外の表現方法マンセル表色系など色を三次元的に定義した色相: Hue 彩度: Chroma 明度: Value

ところで... エンジニア「おされなウェブサービス作るぜ！」エンジニア「赤ベースのサイトにしよう！！！」 #ff0000 #cc0000 #993333
いまいち...

ウェッブエンジニアにとっての RGB 以外の選択肢: hsl, hsla 色相: Hue 彩度: Saturation 輝度（
明度）: Lightness (Luminance) 大体のブラウザで使える http://caniuse.com/#feat=css3‑colors ※ もちろん、Sass とか less でもできる

色相: Hue 色相環: スペクトルを（赤紫を追加して無理やり）輪っかにした。いくつかの色相環表現がある 0‑360 の角度で指定する. 0
が赤補色や、近い色/ 遠い色というのがわかりやすい（色相環によっては補色の定義が異なるので注意）ただし、角度だけみて何色なのかを判断するのが難しい

彩度: Saturation 鮮やかさ 0‑100% で指定する 100% で最も鮮やかになる。原色や純色のようなイメージ。 0%
はグレースケールになる

輝度: Lightness 明るさ（≠ 明度） 0‑100% で指定する 50% が標準的な輝度 100% で白になる
0% で黒になる

HSL を使用した色指定の例 https://rawgit.com/ckazu/76776cf4aaa804cd01d4a32c2a571b83/ra w/2aaed5e6658e16cf9051ba17395ea9ff9dfbc4fd/hsl_example01.ht ml

つまり... 鮮やかさと明るさ（すなわち、トーン）を決めれば、統一された色セットを定義できるはず！

さらに色彩調和トーンを決めれば、後は角度の組み合わせで色の組み合わせを選べば良い。センスは（あまり）必要ない！
ジャッドとかイッテンとか色んな人が言ってる色彩調和論とか c o l o r h a r m o n y t h e o r y とかで調べると良い参考: http://www.tigercolor.com/color‑lab/color‑ theory/color‑harmonies.htm

例えば... https://rawgit.com/ckazu/006626fa04167eafe685e53a3f133dab/ra w/cfdc635d2e61766fcce25b02f2d6ce709818fe09/hsl_example2.ht ml

参考書籍

ウェブエンジニアのための色の話

ウェブエンジニアのための色の話

ckazu

More Decks by ckazu

Other Decks in Technology

Featured

Transcript