HEX ⇔ RGB ⇔ HSL

カラーコードを変換する手順

1. 手元の値を入力する。HEX・RGB・HSLのうち、持っている形式の欄に入力または貼り付けます。
2. 他の形式を確認する。残りの欄が自動で変換され、上のプレビューにも色が表示されるので、意図した色かどうかを目で確かめられます。
3. 必要なら微調整する。どの欄も編集できます。RGBの1チャンネルやHSLの数値を少し動かすと、他の形式もそれに合わせて変わります。
4. 必要な形式をコピーする。使いたい表記の値をそのまま持っていってください。

このツールでできること

カラーコードは形式を行き来する機会が多いものです。デザイナーから受け取ったのはHEX、CSS変数ではRGBの数値が欲しい、JavaScriptのライブラリはHSLを求めてくる、といった具合です。このツールは3つのうちどれか1つを入力すれば残りの2つがすぐ手に入るので、計算したり変換表を探したりする必要がありません。

まだ値が決まっておらず、見ながら色を選びたい場合はカラーピッカーのほうが向いています。このツールは、すでにコードが手元にある場合のためのものです。

往復すると値が少しずれる理由

HEXとRGBは同じ表し方をしています。どちらも赤・緑・青の3つを0〜255で表しているだけなので、この2つの相互変換は完全に元通りです。一方HSLは違います。色を色相・彩度・明度という別の見方に置き換えたうえで、実用上の扱いやすさのために整数に丸めています。

そのため、往復させると必ずしも元の値に戻りません。HEXをHSLに変換して、またHEXに戻すと、1つ2つずれた値になることがあります。見た目では区別できない差ですが、値をプログラムで比較しているときや、「元のコードと違う」と気づいたときに知っていると混乱せずに済みます。正確さが必要な場面ではHEXかRGBを基準の値として持っておき、HSLは明度を調整したり濃淡を作ったりする作業用の形式として使うのがおすすめです。

よくある質問