HEX・RGB・HSL変換ツール

このツールでできること

変換ツールは、一般的な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に展開されます。