HEX・RGB・HSL変換ツール｜カラーコードを相互変換

カラーツール

変換する色を入力してください。

このツールでできること

1色をHEX、RGB、HSLのいずれかで入力し、3形式へ相互変換できます。変換結果はCSSで使える表記と色見本で確認でき、HEX、RGB、HSLを個別にコピーできます。透明度は扱いません。

使い方

変換元をHEX、RGB、HSLから選びます。変換元を切り替えると、すべての入力値と変換結果が消去されます。
選んだ形式の各欄へ色の値を入力します。
「変換する」を押すか、入力欄でEnterキーを押します。
色見本と3形式の結果を確認し、必要な形式のコピーボタンを押します。

変換後に入力値を編集すると古い結果は非表示になり、コピーボタンも無効になります。編集後の値で再度変換してください。

入力例・出力例

HEXの#FF0000を変換すると、次の結果になります。

HEX: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)

#を省いた3桁HEXの0CFは、各桁を2回ずつ使う#00CCFFへ展開されます。

HEX: #00CCFF
RGB: rgb(0, 204, 255)
HSL: hsl(192, 100%, 50%)

HSLでHに240、Sに0、Lに50を入力すると、8bit RGBへ丸めてからHSL結果を再計算するため、次の表示になります。

HEX: #808080
RGB: rgb(128, 128, 128)
HSL: hsl(0, 0%, 50.2%)

よくある利用場面

CSSやデザインツール間でHEX・RGB・HSL表記を変換するとき
RGB値からコピー可能なHEXコードを作るとき
HSLの色相・彩度・明度に対応する色見本を確認するとき

8bit RGBを基準にした丸め

このツールは、R、G、Bがそれぞれ0〜255の整数である8bit RGBを変換結果の基準にします。HSLから変換するときは各RGB値を最も近い整数へ丸め、そのRGB値から表示用のHSLを計算し直します。表示するHSLは小数点以下最大2桁で、末尾の0は省きます。

このため、入力したHSLと表示結果が完全には一致しない場合や、表示したHSLを再入力するとRGB値がわずかに変わる場合があります。彩度が0の無彩色は色相を特定できないため、Hは0と表示します。入力時のH=360もH=0と同じ色として扱います。

処理仕様

HEXは先頭の#が任意で、3桁または6桁の16進数を入力できます。3桁は各桁を2回ずつ使って6桁へ展開し、結果は#付きの6桁大文字で表示します。透明度付きの4桁・8桁HEXは入力できません。

RGBはR、G、Bをそれぞれ0〜255の半角整数で入力します。小数、指数表記、符号、全角数字、単位付きの値は入力できません。

HSLはHを0〜360、SとLを0〜100の半角数値で入力し、小数は小数点以下4桁まで指定できます。.5のように整数部分を省いた値、5.のように小数部分を省いた値、指数表記、符号、全角数字、単位付きの値は入力できません。値の途中に空白や改行がある形式も拒否し、範囲外の値を上限や下限へ自動補正しません。

RGBA、HSLA、CSS色名、rgb(...)やhsl(...)の文字列全体、RGBのパーセント表記、CSS Color 4の空白区切り構文、HSV、CMYK、広色域の色空間には対応していません。入力が空、不正形式、範囲外の場合は結果を表示せず、修正が必要な入力欄へフォーカスします。

入力データについて

入力した色の値はお使いのブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部APIや外部ライブラリは使用せず、Cookie、ローカルストレージ、セッションストレージ、IndexedDB、履歴にも保存しません。コピーボタンを押した場合だけ、選んだ変換結果をシステムのクリップボードへ書き込みます。