カラーコード変換

HEX、RGB、HSLのカラーコードをalpha付きも含めて相互変換し、色プレビューを確認・コピーできる無料ツールです。

変換元の色

形式と値を選ぶと、三形式を同時に更新します。

端末内で変換

#は省略可。3・4・6・8桁に対応します。

変換結果

各表記を個別にコピーできます。

変換済み
HEX#336699
RGBrgb(51, 102, 153)
HSLhsl(210, 50%, 40%)

外部接続なし: 入力した色と変換結果を送信・保存しません。

範囲外は変換しません: 値を自動補正せず、修正できる範囲を表示します。

入力内容は外部へ送信されません

カラーコード変換でできること

Webやデザインで使うHEX、RGB、HSLのカラーコードを、一つの色から三形式へ変換します。alpha付きの透明色にも対応し、数値と色プレビューを同時に確認できます。

使い方

  1. 変換元形式からHEX、RGB、HSLのいずれかを選びます。
  2. 各形式の値を入力し、色プレビューと三形式の結果を確認します。
  3. 必要な表記を個別にコピーするか、三形式をテキストでダウンロードします。

HEXとalphaの仕様

HEXは#RGB#RGBA#RRGGBB#RRGGBBAAを受け付け、先頭の#は省略できます。結果は大文字の6桁で表示し、alphaが1未満のときだけ8桁にします。8bitのalphaと0〜1の小数表記を変換するため、表示時に最大3桁へ丸める場合があります。

RGBとHSLの範囲

RGBは各成分を0〜255の整数で扱います。HSLは色相を0〜360、彩度と明度を0〜100の通常10進数で扱い、色相360は0と同じ色です。範囲外の値を端へ自動補正せず、修正方法を表示します。

丸めと色プレビュー

HSLからRGBへ変換するときは、各RGB成分を最も近い8bit整数へ丸めます。RGBから求めたHSLは小数第2位、alphaは小数第3位まで表示し、末尾の0は省きます。透明色は市松模様の上に表示するため、alphaの有無も視覚的に確認できます。

入力データの扱い

入力検査、色変換、プレビュー、コピー、ファイル作成はすべてブラウザ内で行います。入力した色と結果をmonoLetや外部サービスへ送信・保存しません。

仕様確認日: