開発者向けカラーモデル

画面上のカラーは光として解釈される数値です。開発者は色を直接「見る」ことは稀で、CSS、SVG、デザイントークン、API payload の値を操作します。

同じ色、多くの文字列

これらは同じ sRGB 色を表せます。

• #2563EB
• rgb(37, 99, 235)
• hsl(221, 83%, 53%)

デザインツール、ブラウザ、スプレッドシートは異なるデフォルト形式を選びます。変換は一度きりのトリックではなく、日常業務です。

チャンネルとガマット

ほとんどの UI 作業は sRGB です。3 チャンネル（赤、緑、青）各 0–255（一部関数では 0–100%）。ワイドガマットディスプレイ（P3）は sRGB hex が名前付けできないより鮮やかな色を表示できます。内部管理パネルよりマーケティングサイトで重要です。

典型的なプロダクト UI では、パイプラインなしでエキゾチックなガマットを追うより sRGB + 一貫したトークン が勝ちます。

知覚 vs 測定

人間は明るさを非線形に判断します。RGB 平均が等しい 2 色でも明るさが異なって見えることがあります。だから HSL と Lab があります。色相/明度を分離してデザイン調整に使います。

開発者は依然 CSS で hex/rgb を出荷します。HSL は「同じ色相でわずかに暗い hover 状態」が必要なときに役立ちます。

不透明度は別チャンネル

Alpha は透明度を制御します。#2563EB は不透明、rgba(37, 99, 235, 0.5) は背後にあるものの上で 50% 不透明の同じ RGB です。

コントラストチェックは白上のスウォッチだけでなく、合成後の実背景色を使う必要があります。

コードに色が現れる場所

• CSS カスタムプロパティ（--color-primary）
• Tailwind/テーマ設定
• チャートライブラリとステータスバッジ
• CSS サポートが限られた PDF/メールテンプレート

要点

カラーを HEX/RGB/HSL の複数ビューを持つ構造化データとして扱います。デザインシステムの真実の源を 1 つ選び、ツールとプラットフォーム向けに変換します。