カラーコード変換ツール
HEX・RGB・HSLのカラーコードを相互に変換できます。色のプレビューをその場で確認でき、CSSにそのまま使えるコードも表示します。
最終更新：2026年9月9日 ／ 運営：sesebox（運営者情報）
HSLとRGBの相互変換では、計算上の四捨五入により変換後の値が±1程度ずれることがあります。HEX・RGB・HSLいずれの値もCSSにそのまま使用できます。
① このツールの使い方
- •1. 入力形式を選ぶ：HEX・RGB・HSLのどれで入力するかを切り替えます。
- •2. 値を入力する：選んだ形式に応じた入力欄が表示されるので、色コードや数値を入力します。
- •3. 結果を確認する：入力した色が3つの形式すべてに変換され、実際の色見本と一緒に表示されます。各行のコピーボタンでそのままコピーできます。
プリセットの色ボタンから代表的な8色をワンタップで試すこともできます。
② HEX・RGB・HSLはそれぞれ何を表しているか
- •HEX（例：#3498DB）：赤・緑・青の強さを、それぞれ00〜FFの16進数2桁で表した記法。CSSで最もよく使われます。
- •RGB（例：rgb(52, 152, 219)）：赤(R)・緑(G)・青(B)の強さを、それぞれ0〜255の数値で表した形式。HEXを10進数で書き直したものと考えると理解しやすいです。
- •HSL（例：hsl(204, 70%, 53%)）：色相(Hue・0〜360度)・彩度(Saturation・0〜100%)・明度(Lightness・0〜100%)の3つで色を表す形式。「同じ色味のまま明るさだけ変える」といった調整がしやすいのが特徴です。
HEXとRGBは実はまったく同じ情報を別の書き方にしているだけです。一方HSLは「人間が色を思い浮かべる感覚」に近い軸（色味・鮮やかさ・明るさ）で色を表しており、デザインでトーンを揃えたいときなどに扱いやすくなっています。
③ 変換の考え方
HEXとRGBの変換は単純な進数変換です。たとえば #3498DB は、2桁ずつ区切って16進数から10進数に直すと R=52, G=152, B=219 になります（34を16進数として読むと52、98は152、DBは219）。
RGBからHSLへの変換はやや複雑で、RGB各色の最大値・最小値の差から彩度と明度を求め、どの色が最大だったかによって色相を計算します。この過程で小数の四捨五入が発生するため、HSLとRGBを行き来すると変換後の値が±1程度ずれることがありますが、見た目の色にはほとんど影響しません。
④ どの形式を使えばいいか
| 場面 | おすすめの形式 |
|---|---|
| デザインカンプの色をそのままCSSに使う | HEX（Figma・Adobe XDなどのデザインツールがHEXで色を表示することが多いため） |
| 透明度を含めて指定したい | RGB（rgba(r, g, b, 透明度) の形で指定できる） |
| 同じ色味で明るさ・鮮やかさだけ変えたい | HSL（LやSの数値だけを変えれば済む） |
カラーコードの基本的な仕組みはカラーコード変換の基礎を解説した記事でも取り上げています。
⑤ 実務での使いどころとハマりどころ
Web制作の現場では、デザイナーから受け取ったカラーコードがHEXなのにコーディング側ではrgba()で透明度をつけたい、という場面がよくあります。このツールでHEXをRGBに変換してから、rgb(52, 152, 219)の末尾に透明度（例：rgba(52, 152, 219, 0.5)）を手で足せば、意図した色のまま半透明の指定ができます。また、CSS変数（カスタムプロパティ）でブランドカラーをHSLで管理しているプロジェクトでは、デザインツールから渡されたHEXコードをこのツールでHSLに変換してから登録する、という使い方もできます。
よくあるハマりどころは、3桁の省略形HEXの扱いです。#39Dのような3桁のHEXは、各桁を2回繰り返した#3399DDと同じ色を表しますが、単純に「0を1つ足す」といった誤った変換をしてしまうと、まったく違う色になってしまいます。このツールは3桁形式にも対応しているので、省略形のまま貼り付けても正しく変換されます。もう1つの注意点は、HSLとRGBの相互変換で発生する±1程度の誤差です。デザインツールとコードで見比べたときに数値がわずかに違っても、計算上の四捨五入によるもので、見た目の色にはほとんど影響しません。
テキスト色と背景色の組み合わせが決まったら、カラーコントラストチェッカーでアクセシビリティ基準を満たしているかもあわせて確認しておくと安心です。
⑥ CSS変数・デザインシステムでの色管理
近年のWeb制作では、色を直接HEXコードで書き並べるのではなく、CSS変数（カスタムプロパティ）や、Tailwind CSSのようなフレームワークの設定ファイルで一元管理する方法が広く使われています。--color-primary: #3498DB;のように名前を付けて登録しておけば、ブランドカラーを変更したいときに1箇所を直すだけで済みます。デザインチームからHEXコードで色見本を受け取り、それをこのツールでRGB・HSLに変換しながら命名・登録していく、という使い方は、デザインシステムを構築する際の実務でよく発生する作業です。HSLで管理しておくと、明度だけを変えたホバー時の色やアクティブ時の色をコードで簡単に生成できるため、状態ごとの色を1つずつ指定する手間を減らせるという利点もあります。ダークモード対応が必要なプロジェクトでも、同じ色相を保ったまま明度だけを反転させるといった調整がしやすく、HSLならではの扱いやすさが活きる場面です。色の管理方法に迷ったときは、まずHSLで基準となる色を決めてから、必要に応じてHEX・RGBへ変換するという順番で考えると整理しやすくなります。1つの基準色から派生パターンを作る発想は、デザインの一貫性を保つうえでも役立つ考え方です。慣れてくると、頭の中でHSLの数値からおおよその色をイメージできるようになります。
HEX・RGB・HSLとは何ですか？
いずれもWebデザインやCSSで使われる色の表現形式です。HEXは「#RRGGBB」のような16進数表記、RGBは赤・緑・青それぞれの強さを0〜255で表す形式、HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)で色を表す形式です。
HEXコードはどんな形式で入力できますか？
「#3498DB」のような6桁の形式、または「#39D」のような3桁の省略形に対応しています。先頭の#はあってもなくても入力できます。
RGBやHSLの値はどんな範囲で入力すればいいですか？
RGBは赤(R)・緑(G)・青(B)それぞれ0〜255の整数で入力します。HSLは色相(H)が0〜360度、彩度(S)・明度(L)が0〜100%で入力します。範囲外の値は自動的に補正されます。
HSLとRGBを変換すると値が少しずれることがあるのはなぜですか？
HSLとRGBの変換には小数を含む計算が必要なため、四捨五入の影響で変換後の値が±1程度ずれることがあります。これは計算上の誤差であり、見た目の色にはほとんど影響しません。
変換した値はそのままCSSで使えますか？
はい。HEX（例: #3498DB）、RGB（例: rgb(52, 152, 219)）、HSL（例: hsl(204, 70%, 53%)）のいずれの形式も、そのままCSSのcolorやbackground-colorプロパティに指定できます。