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

https://www.slideshare.net/ckazu/ss-75595220

Transcript

1. ウェブエンジニアのための色の話 2017/04/06 kiban LT 珍田(@ckazu)
2. 色とは 網膜 の { 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 桿体: 暗所で光を感じる。 色は感じない ※ 桿体の感度のピー クは緑にあたる => 非常口案内の光は緑: 暗闇でも感知しやすい
3. 光とは 17C: ニュー トン「 光とは粒子」 vs ホイヘンス「 光とは波動」 18C: ヤングの干渉実験「 光が波動であることの証明」 20C: アインシュタイン「 光とは光子」
4. ウェッブエンジニアにおなじみのRGB(+A) 光の三原色: Red, Green, Blue 光の合成 混ぜると白になる => 加法混色
5. 補足: 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 は同じ明るさだが輝度は異なる。 人間にとって は緑が一番明るく青が一番暗く見える
6. 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... などと呼ばれる
7. 混色以外の表現方法 マンセル表色系など 色を三次元的に定義した 色相: Hue 彩度: Chroma 明度: Value
8. ところで... エンジニア「 おされなウェブサー ビス作るぜ！」 エンジニア「 赤ベー スのサイトにしよう！！！」 #ff0000 #cc0000 #993333 いまいち...
9. ウェッブエンジニアにとっての RGB 以外の選択肢: hsl, hsla 色相: Hue 彩度: Saturation 輝度（ 明度）: Lightness (Luminance) 大体のブラウザで使える http://caniuse.com/#feat=css3‑colors ※ もちろん、Sass とか less でもできる
10. 色相: Hue 色相環: スペクトルを（ 赤紫を追加して無理やり） 輪っかにした。 いくつかの色相環表現がある 0‑360 の角度で指定する. 0 が赤 補色や、 近い色/ 遠い色というのがわかりやすい（ 色相環によっては 補色の定義が異なるので注意） ただし、 角度だけみて何色なのかを判断するのが難しい
11. 彩度: Saturation 鮮やかさ 0‑100% で指定する 100% で最も鮮やかになる。 原色や純色のようなイメー ジ。 0% はグレー スケー ルになる
12. 輝度: Lightness 明るさ（≠ 明度） 0‑100% で指定する 50% が標準的な輝度 100% で白になる 0% で黒になる
13. HSL を使用した色指定の例 https://rawgit.com/ckazu/76776cf4aaa804cd01d4a32c2a571b83/ra w/2aaed5e6658e16cf9051ba17395ea9ff9dfbc4fd/hsl_example01.ht ml
14. つまり... 鮮やかさと明るさ（ すなわち、 トー ン ） を決めれば、 統一された色セ ットを定義できるはず！
15. さらに色彩調和 トー ンを決めれば、 後は 角度の組み合わせ で色の組み合わせを選 べば良い。 センスは（ あまり） 必要ない！ ジャッドとかイッテンとか色んな人が言ってる 色彩調和論 とか 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
16. 例えば... https://rawgit.com/ckazu/006626fa04167eafe685e53a3f133dab/ra w/cfdc635d2e61766fcce25b02f2d6ce709818fe09/hsl_example2.ht ml
17. 参考書籍