光・受容・境界 #color_study
140 Views
August 24, 26
スライド概要
https://web-study.connpass.com/event/403483/ で色の基礎について話しました
関連スライド
各ページのテキスト
光・受容・境界 2026-08-24 #color_study araya | https://araya.dev | x.com/arayaryoma @arayaryoma | araya.dev
背景の四角は何色？ #FFFFFF @arayaryoma | araya.dev
背景の四角は何色？ #FF0000 @arayaryoma | araya.dev
背景の四角は何色？ #FF8888 @arayaryoma | araya.dev
背景の四角は何色？ #FFEFEF @arayaryoma | araya.dev
どこまでが赤？どこからが白？ #FF0000 #FFFFFF linear gradient 赤とはなんなのか なぜ #FF0000 は赤で、#FFFFFF は白なのか 「R,G,BなんだからFF0000は赤でしょ」ではなぜRGBなのか > - @arayaryoma | araya.dev
色を指定する規格の一例 JIS安全色 JIS Z 9103:2018「図記号―安全色及び安全標識―安全色の色度座標の範囲及び測定方法」 • JISには標識などで用いる”安全色”の規格があり 「赤」「黄赤」「黄」「緑」「青」「赤紫」の6色について定めている • 安全色: 安全を図るための意味を備えた特別の属性をもつ色 @arayaryoma | araya.dev
色を指定する規格の一例 JIS安全色 JIS Z 9103:2018「図記号―安全色及び安全標識―安全色の色度座標の範囲及び測定方法」 JIS Z 9103:2018 が一般材料について定める、安全色6色と対比色2色の色度座標の範囲 @arayaryoma | araya.dev
色を指定する規格の一例 JIS安全色 JIS Z 9103:2018「図記号―安全色及び安全標識―安全色の色度座標の範囲及び測定方法」 このよく見る 蹄の形の図、何？ JIS Z 9103:2018 が一般材料について定める、安全色6色と対比色2色の色度座標の範囲 @arayaryoma | araya.dev
色とは何か • “光線には色がついていない” - Newton 『光学』(1704) • たしかにその通りで、光そのものに色があるのではなく、ヒトが光の刺激を 受け取り色として認識していることが分かっている @arayaryoma | araya.dev
光の性質 • 光には波としての性質と粒子としての性質がある • 光の性質についてはもっと物理学で専門的な論があるとは思いますがここ ではそういうことで了解してください • ここでは波としての性質を基本的に扱います @arayaryoma | araya.dev
光の性質 光は波でもある • 波ということは波長がある • ヒトが感知可能な光の波長には範囲があり、一般にこの範囲を「可視光」と 呼ぶ。範囲外も含めて「電磁波」と呼ぶこともある。 Tatoute and Phrood~commonswiki , CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=504689 @arayaryoma | araya.dev
光の性質 光は波でもある • ヒトの可視光は個人差はあるが大体400[nm]~700[nm] • (短い順から, だいたい) γ線 -> X線 -> 紫外線 -> 可視光線 -> 赤外線 -> 電波 -> マイクロ波 Tatoute and Phrood~commonswiki , CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=504689 @arayaryoma | araya.dev
光の性質 光は波でもある • 短波長の可視光は青く、長波長の可視光は赤く見える Tatoute and Phrood~commonswiki , CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=504689 @arayaryoma | araya.dev
光の性質 波長とエネルギー • 光を粒子として考えるとき、光の粒子を光子と呼ぶ • 光子はエネルギーを持ち、そのエネルギーは波長と反比例する • 紫外線で皮膚が損傷する(日焼け)はこのせい @arayaryoma | araya.dev
ヒトが光をどう受け取るか • 目に入射した光は網膜で化学反応を起こ し、神経から脳に伝わり視感覚となる • 網膜の中に錐状体(錐体細胞, cone)と桿状 体(桿体細胞, rod) の2種の感光性をもつ細胞がある By OpenStax College - Anatomy & Physiology, Connexions Web site. https://cnx.org/content/col11496/1.6/, Jun 19, 2013., CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=30148002 @arayaryoma | araya.dev
ヒトが光をどう受け取るか 錐状体と桿状体 • 錐状体: 明るい所で色を知覚 • 中心に集中 • 桿状体: 明暗のみを知覚 • 中心部以外に広く分布 • 外側の視野の色がわかりにくく、星を見る ときには逆に中心以外の方が見やすいのは このため By Cmglee - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=29924570 @arayaryoma | araya.dev
ヒトが光をどう受け取るか 錐状体 • 波長特性を持つ3種がある • L(Long)錐体, M(Medium)錐体, S(Short)錐体 • 560[nm], 540[nm], 440[nm] 付近に感度のピーク • 数の比率は L > M >>> S(2%程度) • LとMの比率(差)は個人差が非常に大きい Vanessaezekowitz at en.wikipedia, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=10514373 • かつてはR,G,B錐体と呼ばれていたが、ピークが必ず しもR,G,Bと一致しないため、L,M,Sが使われるように なった • Tatoute and Phrood~commonswiki , CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=504689 1802年にYoungにより三原色説が、1878年にHeringにより反対色説(四色説)が提案 -> 1964年にBrownとWaldが 顕微分光測定法により測定結果を公表 @arayaryoma | araya.dev
色覚型 各錐状体を持つ量による個人差 • C型: 一般的な錐体を3種持つ人で日本人男性 の約95%，女性の99%以上 • P型(強度): L錐体がなかったり機能していない • D型(強度): M錐体がなかったり機能していない Vanessaezekowitz at en.wikipedia, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=10514373 Tatoute and Phrood~commonswiki , CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=504689 @arayaryoma | araya.dev
三刺激？RGB? • 波長に特性を持つL,M,S錐体がR,G,Bに完全に対応するわけではないので、 「三原色」がR,G,Bになったのは工学上の歴史や互換性の都合 • 3 という刺激の数だけが生理的に決まっていて、原色の位置は自由変数 • それぞれの錐状体の応答量を等しくする3種の色光があればよい • R,G,Bを適当な割合で混ぜれば任意の色の光を合成できることは顕微分 光測定法以前に実験的に確かめられた => R,G,B を基本とした体系に @arayaryoma | araya.dev
表色系(Color System) 色を定量的に表すための定義と体系 • 混色系: 実験で求めた色光の混合量に基づく • RGB表色系 • XYZ表色系 • L*a*b*表色系 など • 顕色系: 物体標準の色の見え方に基づく • マンセル表色系 など @arayaryoma | araya.dev
マンセル表色系 画家が発案した、顕色系 • 色相(Hue) • R,Y,G,B,P(5色相)とその中間色(10色相)を更に10分割 して100色相を設定 • 明度(Value) • 黒を0,白を10として、無彩色の知覚的な明るさが等間隔にな るように明度(Lightness)を尺度化 • 彩度(Chroma) • 無彩色を0として、中心からの距離を設定 マンセル表色系を3次元プロットしたもの(色立体) File:Munsell 1943 color solid cylindrical coordinates.png: SharkDderivative work: Datumizer Munsell 1943 color solid cylindrical coordinates.png:, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=86105969 • 色相や明度で最大値が異なる • Munsellが1905年に発案したものをアメリカ光学会が修正した修正マンセル表色系を指すことが一般的 @arayaryoma | araya.dev
混色系 加法混色 • [R], [G], [B] を適当な割合で混合すると任意の色の光を合成できる • 色光[F1], [F2]が等色のとき、比例則と加法則が成り立つ (グラスマンの法則) • a[F1] = a[F2] • [F1]+[F3] = [F2] + [F4] ([F1]=[F2], [F3]=[F4]) • これをもとに原刺激の混合量(係数)を波長の関数として求めたものを等色関数 • インクやフィルターなど、光を吸収する媒質による混色は減法混色 • 減法混色についてはここでは扱わないです。物体の色は反射と吸光によって決まるので、青い物体は「青以外の波長の光を吸収する物体」といえます @arayaryoma | araya.dev
RGB表色系 加法混色における工学的な標準化の取り組み • CIE(国際照明委員会) が、計17人の観測者による 実験データを元に、1931年に原刺激の波長とそ れぞれの明度係数を策定 • R,G,Bを同等混ぜたら白色光になるよね、とい う前提と、実験による係数決めが必要 • これが決まると等色関数が定義できる CIE1931 RGB等色関数 @arayaryoma | araya.dev
RGB表色系 加法混色における工学的な標準化の取り組み • CIE1931 RGBには混合量として負の値が現れてし まった • 単色光刺激FをR,G,Bで混合しようとすると、単色 光は彩度が高いため、FにRを混ぜて彩度を落とさ ないと等色にならない • F+R = G+B -> F = G+B-R CIE1931 RGB等色関数 • 電子計算機のない時代に負の値が現れるというの は非常に厄介 @arayaryoma | araya.dev
XYZ表色系 負の値をなくす • 負の値が発生しないように原刺激を変える • Y: 輝度, Z: ほぼ青成分, X: RGBの混合 • もととなった実験は2°という狭い視野での XYZ表色系の等色関数 User:Acdx, CC BY-SA 4.0 https://commons.wikimedia.org/w/index.php?curid=6233111 評価結果だったため、10°視野での実験を 元にさらに改良 (CIE 1964表色系, X Y Z 表色系) 10 10 10 RGB -> XYZへの変換 @arayaryoma | araya.dev
Xy色度図 • X,Y,Zを座標軸とする3次元空間で、色光 を点(X,Y,Z)として表す。 • 単位平面X+Y+Z=1で正規化すると 引用元: 第29回 色の客観的な表現と伝達 （その３）｜CCS：シーシーエス株式会社 https://www.ccs-inc.co.jp/guide/column/light_color/vol29.html x = X/(X+Y+Z) y = Y/(X+Y+Z) z= Z/(X+Y+Z) x+y+z=1 であるから、x,yの座標だけで色 度(色相・彩度)を表現できる xy色度図 @arayaryoma | araya.dev
色を指定する規格の一例 JIS安全色 JIS Z 9103:2018「図記号―安全色及び安全標識―安全色の色度座標の範囲及び測定方法」 工学的に、仮説と実験を 元に原刺激を定め、混色 を計算しやすいよう改良 し、概念的にも分かりや すいよう平面上に座標化 したもの このよく見る 蹄の形の図、何？ JIS Z 9103:2018 が一般材料について定める、安全色6色と対比色2色の色度座標の範囲 @arayaryoma | araya.dev
色空間(Color Space) 現代のディスプレイで一般的に用いられる色域 • Xy色度図上で表現できる色域を定義するために、さまざまな色空間が規 格化され、それを再現できるディスプレイやプロジェクターが開発され ている • sRGB • AdobeRGB • Display P3 • 最近のハイエンドモニターとかスマホはだいたいこれ基準 • Rec. 2020 (ITU-R Recommendation BT.2020) • CESで100%を謳うものが発表されていたり、Panasonicが2026年に 85%カバーするプロジェクターを出すらしい @arayaryoma | araya.dev
色空間(Color Space) 現代のディスプレイで一般的に用いられる色域 • 現代において一般的なカラーディスプレイは RGBの各チャンネルを8bitで表現 • 256 * 256 * 256 = 16,777,216色 • 人間の知覚限界的に、一般の実用的にはこ れで十分 • 各チャンネル10bitや16bitの機器もある • #FF0000 <- sRGBの色域でRだけを最大値 @arayaryoma | araya.dev
白ってなん色？ 200色もある？200色しかない？ • 発言者の意図は、おそらく、「色相があっ ても一定の彩度までは白と言ってもいいの ではないか」という問題提起 • JIS Z 9103:2018が定める”白”の色域をRGB 各チャンネル8bitのsRGBディスプレイで表 現しようとすると27,851色になる JIS Z 9103:2018 が一般材料について定める、安全色6色と対比色2色の色度座標の範囲 @arayaryoma | araya.dev
均等色空間 知覚的な感覚に合う色空間 • 色差: 知覚的な相違を定量的に表したもの • xy色度図上の距離の距離は色差とかなり異なる • 色度図上同じ距離なのに、見分けられたり見分け られなかったりするのは扱いづらい • 色差と空間上の距離が一致する、均等色空間が策定さ れる • 系譜としてはマンセル表色系からの流れも組んでいる • L*a*b*に至るまでの重要な色空間の発明があるが、現代のWeb開発ではL*a*b*だけ知っていればいいの で割愛… @arayaryoma | araya.dev
CIE 1976 (L*, a*, b*) • 知覚可能な色をすべて表現できる色空間であり色差と座標上の距 離の差が出にくいため、色差を測るような研究では主に使われる • 色差の計算 • XYZから変換可能 CIE 1976 (L*, a*, b*) 色空間 (CIELAB) を上から見た図 Holger kkk Everding , CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=38366968 • L* = 0 は黒、L* = 100 は白の拡散色 • a*: 負の値は緑寄りで、正の値はマゼンタ寄り CIE 1976 (L*, a*, b*) 色空間 (CIELAB) を正面から見た図 • b*: 負の値は青寄り、正の値は黄色寄り Holger Everding, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=38366969 @arayaryoma | araya.dev
CIE L*C*h L*a*b*の発展型 • L*a*b*のa*とb*を直交座標から極座標にし たもの CIE 1976 (L*, a*, b*) 色空間 (CIELAB) を上から見た図 Holger kkk Everding , CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=38366968 • 表現可能な空間はL*a*b*と変わらないが、 色相と彩度で選択するほうが直感的で理解 しやすい LabとLChの座標対応 By Der freieFarbe e.V. http://www.freiefarbe.de/wp-content/uploads/2019/01/HLC-Colour-Atlas-XL_Set_DE_v1-2.zip, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=125916550 @arayaryoma | araya.dev
Oklab, Oklch OkなL*a*b*, OkなL*C*h • L*a*b*とL*C*hは実用上使いにくかった • #00FFFF -> #FFFFFF でグラデーションをかけると色相がずれる • 観察条件など不要なパラメータがあり計算上不要な要素があった • 高速にでき、色相の変化が自然なOklab, OklchがWebには向いていた @arayaryoma | araya.dev
光が発せられている環境によって 見る人によって 見え方も名前も変わってしまう @arayaryoma | araya.dev
色は、連続的な数値である波長を持つ光を生物の視細胞が受容しその刺激を脳に伝え、 それを理論として体系化するためにプロットし範囲を決める(境界)営みによって決定づけられる @arayaryoma | araya.dev
光・受容・境界 2026-08-24 #color_study araya | https://araya.dev | x.com/arayaryoma @arayaryoma | araya.dev
参考図書 • 太田登『色彩工学 第2版』2001, 東京電機大学出版局 • 千々岩英彰 『色彩学概説』 2001, 東京大学出版会 • 大山正 , 齋藤美穂 『色彩学入門 色と感性の心理』2009, 東京大学出版会 @arayaryoma | araya.dev