色変換ツール（HEX、RGB、HSL）
HEX（#RRGGBB）、RGB（0〜255）、HSL（色相、彩度、明度）をリアルタイムで変換します。ピッカーを調整するか値を入力すると全形式が一緒に更新されます。CSS、Figmaの引き渡し、ブランドガイドラインに最適です。
色の変換方法
1. 視覚的に色を選ぶか、HEX、RGB、HSL値を入力します。
2. 対応する全形式の同等値をすぐに確認します。
3. ブランドの色相を保ったまま、ホバー状態用にHSLの明度を調整します。
4. スタックが必要とする形式をコピーします（CSSなら#hex、現代ブラウザならrgb()）。
色変換の例
ブランドブルー #2563EB
RGB rgb(37, 99, 235)、HSL hsl(217, 84%, 53%)。ホバーを暗く: hexを推測せずに hsl(217, 84%, 45%)。
SVG向けにCSSのrgbをHEXへ
rgb(255, 87, 51) → SVGのfillとAndroid XMLの色リソース向けに #FF5733。
ボーダー用のニュートラルグレー
hsl(220, 10%, 90%) → とても薄いクールグレー。色付きUI背景には彩度を少し上げます。
このツールを使うとき
• FigmaのHEXとCSS変数のHSLの間でデザイントークンを翻訳するとき。
• HSLの明度をずらして一貫したライト／ダークテーマを作るとき。
• 開発者とマーケター向けにブランドパレットを文書化するとき。
UI作業のための色彩理論
補色は色相環の反対（180°離れ）——高コントラストなのでCTAには控えめに。類似色相（±30°）はダッシュボードに調和します。ニュートラルなUIクロームは純#EEEより低彩度の青やグレー（hsl 220, 10%, 96%）を使うことが多く、画面によって暖色／寒色に見えにくいです。ブランドパレットはプライマリ色相1つ、ニュートラル2〜3、状態用のセマンティックな緑／赤に絞ります。
よくある質問
HSLは何に向いていますか？
色相を保ったまま明度と彩度を調整すること——例: 1つの色相値から primary、primary-hover、primary-muted。
HEXの短縮形 #RGB は？
#F53 は #FF5533 に展開されます。3桁または6桁のhex（任意の#）を受け付けます。
sRGBとdisplay-P3は？
このツールはWeb CSSの標準であるsRGBを使います。広色域ディスプレイではわずかに違って見えることがあります。
アルファ／透明度は？
8桁HEX（#RRGGBBAA）とrgba()は、ツールがアルファを公開していれば対応することがあります。UIフィールドを確認してください。
RGBの合計がhexでおかしく見えるのはなぜですか？
各チャンネルは0〜255 → 2桁のhexです。255 = FFであり、「255」を連結するのではありません。