カラーフォーマット変換
HEX・RGB・HSL・CMYK 間で色を相互変換し、ライブプレビューを表示（デスクトップでプレビュー対応）
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
ヒント：チャンネル文字を左右にドラッグして微調整
プレビュー
使用方法
🚀 クイックスタート
- 選択/入力：#1E90FF、rgb(30,144,255)、hsl(210,100%,56%) など対応形式を入力、またはカラーピッカーを使用
- 自動変換：いずれかの形式を入力すると他の形式が即時に更新
- コピー：各形式のコピーボタンで正規化済み文字列を取得
📌 よくある利用シーン
- デザイン受け渡し：デザインの HEX を CSS の RGB/HSL に変換
- スタイルガイド：コンポーネントの色表記と形式を統一
- 印刷リファレンス：画面色を CMYK に変換して初期見積もり（要プルーフ）
- アクセシビリティ：プレビューでコントラストの第一印象を確認（正確な比率は専用ツールを使用）
🎛️ 変換パラメータと表示
- 入力規則：HEX は 6 桁のみ（Alpha なし）。RGB 0–255、H 0–360、S/L 0–100、CMYK 0–100。入力は大文字・小文字を区別しません
- プレビュー：デスクトップは右側にライブプレビュー、モバイルはプレビュー非表示の軽量モード
- カラーピッカー：各カード右上のパレットボタンで開きます
- HEX の大文字ポリシー：出力は大文字に正規化（例 #1E90FF）、入力は大文字小文字を区別しません。切替はありません
- 微調整：チャネル文字を左右ドラッグ（Shift×10、Alt÷0.1）
- コピー出力：コピーは標準化された文字列（HEX 大文字）を出力
🧭 使い方のヒント
- 精度：デバイス/アプリごとにカラーマネジメントが異なり、スポイト値がわずかに変わることがあります
- アルファ：現行の形式はアルファ非対応。rgba()/hsla() などを使用
- 色空間：Web は sRGB が既定。P3/Display‑P3 では慎重に検証
- チーム内の統一：CSS での正準形式（例：HSL）を取り決める
⚠️ 制限と注意点
- デバイス差：モニター/ブラウザ/OS の色管理の違いにより見え方が異なることがあります
- CMYK は近似：参考値に過ぎず、実印刷では ICC 設定と専用フローが必要
- アルファなし：透過は扱いません
🔒 プライバシーとセキュリティ
- すべての処理はブラウザ内で完結し、データはお使いのデバイスから外部に送信されません
- 永続化なし：ページを閉じると入力/履歴は消去（保存操作を除く）
❓ よくある質問
#RGB の省略記法は対応していますか？
現在は未対応です。6 桁の HEX（#RRGGBB）をご利用ください。
RGB と HSL の範囲は？
RGB は 0–255（整数）。H は 0–360、S/L は 0–100%
CMYK が最終印刷と異なるのはなぜ？
紙/インク/機材/ICC などに依存し、本ツールの値は近似です。印刷物は必ずプルーフで確認してください
アルファ（rgba()/hsla()）は対応していますか？
現時点では非対応です。rgba()/hsla() か、別のアルファ値をお使いください。
プレビューや変換値がアプリ/ブラウザと違うのはなぜ？
カラーマネジメントやレンダリング、画面校正の差異によるものです。本ツールは sRGB 基準で計算しており、参考値です。
広色域（P3/Display‑P3）は対応していますか？
現在は sRGB ベースです。P3 ワークフローでは、対象デバイスと ICC で検証してください。
CMYK から HEX/RGB へ逆変換できますか？
可能ですが、CMYK→画面色は近似です。印刷には ICC とプルーフが必要です。