カラーコード変換ツールは無料ですか？

はい、完全無料で、登録も不要です。

データは安全ですか？

変換はすべてブラウザ内でJavaScriptの計算により行われます。サーバーには何も送信されません。

HEXカラーは、#2E75B6のように「#」で始まる6桁の16進数コードです。2桁ずつが赤・緑・青の各チャンネルの値を00（0）からFF（255）で表します。Web開発やCSSで最も一般的な形式です。

RGB（赤・緑・青）は3原色のチャンネルの強さで色を定義します。HSL（色相・彩度・輝度）はより直感的で、色相で色を選び（0〜360°）、彩度で鮮やかさを、輝度で明るさを調整します。

はい。色見本をクリックするとブラウザ標準のカラーピッカーが開き、好きな色を視覚的に選べます。HEX・RGB・HSLの値は自動で更新されます。

HSLの値は最も近い整数に丸められるため、RGBに戻すと小さな誤差が生じることがあります。精度が必要な作業では、HEXまたはRGBを基準にしてください。

Dev Tools

HEX・RGB・HSLのカラーコードをブラウザ上ですぐに相互変換。無料・登録不要です。

ファイルは保存されませんすぐに完了登録不要

カラーピッカー

HEX

RGB

HSL

1
色を入力または選択
色見本をクリックしてカラーピッカーを使うか、対応する欄にHEX（例：#2E75B6）、RGB（例：46, 117, 182）、HSL（例：211, 60%, 45%）の値を入力します。
2
3つの形式がすぐに表示
入力や色の選択に合わせて、HEX・RGB・HSLの各欄が即座に更新されます。
3
値をコピー
各欄の横にある「コピー」をクリックすると、その色の値がクリップボードにコピーされます。

Webの色は用途に応じてさまざまな形式で表せます。CSSではHEX、RGB、RGBA、HSL、HSLAの表記が使えます。FigmaやSketchなどのデザインツールは、カラーピッカーにHSLを使い、受け渡し用にHEXを書き出すのが一般的です。

HEXは最も短い形式で、CSS・HTML・デザインソフトで広く使えます。3桁の省略形（#abc）は6桁（#aabbcc）に展開されます。RGB（赤・緑・青）は各チャンネルを0〜255で指定し、ディスプレイが光を発する仕組みに対応しています。

HSL（色相・彩度・輝度）は人間にとって最も直感的な形式です。色相は色相環の角度（0°＝赤、120°＝緑、240°＝青）、彩度は色の鮮やかさ（0%＝グレー）、輝度は明るさ（0%＝黒、100%＝白）を表します。色相と彩度を固定して輝度だけを変えると、自然な濃淡のパレットが作れます。