RGBと16進数カラーコードの相互変換ツール
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
16進数カラーコードの意味やRGBへ変換する計算式の解説付き。

ツールの使い方

WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツールです。


カラーコードをRGB値に変換したい場合は上の欄にカラーコードを入力してください。
RGB値をカラーコードに変換したい場合は下の欄にRGB値を入力してください。

このツールはカラーコード・RGB値どちらか一方のパラメータを編集すると、その内容にあわせて反対側のパラメータが自動的に書き換えられる仕組みとなっておりますので、即座に変換結果を求めることができます。


上側の入力欄がカラーコード。6桁もしくは3桁の16進数を入力します。

下側の入力欄はRGB値の入力欄です。0から255まで10進数の数字が入ります。
Rが赤色、Gが緑色、Bが青色を表しています。
RGB値は、入力欄の横にあるスクロールバーで調整することもできます。

そして、一番下にあるボックスに現在編集中の色の見本が表示されます。

16進数カラーコードの意味と変換計算式

ホームページやブログの作成時に使用するHTMLやCSSでは色を指定する場合に、#(ハッシュマーク)から始まる6桁の16進数で色を表現する方法が用いられます。
#FF8822
これは色を赤・緑・青の3色で表すRGB形式の各パラメータを2桁の16進数に変換して連結したものです。
上記のカラーコードの場合、FFが赤色、88が緑色、22が青色を表しています。
あとはパラメータを16進数から10進数に変換することでカラーコードをRGBに変換することができます。
FF(16進数) = 255(10進数)
88(16進数) = 136(10進数)
22(16進数) = 34(10進数)

よって
#FF8822 = rgb(255,136,34)
なお、16進数と10進数の変換は下記のページで計算できます。
進数変換ツール

3桁の16進数カラーコードの意味

CSSでは色を6桁ではなく3桁の16進数で表記する場合があります。
#F82
これは6桁表記の各パラメータを2桁から1桁に省略したもので、各桁を2回くり返すことで6桁表記にできます。
つまり、#F82は#FF8822を省略した表記ということです。

関連コンテンツ

WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
RGBとHSV・HSBの相互変換ツール
色の表現法である「RGB」と「HSV」を相互変換するツールと変換計算式の解説。
RGBとHSLの相互変換ツール
色の表現法である「RGB」と「HSL」を相互変換するツールと変換計算式の解説。
CSSアイコン
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。