カラーコード変換ツール｜HEX・RGB・HSL相互変換とカラーピッカー対応の無料ツール

HEX・RGB・HSLのカラーコードをリアルタイムで相互変換できる無料オンラインツール。カラーピッカー対応、CSS直コピー形式で出力、ブラウザだけで動作しデータはサーバーに送信されません。

ブラウザ内処理完全無料登録不要

カラーピッカー

プレビュー

HEX

RGB

HSL

詳細設定

HEX形式

大文字 (#FF0000)小文字 (#ff0000)

このツールについて

使い方・特徴・補足情報

カラーコード変換ツールとは

カラーコード変換ツールは、HEX・RGB・HSL の3形式をその場で相互変換するツールです。1つ入力すると、残り2形式が同時に更新されます。

デザインカンプの HEX を CSS へ書き写したり、HSL に直して明るさを微調整したり。形式の食い違いをワンステップでそろえます。

カラーピッカーも付いているので、コードを知らなくても感覚で色を選べます。結果は rgb(255, 0, 0) のように CSS 直書き形式でコピーできます。

入力した色はすべてブラウザ内で処理し、外部へ送りません。社内のブランドカラーを入れても手元だけで完結します。

👤 こんな人におすすめ✨

Webデザイン・コーディングをする人

✅ 楽になること

HEX・RGB・HSLの相互変換

✍️ 避けたい手間

色コードの書き写しミス

解決できる困りごと

デザインカンプの色と CSS の色が同じかを表記を変えながら確認できる
HEX しか手元にないとき、RGB や HSL に頭の中で換算する負担を減らせる
カラーピッカーで微調整した色を即コード化でき、共有時の伝達ミスを減らせる

使い方

カラーピッカーをクリックして直感的に色を選ぶか、HEXテキスト欄に #FF0000 のような形式で入力します。
入力と同時に、HEX・RGB・HSL の3形式が自動で更新されます（ボタンを押す必要はありません）。
RGB欄では R / G / B を、HSL欄では H（色相）/ S（彩度）/ L（明度）を個別に入力できます。
各形式の右側にある「コピー」ボタンをクリックすると、CSS直書き用の形式がクリップボードにコピーされます。
詳細設定を開くと、HEXの出力形式を大文字（#FF0000）と小文字（#ff0000）で切り替えられます。

使用例

HEX→RGB→HSL の一括変換

ブランドカラーのHEXコードを各形式に同時変換する例です。コピペするだけで CSS で使う3形式が並びます。

入力

#3b82f6

出力

HEX:  #3b82f6
RGB:  rgb(59, 130, 246)
HSL:  hsl(217, 91%, 60%)

アルファ付き RGBA → 他形式

半透明色を含む RGBA を入力し、対応する HSL と HEX を確認する例です。RGBA のアルファ値は 0〜1 の小数で指定します。

入力

rgba(236, 72, 153, 0.5)

出力

HEX:  #ec489980
HSL:  hsla(330, 81%, 60%, 0.5)

活用シーン

Figma の色を CSS へ持ち込む

デザインツールで拾った HEX を HSL へ直します。明るさだけ動かしたいダークモード実装で、調整の起点になります。

半透明色の基準値づくり

ブランドカラーの HEX を RGB へ直し、rgba() のアルファ違いを作る基準にします。ピッカーで色を拾って値を一覧できます。

カラーコードの仕組みを学ぶ

HSL は人の感覚に近い色表現です。H・S・L を動かして結果を見比べながら、3形式の関係を手を動かして掴めます。

印刷とWebの色合わせの下調べ

資料やバナーで使う色を、HEX と RGB の双方向変換でそろえます。指定値の取り違えを、書き出す前に見つけられます。

トーン違いのパレットを組む

HSL の明度 L を上げ下げして、色味を保ったまま濃淡を振ります。ホバー色や明暗ペアをまとめて用意するのに向きます。

スクショから拾った色の再現

スポイトで吸った HEX を貼り、RGB や HSL へ展開します。画面の色をコード化して、デザインへ取り込み直せます。

技術的な解説

補足: 仕組み

変換はすべてブラウザの JavaScript で処理します。内部では RGB を 0〜1 に正規化した値を共通の中間表現に使います。

HEX は16進数の文字列解析で読み、#FFF は #FFFFFF へ展開します。RGB → HSL では最大・最小値から L を出し、S と H を順に求めます。

無彩色は H=0, S=0 として扱います。最後に Math.round() で整数へ丸めるため、往復しても誤差は1以下にとどまります。

もっと詳しく

HSL が色の微調整に向く理由

HEX や RGB は光の混ぜ方を表すので、人の感覚と直結しません。#3b82f6 を少し暗くしたいとき、R・G・B のどれを下げるかは直感で分かりません。

HSL は色相・彩度・明度の3軸で、色の見え方に近い表現です。色味を保って L だけ下げれば「同じ色の暗い版」が作れ、濃淡のパレット作りに向きます。

往復変換でわずかな誤差が出る理由

RGB → HSL → RGB と往復させると、ずれが出ることがあります。H や S・L が整数に丸められ、元の RGB と完全一致しない場合があるためです。

本ツールは Math.round() で丸め、往復後の差は1以下に収めています。厳密に同じ HEX を残したいなら、変換結果ではなく元の HEX を正本にしてください。