Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
ウェブエンジニアのための色の話
- 2. 色とは 網膜の {L, M, S}錐体 への光の刺激によって知覚されるもの 光の波長に反応する錐体があり、それによって色を知覚する 色覚異常は錐体の感度の個体差 400 Violet Blue Cyan Green 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...などと呼ばれる
- 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% で黒になる
- 17. 参考書籍