RGBと16進コード

赤、緑、青にそれぞれ256段階があると、画面は256×256×256＝1677万7216色を指定でき、そのどれもが立方体の中の1点です。

3Dモデルを読み込み中

ドラッグで回転、スクロールまたはピンチで拡大・縮小。

ドラッグして立体を回します。RGB表示では小さな立方体を、HSL表示では色のついた円盤か立てた断面をクリックして、その色を選びます。モデルの下のパネルには、カラーコード（16進コード）、HSLの値、調和する色、選んだ背景に対するコントラスト比が示されます。

3つの数、3つの軸

ウェブで使うsRGB色空間では、色は赤、緑、青の3つのチャンネル値で書かれます。ふだんのコードでは、各チャンネルは0から255までの整数で、これは8ビットに収まる範囲です。チャンネルが0なら、その光はオフです。255なら完全にオンです。そのため、rgb(255 0 0)は画面が出せる最も強い赤、rgb(0 0 0)は黒、rgb(255 255 255)は白です。

それぞれが範囲を動く3つの数は、箱をつくります。赤を1つの辺に、緑を別の辺に、青を3つ目の辺に沿って置くと、すべての色が立方体の中に場所をもちます。上のモデルは、その立方体を512個の小さなブロック、各辺に沿って八段階で描いています。黒は1つの角にあります。白は反対側の角にあります。黒の隣の3つの角は、純粋な赤、純粋な緑、純粋な青です。白の隣の3つの角は、シアン、マゼンタ、イエローで、それぞれ2つの完全なチャンネルでできています。ラベルをオンにして、黒から白への辺をたどってみましょう。どの経路も、原色を1つと二次色を1つ通ります。

黒から白への破線は、グレー軸です。その上のすべての点は、rgb(128 128 128)のように、赤、緑、青が等しい色です。この線から遠い色は鮮やかで、近い色は灰色がかっています。これは、次の単元のHSLモデルの背後にある考え方の最初のヒントです。グレー軸からの距離は、そのものがどれだけ色鮮やかかの尺度です。

16進コードを読む

CSSでは、同じ3つの数を、#記号のあとに16進数で書くこともできます。16進数は、数字の0から9と、aからfの文字を使って、16ずつ数えます。aは10、fは15です。2桁の16進数は16×16＝256通りの値で、ちょうど1つのチャンネル分です。そのため、6桁のコードは3つの組です。赤、緑、青です。CSS Color 4は、文字の大文字小文字は関係ないと述べているので、#00ff00と#00FF00は同じ色です。

コード#2273c3を3つのチャンネルに分けたところ。各組の最初の桁は16の個数を、2番目の桁は1の個数を数えます。

1組を読むには、最初の桁に16を掛けて、2番目の桁を足します。c3なら12×16＋3＝195です。ffなら15×16＋15＝255で、最大です。80なら8×16＝128で、ほぼちょうど真ん中です。#f80のような3桁のコードは省略形で、各桁を2回ずつ重ねた形で、#f80は#ff8800を意味します。モデルの下の「コード」ボックスにコードを入力すると、マーカーが立方体のその点へ移ります。

背景3枚のフィルターをかけた画像から任意の色をつくる考え方は、1861年に公開で示されました。ロンドンの王立研究所での講演で、ジェームズ・クラーク・マクスウェルは、タータンのリボンの写真を披露しました。写真家のトーマス・サットンが、赤、緑、青のフィルターを通して3回撮ったものです。各画像は、撮ったときと同じフィルターを通して投影され、3つの投影がスクリーン上で重ねられました。乾板は完璧にはほど遠いものでしたが、3つのフィルターを通したチャンネルという方法は、今もすべてのデジタルカメラと画面が使っているものです。

色	rgb()	コード
黒	rgb(0 0 0)	#000000
白	rgb(255 255 255)	#ffffff
赤	rgb(255 0 0)	#ff0000
黄色	rgb(255 255 0)	#ffff00
シアン	rgb(0 255 255)	#00ffff
中間のグレー	rgb(128 128 128)	#808080

#ff0000	赤、rgb(255 0 0)
#00ffff	シアン、rgb(0 255 255)
#ff00ff	マゼンタ、rgb(255 0 255)
#ffff00	イエロー、rgb(255 255 0)
#808080	中間のグレー、rgb(128 128 128)
#000	黒、#000000の省略形

ポイント

sRGBの色は3つのチャンネルで、それぞれ0から255。
RGBの立方体では、黒と白が反対側の角にあり、その間にグレー軸がある。
16進コードは、16進の数字をペアにした3つの組：赤、緑、青。
256³＝1677万7216色。

8ビットの1チャンネルは、何通りの値をとれますか。
8ビットのRGBは、何色を指定できますか。
16進の組c3は、10進数でいくつですか。
#a8581bの赤チャンネルは、10進数でいくつですか。
白を6桁の16進コードで書いてください。
#00ffffはどの色ですか。
- シアン
- 黄色
- マゼンタ
- 青
短いコード#f80は何を意味しますか。
- #ff8800
- #f80000
- #0f0800
- #f8f8f8
RGBの立方体で、黒の反対側の角はどれですか。
- 白
- 赤
- 青
- グレー
次のうち、立方体のグレー軸の上にあるのはどれですか。
- rgb(90 90 90)
- rgb(90 0 90)
- rgb(255 90 90)
- rgb(0 0 90)
CSSで、#00ff00と#00FF00は同じ色ですか。
- はい
- いいえ
- 一部のブラウザでだけ
- 印刷でだけ
マクスウェルが3枚のフィルターによるカラー写真を示したのは何年ですか。

このコースの出典 (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