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

補色、類似色、トライアド

画面の色相環では、240度の青の補色は60度の黄色ですが、画家の色相環では、青の向かいにオレンジが来ます。

3Dモデルを読み込み中

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

メニューから配色を選びます。追加のマーカーは、同じ明度の円盤の上の、対応する色相の角度に置かれ、線で結ばれます。「色相」スライダーを動かすと、図形全体がいっしょに回ります。

配色は角度

デザインの教科書は、バランスよく見えやすい配色をいくつか挙げています。色を色相環に置くと、どの配色も、開始の色相からの角度の組にすぎません。補色は真向かい、180度離れています。類似色は隣り合い、モデルでは両側に30度を使います。トライアド配色は、等間隔に120度離れた三つの色相を使うので、正三角形をつくります。スプリット・コンプリメンタリー配色は、補色を、その両隣の色相に置き換えたもので、ここでは開始から150度と210度です。

30度のオレンジから始まる、12段階の色相環上の四つの配色。赤は一番上で、色相は時計回りに増えます。

LibreTextsのデッサンコースは、各配色の性格を述べています。補色の組は強いコントラストを与えて注意を引くので、デザイナーは目立たせたいものに使います。類似色の配色は穏やかでまとまって見え、牧草地の緑、黄色、オレンジのように、自然によくあります。トライアド配色は活気がありつつ、バランスもとれています。スプリット・コンプリメンタリー配色は、補色の組のコントラストの多くを保ちつつ、扱いやすくなります。デラウェア大学の図書館ガイドは、各色をどれだけ使うかの実用的な目安を加えています。主役の色に約60%、副次の色に30%、アクセントに10%です。

どの色相環か

ここに落とし穴があります。色相環は1つではありません。このコースのHSLの色相環は、赤、緑、青を原色とする光でできています。その上では、0度の赤は180度のシアンの向かいにあり、緑はマゼンタの向かい、青は黄色の向かいです。多くの美術の授業は、赤、黄、青の顔料にもとづく画家の色相環を使います。その環では、赤は緑の向かい、黄は紫の向かい、青はオレンジの向かいで、LibreTextsのコースに挙がっている組です。どちらの環も間違いではありません。答える問いが違います。光の環は、どの2つの光が足されて白になるかを教えます。画家の環は、絵の具を混ぜるための長い伝統です。画面のパレットをつくるときに、コードが使うのはHSLの角度なので、チュートリアルがどちらの環の話をしているかを確かめましょう。

配色が決めるのは色相であって、明度ではありません。彩度が最大で明度50%のトライアドの三つの色相は、派手です。実際には、デザイナーは角度を保って、彩度と明度を変えます。1つの色相は強く、ほかは淡い色か暗い色にします。モデルで試しましょう。トライアドを選び、彩度を下げると、三角形が形を保ったままグレー軸に向かって縮むのがわかります。

ほとんどの教科書には、さらに2つの配色が出てきます。モノクロマティック配色は、1つの色相の、より明るい版と暗い版をいくつか使うもので、RMITの色彩理論のテキストはそれをティントとシェードと呼びます。HSLで言えば、色相は固定されたまま、明度と彩度だけが動くので、モデルでは立てた断面の垂直な線になります。テトラード配色は、色相環上で長方形をつくる四つの色相、つまり補色の組2つを合わせて使います。四つが等間隔の90度なら、正方形になります。四つの色相はバランスをとりにくいので、ほとんどのガイドは、1つに主役を任せ、ほかを少量使うことを勧めます。

補色+180°
類似色−30°と＋30°（隣）
トライアド＋120°と＋240°
スプリット・コンプリメンタリー＋150°と＋210°
光の色相環での青の補色黄色（240°＋180°＝60°）
ポイント
  • 補色：180度離れる。類似色：隣り合う。トライアド：120度離れる。スプリット・コンプリメンタリー：150度と210度。
  • 光（HSL）の環では青は黄色の向かいにあり、画家の環では青はオレンジの向かいにある。
  • 配色が決めるのは色相。彩度と明度は自分で選べる。
  • よくある目安：主役60%、副次30%、アクセント10%。
  1. HSLの色相環で、30°の補色の色相は何ですか。
  2. 300°の補色の色相は何ですか。
  3. トライアド配色は0°から始まります。それを完成させる色相はどれですか。
    • 120°と240°
    • 90°と180°
    • 30°と330°
    • 180°だけ
  4. トライアドの色は、色相環上でどんな形をつくりますか。
    • 正三角形
    • 直線
    • 正方形
    • 直角三角形
  5. 類似色の組はどれですか。
    • 30°と60°
    • 30°と210°
    • 0°と120°
    • 60°と240°
  6. HSL（光）の色相環で、青の向かいにあるのは何ですか。
    • 黄色
    • オレンジ
    • 赤
    • 緑
  7. 伝統的な画家の色相環で、青の向かいにあるのは何ですか。
    • オレンジ
    • 黄色
    • シアン
    • マゼンタ
  8. 補色を、その両隣の色相に置き換える配色はどれですか。
    • スプリット・コンプリメンタリー
    • 類似色
    • トライアド
    • モノクロマティック
  9. 60/30/10のパレットで、アクセントの色は何パーセントですか。
  10. モデルでトライアドの彩度を下げます。三角形はどうなりますか。
    • グレー軸に向かって縮む
    • 回転する
    • 線になる
    • 何も変わらない
このコースの出典 (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