Download as PDF, PPTX
![Cephを用いたwordpressの構築[LT版]](https://cdn.slidesharecdn.com/ss_thumbnails/cephwordpresslt-170619022947-thumbnail.jpg?width=640&height=640&fit=bounds)
ウェブエンジニアのための色の話
- 1.
- 2. 色とは 網膜の {L, M, S}錐体 への光の刺激によって知覚されるもの 光の波長に反応する錐体があり、それによって色を知覚する 色覚異常は錐体の感度の個体差 400 Violet Blue CyanGreen Yellow Red 0 50 100 420 S R M L 534498 564 500 Wavelength (nm) Normalizedabsorbance 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 輝度≠ 明度 明度 は測定可能な明るさ、 輝度 は人間が感じる感覚的な明るさ #f00, #0f0, #00f は同じ明るさだが輝度は異なる。人間にとって は緑が一番明るく青が一番暗く見える
- 6. Adobe ユーザにおなじみのCMYK 色の三原色: Cyan,Magenta, Yellow, Black(Key plate?) インクの合成．混ぜると黒になる => 減法混色（混ぜれば混ぜるほど、反射する光が減る） ※ CMY 100% もしくは CMY 0%, K 100% で真っ黒を作るのは難しく、色 を混合して 黒らしい黒 を印刷している Pure Black, True Black, Rich Black...などと呼ばれる
- 7.
- 8.
- 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.
- 14.
- 15.
- 16.
- 17.