色変換のやり方｜HEX・RGB・HSLを変換する方法を解説

「デザインツールではRGBなのに、CSSではHEXが必要」「#ff0000って何色？」そんなとき、色変換（カラーコード変換）が必要になります。

この記事では、色変換の方法を、HEX・RGB・HSLの違い、変換方法、Webデザインでの使い分けまで、具体例つきで解説します。

色の表し方の基本

色はコンピュータ上では数値で表されます。主な形式は次の3つです。

形式	表記例	特徴
HEX	#ff0000	Webで最も一般的。16進数6桁（または3桁）
RGB	rgb(255, 0, 0)	赤・緑・青の各256段階（0〜255）
HSL	hsl(0, 100%, 50%)	色相・彩度・明度。直感的に色を調整できる

HEXとは

HEX（16進数）は、赤・緑・青の値をそれぞれ2桁の16進数（00〜FF）で表します。

#RRGGBB

• #ff0000：赤（R=ff=255, G=00=0, B=00=0）
• #00ff00：緑（R=00, G=ff=255, B=00）
• #0000ff：青（R=00, G=00, B=ff=255）

RGBとは

RGBは、赤・緑・青の明るさを0〜255の数値で表します。HEXの16進数2桁（00〜FF）を10進数に変換したものです。

#ff0000 → rgb(255, 0, 0)

よく使う色の変換表

色	HEX	RGB
黒	#000000	rgb(0, 0, 0)
白	#ffffff	rgb(255, 255, 255)
赤	#ff0000	rgb(255, 0, 0)
緑	#00ff00	rgb(0, 255, 0)
青	#0000ff	rgb(0, 0, 255)
黄	#ffff00	rgb(255, 255, 0)
グレー	#808080	rgb(128, 128, 128)

短縮HEX

同じ数字が並ぶ場合は3桁に省略できます。

• #ff0000 → #f00
• #ffffff → #fff
• #33aacc → 省略不可（3aac ではない）

HSLとは

HSLは「色相（Hue）・彩度（Saturation）・明度（Lightness）」で色を表します。色の調整が直感的なため、デザイン作業で使われます。

• 色相：0〜360度の角度。0=赤、120=緑、240=青
• 彩度：0〜100%。0%でグレー、100%で鮮やか
• 明度：0〜100%。0%で黒、100%で白

hsl(210, 100%, 50%) → 鮮やかな青（#0080ff）

色を変換する手順

Tools Hubの色変換ツールを使えば、HEX・RGB・HSLのどれを入力しても、他の形式に自動で変換されます。

色変換のまとめ

• HEX・RGB・HSLは同じ色の別表現（16進数 vs 10進数 vs 直感的な3属性）
• 短縮HEXは同じ数字が並ぶ場合のみ使える
• デザインの微調整はHSL、Webへの記述はHEX、プログラミングではRGBが便利
• Tools Hubの色変換ツールならブラウザだけで完結

色変換が必要になったら、この記事の手順かTools Hubの色変換ツールを活用してください。

よくある質問

HEXをRGBに変換する方法は？

16進数2桁ずつを10進数に変換します。#ff0000 なら ff→255、00→0、00→0 で rgb(255, 0, 0) です。

RGBをHEXに変換する方法は？

各値を10進数から16進数に変換します。255→ff、0→00 で rgb(255, 0, 0) → #ff0000 です。

短縮HEXは使えますか？

各色が同じ数字の組み合わせの場合に限り使えます（#f00 = #ff0000）。ツールに入力すれば自動的に判断されます。

HSLはどこで使われますか？

主にデザインツールやCSSの調整で使われます。色相（0〜360度）で色を選び、彩度・明度で微調整するのが直感的です。