# HEX / RGB / HSL 変換

> 無料の色変換ツール。HEX・RGB・HSL形式を入力検証付きで相互変換します。いずれか1つの形式を入力すると、残り2つがすぐに表示されます。

色をHEX・RGB・HSLのいずれかの形式で入力すると、残り2つの形式がすぐに表示されます。入力はすべて検証されるため、タイプミスでは間違った色ではなく明確なエラーが表示されます。

*Interactive tool: enter your values at https://toollantern.win/ja/iro-hyougen-henkan/ and results update instantly in your browser.*

## このツールでできること

変換ツールは、一般的な3つの形式のいずれかで色を受け付け、3つすべてを表示します。HEX欄を変更するとRGB欄とHSL欄が更新され、RGBチャンネルを変更すると残りも連動します。ライブプレビューで結果の色を確認できます。

## 変換の公式

**HEXからRGBへ：**16進数の2桁ペアが1チャンネルです。#3B82F6なら赤が0x3B＝59、緑が0x82＝130、青が0xF6＝246です。

**RGBからHSLへ：**R・G・Bを0〜1に正規化し、明度L＝（最大値＋最小値）÷2とします。彩度はチャンネルのばらつきを表し、S＝d÷（1−|2L−1|）、ただしd＝最大値−最小値です。色相は色相環上の角度で、0度が赤、120度が緑、240度が青となり、最大のチャンネルから計算されます。

**HSLからRGBへ：**逆向きの変換です。彩度と明度から求めたクロマ（色の鮮やかさ）を使い、色相角を3つのチャンネルに戻す補助関数で計算します。

## 計算例

**#E74C3C**は**rgb(231, 76, 60)**、**hsl(6, 78%, 57%)**に変換されます。彩度が高く明度が中程度の赤オレンジです。

## 入力検証

HEXは3桁または6桁の16進数、RGBチャンネルは0〜255の整数、色相は0〜360、彩度・明度は0〜100でなければなりません。それ以外はエラーメッセージが表示され、最後の有効な色が保持されます。

## 注意点

変換では整数に丸められるため、往復変換でチャンネルが1ずれることがあります。この差は目には見えません。

## よくある質問
### HEXからRGBに変換するには？

HEX欄に16進コードを入力してください。RGBチャンネルがすぐに表示されます。16進数の2桁ペアが0〜255の1チャンネルになります。

### RGBからHSLに変換するには？

3つのRGBチャンネル値を入力してください。標準の公式で色相・彩度・明度が計算され、すぐに表示されます。

### 無効な色のエラーとは何ですか？

入力が形式に合っていないことを意味します。たとえば不正な文字を含む16進コード、255を超えるRGBチャンネル、360を超える色相などです。値を修正すれば変換が再開します。

### 2回変換したら色が1ずれたのはなぜですか？

各形式は整数で保存するため、小数部分が丸められます。往復変換でチャンネルが1動くことがありますが、視覚的な差は感じられません。

### 3桁の16進コードに対応していますか？

はい。#F00のようなコードはブラウザと同様に自動で#FF0000に展開されます。

---
Interactive version: https://toollantern.win/ja/iro-hyougen-henkan/