2026-05-18 · 読了目安 1 分
デザインハンドオフでの HEX、RGB、HSL
色を一度変換し、CSS、トークン、ドキュメントに一貫した値を貼り付ける。
色CSSデザイン
重要ポイント
- 正規形式を文書化する（デザインでは HEX、実行時デバッグでは RGB が多い）。
- 短縮 HEX の無効値は、静かに間違った色になる一般的な原因。
ハンドオフチェックリスト
デザイナーは HEX を渡す; エンジニアはアクセシビリティコントラストチェックのため RGB 相当を確認。
サポート形式を貼り付け、3つの表現すべてをチケットにコピーする。
よくある質問
トークンはどの形式を使うべきですか？
デザインシステムで正規形式を1つ選び、ツール向けには境界で変換する。
アルファ透明度は使えますか？
このツールは不透明色に焦点; アルファが必要なら rgba()/hsla() を使う。