edubun
日本語
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
ホーム›色とデザイン›色彩理論

色相、彩度、明度

HSLでは、黄色も青も明度は50%ですが、WCAGの輝度の式では、黄色は青よりほぼ13倍の光を反射します。

3Dモデルを読み込み中

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

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

立方体を円柱にする

RGBの数は、画面には扱いやすく、人には扱いにくいものです。「同じ青で、少しだけ明るく」したいとき、3つのチャンネルを、それぞれ違う量で同時に変えなければなりません。HSLは、同じsRGBの色を、人が色について話す方法に合う操作になるよう並べ替えます。CSS Color 4はこれを円柱モデルと説明しています。外側をぐるりと回る色相の角度、黒から白までの明度の中心軸、そして彩度の半径で、彩度は色が無彩色のグレーからどれだけ離れているかを表します。

RGBの立方体が黒い角で立ち、真上に白がある様子を思い描きます。グレー軸は垂直になります。上から見下ろすと、6つの鮮やかな角、赤、黄、緑、シアン、青、マゼンタが、軸の周りに輪をつくります。HSLはその輪を丸くして、立体全体を円柱に引き伸ばします。上のモデルがその結果を示します。選んだ明度での水平な円盤と、選んだ色相とその反対の色相での立てた断面です。どちらの面でも、好きな場所をクリックしてその色を選べます。

色相

色相は度で表す角度です。CSS Color 4が始点を定めています。0degはsRGBの赤、120degは緑、240degは青で、360degで赤に戻ります。原色の中間に二次色があります。60degが黄、180degがシアン、300degがマゼンタです。色相は角度なので、ぐるりと回ります。390degの色相は30degと同じで、どの色相にも180degを足すと、円の真向かいの色になります。

彩度と明度

彩度はパーセントです。100%では、色は円柱の外側にあり、その明度でsRGBが許す限り鮮やかです。0%では中心軸にあり、グレーです。CSS Color 4は、そのとき色相はまったく影響しないと述べているので、hsl(0deg 0% 50%)とhsl(180deg 0% 50%)は同じグレーです。明度もパーセントです。0%はどの色相でも黒、100%はどの色相でも白で、50%はその色相の最も鮮やかな色になります。そのため、hsl(0deg 100% 50%)は#ff0000と同じ赤で、hsl(120deg 100% 25%)は暗い緑、rgb(0 128 0)です。

HSLの明度は同じで、明るさはまったく違う。Yは、WCAGの相対輝度で、黒の0から白の1まで。

HSLが誤解させるところ

HSLは便利ですが、CSS仕様はその限界を率直に述べています。その明度は、目に見える明るさとは別物です。黄色hsl(60deg 100% 50%)と青hsl(240deg 100% 50%)は、同じLの50%ですが、黄色のほうがはるかに明るく見えます。WCAGの輝度の式では、その黄色が0.9278、その青が0.0722で、比はほぼ13倍です。色相の角度さえ均等ではありません。仕様は、青の間の30度の変化は小さく見えるのに、黄色と緑の間の同じ変化は大きく見えると述べています。oklch()のような新しいCSSの色空間は、これを直すために設計されました。文字が読めるかを確かめるには、HSLの明度を信用せず、第6単元で計算するコントラスト比を使いましょう。

0deg 赤、60deg 黄、120deg 緑、180deg シアン、240deg 青、300deg マゼンタ。

ポイント
  • HSLは円柱：色相の角度、彩度の半径、明度の高さ。
  • 0deg 赤、120deg 緑、240deg 青。
  • 彩度0%では色相は影響しない。明度0%は黒、100%は白。
  • HSLの明度は、色の見た目の明るさとは一致しない。
  1. 純粋なsRGBの緑は、HSLで色相の角度はいくつですか。
  2. マゼンタの色相の角度はいくつですか。
  3. hsl(0deg 100% 50%)は何色ですか。
    • #ff0000
    • #000000
    • #ffffff
    • #800000
  4. hsl(200deg 60% 100%)は何色ですか。
    • 白
    • 明るい青
    • 黒
    • グレー
  5. hsl(0deg 0% 50%)とhsl(180deg 0% 50%)は…
    • 同じグレー
    • 赤とシアン
    • 黒と白
    • 違うグレー
  6. HSLの円柱で、中心軸からの距離は何を表しますか。
    • 彩度
    • 色相
    • 明度
    • 輝度
  7. 色相390degは、0から360の間のどの色相と同じですか。
  8. 純粋な黄色#ffff00のWCAG相対輝度はいくつですか。小数第4位まで答えてください。
  9. 黄色も青もHSLの明度は50%です。どちらが明るく見えますか。
    • 黄色
    • 青
    • 同じに見える
    • 色相の角度だけで決まる
  10. hsl(120deg 100% 25%)は何色ですか。
    • rgb(0 128 0)
    • rgb(0 255 0)
    • rgb(128 255 128)
    • rgb(64 64 64)
このコースの出典 (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