Webデザインで色を選び・変換する方法

なぜ重要か

デザイナーが#5B2A6Fを渡し、それをCSS変数へ。2週後QAがWCAG AAでCTAが淡い背景に失敗と報告。修正は明度バンプのHSL—目分量では4.5:1を越えたか分からない。数値モデルとコントラストスコアが並ぶツールが「見た目は良い」と「監査合格」のギャップを埋めます。

実際の3つのシーン

手順

カラーエディターを開きます。

1. 1

   色を選ぶか貼る

   パレットクリックまたは#5B2A6F、rgb(91 42 111)、hsl(280 45% 30%)、oklch(35.5% 0.12 304)など。

2. 2

   全モデルを読む

   HEX、RGB、HSL、HSV、OKLCH。どれか編集すると他も同期します。

3. 3

   コントラストペア

   「背景」スロットへ2色目。比率表示とWCAG AA／AAAバッジ。

4. 4

   バリアント生成

   OKLCHピッカーで色相・クロマ固定のまま明度だけステップ—トークン導出に最適です。

5. 5

   エクスポート

   CSS、Sass、JSON、デザイントークン形式でコピー。

#5B2A6F

RGB:   rgb(91, 42, 111)
HSL:   hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)

実践テクノ

• **デザイントークンはOKLCH。**HSLの明度10%はステップによって知覚差がぶれる—OKLCHの方が明るさ変更が安定します。
• **印刷一致は校正ディスプレイ前提。**無校正モニタでのPantone／CMYK合わせは限界があります。
• ダークモード対はOKLCHで明度反転しつつクロマやや低下で目の疲労を抑えます。
• 設計書にはhexと知覚系の両方を残す—後任が感謝します。

よくある落とし穴

向いていない用途

• 印刷CMSは校正ワークフロー付きAdobe系へ。
• 大量画像の色解析はchroma.js／culoriのスクリプト向きです。
• 色覚シミュレーションはaxeなど専門ツールの方が詳しいです。

FAQ

次のステップ

1. 資産パレット全体は画像コンバーターと照合確認。
2. ロゴ出力はSVG→PNG。
3. 埋め込み用途には画像→Base64。