カラーコード変換

// カラーコード変換に関するよくある質問

HEX、RGB、HSLの違いは何ですか？

HEXは16進数で色を表現（例 `#FF0000`）、RGBは赤・緑・青の0-255の値で表現（例 `rgb(255,0,0)`）、HSLは色相・彩度・明度で表現（例 `hsl(0,100%,50%)`）します。同じ色を異なる方式で表しているだけで、本ツールでは相互変換できます。視覚的な色合いの調整にはHSL、デザインツールとの連携にはHEX、JSでの動的計算にはRGBが便利です。

CSSでどの形式を使うべきですか？

どの形式でもCSSで使用できます。HEXは簡潔で広く使われ（特にデザインカンプ・ロゴ仕様書との連携に最適）、RGB/RGBAは透明度を指定しやすく、HSLはテーマカラーのバリエーション作成や明度調整が直感的です。CSS Variables（カスタムプロパティ）と組み合わせる現代的なテーマ設計ではHSLが人気です。

透明度（アルファ値）には対応していますか？

はい、RGBA形式（`rgba(255,0,0,0.5)`）と 8桁HEXA形式（`#FF000080`）に対応しています。アルファ値は0〜1の小数値（RGBA）または16進2桁（HEXA、00〜FF）で指定します。本ツールではアルファ値を含むカラーコードを相互変換でき、半透明オーバーレイ・ホバー効果・グラデーション用の色指定に便利です。

デザインツールからコピーしたカラーコードをそのまま使えますか？

はい、HEX（`#付き`/なし両対応）、RGB（`rgb()` 形式・カンマ区切り両方）、HSL（`hsl()` 形式）など、一般的なカラーコードの記法をそのまま入力できます。Figma・Sketch・Adobe XD・Photoshopなどのデザインツールからコピーした値を貼り付けるだけで変換できます。

HEXコードの3桁短縮形（#FFF など）も使えますか？

はい、3桁HEX（`#FFF`）と4桁HEXA（`#FFF8`）にも対応しています。3桁形式は各桁を2回繰り返して6桁HEXと等価に解釈されます（`#FFF` = `#FFFFFF`）。CSSではどちらも有効で、コードを短くしたい場合は3桁形式が使えますが、グラデーションや微妙な色味は表現できないため6桁形式が必要です。

コントラスト比を確認できますか？

本ツールでは表記変換のみ対応しており、コントラスト比の数値計算は現バージョンでは行っていません。WCAG準拠のアクセシビリティチェックには、コントラスト比専用ツールや Chrome DevTools のカラーピッカー内蔵機能を併用してください。本ツールで生成した色を貼り付けて確認するワークフローが便利です。

CMYK 形式には対応していますか？

現バージョンでは画面表示用の HEX/RGB/HSL に特化しているため、印刷用CMYK には対応していません。CMYK が必要な場合は Adobe Photoshop / Illustrator や専用の印刷向けカラー変換ツールを利用してください。RGB → CMYK 変換は色空間（sRGB / Adobe RGB / JapanColor 等）に依存するため、印刷物用途では特定のプロファイル指定が必要です。

HSL の「色相」「彩度」「明度」の違いは？

色相（Hue）は0〜360度の角度で色の種類を表します（0=赤、120=緑、240=青）。彩度（Saturation）は0〜100%で色の鮮やかさ（0%=灰色、100%=純色）を、明度（Lightness）は0〜100%で明るさ（0%=黒、50%=純色、100%=白）を表します。HSLは「赤系統で少し暗めの色」のような感覚的指定が直感的にできます。

16進数HEX値の大文字小文字でCSSは変わりますか？

いいえ、CSSの仕様では `#ff0000` と `#FF0000` は同じ色として扱われます。慣例的には小文字が広く使われますが（GitHub・MDN等のドキュメントも小文字）、好みで統一してください。本ツールでは大文字/小文字を切り替えて表示でき、デザイン仕様書のフォーマットに合わせやすくなっています。

データはサーバーに送信されますか？

いいえ、すべての色変換はブラウザ内のJavaScriptで完結し、入力したカラーコードはサーバーに送信されません。社内デザイン仕様・未公開ロゴカラー・新製品のブランドカラーなど機密性の高い色情報も安全に処理できます。