パーツ番号 07-04-12 ・ CSSのみ

配色理論スキーム見本(補色・類似色・トライアド)

色相環の関係に基づく3種の配色パターンをスウォッチで並べた見本です。WordPressサイトの配色を理論立てて決めたいときの参考資料になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-12-wrap">
          <div class="d07-04-12-set">
            <span class="d07-04-12-tag">補色</span>
            <div class="d07-04-12-sw"><i style="background:#2563eb"></i><i style="background:#eb8f25"></i></div>
          </div>
          <div class="d07-04-12-set">
            <span class="d07-04-12-tag">類似色</span>
            <div class="d07-04-12-sw"><i style="background:#2563eb"></i><i style="background:#2596eb"></i><i style="background:#25c1eb"></i></div>
          </div>
          <div class="d07-04-12-set">
            <span class="d07-04-12-tag">トライアド</span>
            <div class="d07-04-12-sw"><i style="background:#2563eb"></i><i style="background:#eb2568"></i><i style="background:#68eb25"></i></div>
          </div>
        </div>

CSS

.d07-04-12-wrap{display:flex;flex-direction:column;gap:14px;width:230px}
        .d07-04-12-set{display:flex;align-items:center;gap:12px}
        .d07-04-12-tag{width:64px;font-size:11px;color:#64748b;font-weight:700;flex:none}
        .d07-04-12-sw{display:flex;gap:6px}
        .d07-04-12-sw i{display:inline-block;width:28px;height:28px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

クラス名 .d07-04-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。