Color Converter

使い方

1. 対応形式で色を入力します。HEX（3/4/6/8 桁、# は省略可）、rgb()、rgba()、hsl()、hsla()。
2. 形式は自動判定され、3 種類の表記が同時に更新されます。
3. プレビューのスウォッチが正確な描画色を示し、カラーピッカーも同期するので逆方向にも使えます。
4. 値の横のコピーボタンで HEX・RGB・HSL のテキストをスタイルシートへ持ち出せます。

よくある用途

• CSS の記述 —— デザインツールの HEX を HSL に変えてカスタムプロパティのスケールを作る。
• 計算済みスタイルの調査 —— devtools の rgba() 文字列を貼り、等価な HEX を読み取る。
• アルファの扱い —— 4 桁・8 桁の HEX も受け付け、アルファを認識した上で不透明の本体色を変換します。
• デザインレビュー —— 2 つの形式が同じ色を指しているかを確認します。

よくある質問

Q: 入力できる形式は？ A: 3・4・6・8 桁の HEX（# は省略可）、カンマまたはスラッシュ区切りの rgb()/rgba()、彩度と明度がパーセントの hsl()/hsla() です。

Q: アルファチャンネルはどうなりますか？ A: アルファ付きの形式も認識しますが、変換結果は不透明な色を表します。アルファ値は引き継がれないため、透過が重要な場合は元の値を確認してください。

Q: HSL の数値が他のツールと少し違うのは？ A: 変換後に整数の度とパーセントへ丸めています。小数を保持するツールとは丸め 1 桁分だけ差が出ますが、視覚上は判別できません。