デジタルの混色と透明度をやさしく解説

デジタルの混色は発光する光の値を組み合わせるもので、絵の具を混ぜるのとは仕組みが異なります。単純な sRGB のブレンドでは、2 つの端点の間で赤・緑・青のチャンネルを補間します。

50% の混合では、コーラル #FF7F50 とティール #008080 が同じだけ寄与します。この組み合わせをオンラインカラーミキサーで試し、5 段階と 10 段階の遷移を比べてみましょう。

グラデーションの中間色を作る、グラフ用のカラーランプを作る、ブランドのアクセントをやわらげる、成功と警告の状態の間の遷移を作る、といった「2 色を混ぜる」作業に役立ちます。

アルファが変えるもの

アルファは完全な透明から完全な不透明までの「覆う度合い」を表します。最終的に見える色は背景にも左右されます。

.veil {
  background: rgb(255 127 80 / 50%);
}

この宣言は白の上では明るく、黒の上では暗く見えます。透明度計算ツールでは、エンコードされた透明な値と合成後の結果の両方を確認できます。

8 桁 HEX では最後の 2 桁にアルファが入ります。たとえば #FF7F5080 は約 50% のコーラルです。RGBA や HSLA は同じことをより明示的に表します。

HEX アルファの目安：1A は約 10%、40 は約 25%、80 は約 50%、BF は約 75%、FF は完全な不透明です。正確な値が必要なときは計算ツールを使いましょう。

目的をもって段階スケールを作る

生成したスケールは出発点であり、それだけで完成したデザインシステムになるわけではありません。各段階でコントラストを確認し、隣り合う値が区別できることを確かめ、見た目の均一さが重要な場合は OKLCH のような知覚的な補間も検討しましょう。sRGB での補間は、一般的なブラウザやグラフィックスのワークフローと揃えたいときに今でも役立ちます。

各出力の表記については、HEX・RGB・HSL の違いを読んでみてください。