カラー選択ワークフロー

モックアップから本番へ色を移すのは、スポットスポイト 1 クリックではなくワークフローです。

ステップ 1：ブランドトークンにアンカー

デザインシステムの primary、neutral、semantic スケールから始めます。スクリーンショット圧縮アーティファクトからランダム hex ではありません。

マーケティングが PNG を渡したら、コーディング前に公式ブランド PDF や Figma ライブラリで色を確認してください。

ステップ 2：慎重にサンプリング

ブラウザのスポイトは1 ピクセルを読みます。JPEG バンディング、サブピクセルアンチエイリアス、Retina スケーリングは嘘をつくことがあります。

フラット塗り領域をサンプリングするか、デザインファイルから直接値を読んでください。ライブサイトをサンプリングするときはズームを無効にし、ライト/ダークモード変種を別々に確認してください。

ステップ 3：すべてのビューを変換して記録

トークンに正規 hex（または OKLCH）を保存し、次を導出：

• canvas/チャート API 向け RGB
• テーマジェネレーター向け HSL
• 背景横のコントラスト安全テキストペアを文書化

コンバーターはデザイナーが「HSL で同じ青」を求めたとき数値を一貫させます。

ステップ 4：コントラストと状態を検証

各インタラクティブコンポーネントで default、hover、focus、disabled ペアを確認します。フォーカスリングは default と hover 塗り両方でコントラストを通過する第 3 色が必要なことが多いです。

「自分のラップトップでは問題ない」だけでなく、失敗した比をレビューチケットに記録してください。

ステップ 5：CSS 変数として出荷

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-on-primary: #ffffff;
}

コンポーネントはモジュールに散在する生 hex ではなく、意味名（--color-on-primary）を参照します。

引き渡しチェックリスト

項目	完了条件
トークン名合意	デザイン + エンジニアが同じ --color-* を使用
コントラスト文書化	テキストペアで AA 達成
ダークモード	別テーブルまたはオーバーライド一覧
非 CSS サーフェス	メール/PDF hex エクスポート

要点

スポイトツールを文書化されたパイプラインの測定器として扱います。サンプル、変換、コントラスト検証、トークン公開。チームが本番で #2563EB を 5 種類の微妙に異なる青にしない方法です。