Figma・Adobe XDからカラーパレットを抽出してCSSに落とす手順
デザイナーから受け取ったFigmaファイル・Adobe XDファイルの色を、実装側でどう取り出して、どうCSSに落とすか。ブランドカラーが10色〜20色あるサイトで毎回直接HEXをコピペしているとミスが出るので、抽出→変換→CSS変数化の流れを整えると安心です。
1. Figmaの「スタイル」と「ローカル変数」から取る
Figmaでは塗りを「Style」として登録すると、右側のDesignパネルに色名（Primary/600 等）とHEX値が表示されます。2024年以降のFigmaでは「Variables」機能でモード（Light/Dark）ごとに値を分けて持てるので、ライト時とダーク時のHEXをまとめて取り出せます。デザインファイル右上のメニューから「Export Variables」を選ぶとJSON形式で全パレットを書き出せ、JSONを開けば各色のHEXが一覧で並びます。
2. Adobe XDの「アセットパネル」を活用
Adobe XDで開発引き渡しモード(Design Specs)を共有してもらうと、ブラウザ上で各オブジェクトをクリックするだけでHEX値がコピーできます。アセットパネルにColorとして登録された色は名前付きで管理されているので、デザイナーに「すべての色をアセット登録してください」と一度頼んでおくと、後工程の取り回しが圧倒的に楽になります。CSSコードヒント機能で「Show as CSS」を選べばbackground-color値がそのまま出てきます。
3. スクショから色を拾うときの注意
デザイナーから「この資料のこの色で」とPNGだけ渡されることもあります。macOSなら標準の「Digital Color Meter」、Windowsなら「PowerToys」のColorPickerで画面上の任意の点のHEXを取得できます。ただしスクショは元のsRGBから圧縮・再エンコードされている場合があり、ピクセル単位で1〜2の差が出ます。ブランドカラーが厳密に決まっているなら、必ずデザイナーに「正規のHEX値」を確認してください。
4. HEXをCSS変数とHSLに展開
抽出したHEXをそのままbackground-colorに書いても動きますが、デザインシステムを長く運用するなら一度CSS変数に切り出します。例えばbrand HEXを #2563eb として、本ツールでHSLに変換するとhsl(221, 83%, 53%)が得られます。これを :root に --brand-h: 221; --brand-s: 83%; --brand-l: 53%; と分解して保持しておくと、ホバー時にhsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 10%))のように明度だけ調整する書き方ができます。
5. 3形式の使い分け
デザイナーとの会話で出てくる色名はHEXで管理（短くて間違えにくい）、CSS変数で扱うときはHSL（明度を独立に動かせる）、半透明のオーバーレイはRGB（rgb(0 0 0 / 0.5)で書きやすい）と、形式を使い分けると実装が綺麗になります。本ツールに貼り付けるだけで3形式が同時に得られるので、この使い分けがスムーズに進みます。
6. パレット全体をJSONで管理する
抽出した10〜20色を「colors.json」のような1ファイルにまとめておくと、デザイナーが色を更新した際の差分管理が一目で済みます。各色のキーにHEX/RGB/HSLの3形式を持たせ、PR(プルリク)レビューで誰でも変更点を追えるようにすると、ブランドカラーの「いつの間にか変わってる問題」が起きにくくなります。Webサイトのカラーコード変換ツールを使えば、3形式の同時生成も手間がかかりません。