色彩理論
画面上の色は、どれも3つの数で表せます。このコースでは、RGBの立方体とHSLの円柱を3Dで組み立て、補色やトライアドが色相環のどこにあるかを確かめます。光とインクを混ぜ、文字の読みやすさの基準となるWCAGのコントラスト比も計算します。
このコースについて
1660年代、アイザック・ニュートンは、暗くした部屋で太陽の光をガラスのプリズムに通し始めました。彼は、白い光が色の帯であること、そしてその色は二つ目のプリズムを通してもそれ以上分けられないことを示しました。1704年の『光学』では、その帯を曲げて円にし、縁を音階の比率で七つの部分に分け、中央に白を置きました。この図は最初期の色相環の一つで、このコースにあるすべての色相環は、これを受け継いでいます。画面上のすべての色は三つの数で表され、人間の網膜には、三種類しかない錐体が約 600万個あります。
七つの単元は、色がどう見えるかから始まり、続いて RGB と16進数のコードを学びます。赤・緑・青の各 256 段階で 16,777,216 色になり、そのどれもが立方体の中の一点です。マクスウェルは 1861年に王立研究所で、赤・緑・青のフィルターを通して撮影したタータンのリボンを見せました。この三チャンネルの方法は、いまもすべてのデジタルカメラと画面が使っています。色相、彩度、明度の単元では、黄色と青はどちらも HSL の明度が 50% ですが、黄色は青の約 13 倍の光を反射することに触れます。補色、類似色、トライアド（三色配色）は、色相環の上に配置して見ます。加法混色と減法混色の単元には、1722年ごろのヤコブ・クリストフ・ル・ブロンの『コロリット』が出てきます。スミソニアンは、これを二つの考え方を記録した最初のものとしています。コントラスト比では、白の上の灰色 #767676 は 4.54:1 で WCAG の本文の最低基準を満たし、#777777 は 4.48:1 で満たさないことを示します。最後の単元では、男性の約 8 パーセントに赤緑色覚の特性があることを扱います。3D の実験では、RGB の立方体と HSL の円柱を組み立てます。
はじめる前に
似て見える二つの色が異なる振る舞いをするとき、数値で比べると役立ちます。RGBと十六進数コードから始め、HSL、色の関係、コントラストへ進みます。画面の光とインクを混ぜる違いに注意しましょう。同じ色名でも、混ぜた結果が同じになるとは限りません。
終わったら
RGBと十六進数の色の値を読み、色相、彩度、明度を調整し、補色、類似色、トライアド配色を選べます。光の加法混色とインクの減法混色を区別し、文字のコントラスト比をWCAGの基準と照合できます。フォームのエラーを示すのに色だけでは足りない理由も説明できます。
- 1色はどう見えるか網膜には、3種類の錐体が約600万個あります。これまでに見た色はすべて、この3種類の反応の強さの組み合わせから生まれます。
- 2RGBと16進コード赤、緑、青にそれぞれ256段階があると、画面は256×256×256＝1677万7216色を指定でき、そのどれもが立方体の中の1点です。
- 3色相、彩度、明度HSLでは、黄色も青も明度は50%ですが、WCAGの輝度の式では、黄色は青よりほぼ13倍の光を反射します。
- 4補色、類似色、トライアド画面の色相環では、240度の青の補色は60度の黄色ですが、画家の色相環では、青の向かいにオレンジが来ます。
- 5加法混色と減法混色白い紙の上のシアンのインクは赤い光を吸収するので、シアンとマゼンタを重ねて印刷すると、青だけが残ります。
- 6コントラスト比と読める文字白地のグレー#767676は、コントラスト比が4.54:1で、本文のWCAG最小値に合格します。1段階明るい#777777は4.48:1で不合格です。
- 7デザインで色を使う男性の約8%が赤緑の色覚特性をもち、エラーを赤だけで示すフォームは、その多くを迷わせます。
このコースの出典 (14)
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
- contrast ratio (L1 + 0.05) / (L2 + 0.05)
- range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
- 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
- W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
- OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
- OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
- Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
- The Newton Project (University of Oxford)
- Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
- History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
- LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
- RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
- University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).
確認日: 2026-10-17