HEX→RGB変換

HEXカラーコードをRGB値に変換、またはその逆。

あなたのデータはデバイスを離れません
色を選択するか、下に値を入力
RGB

CSS値

#2b7190
rgb(43, 113, 144)
hsl(201, 54%, 37%)
hsv(201, 70%, 56%)

HEXからRGBへの変換の仕組み

HEXカラーは6桁の16進数文字列(#RRGGBB)を使用し、各ペアは赤、緑、青のチャンネルを表します。値は00(0)からFF(255)までの範囲です。

RGBは各チャンネルに3つの10進数(0から255)を使用します。例えば、#2b7190はR:43、G:111、B:142に分解されます。

よくある質問

HEXをRGBに手動で変換するには?

hexコードを3つのペアに分割し(例: #FF8800 → FF、88、00)、各ペアを16進数から10進数に変換します: FF = 255、88 = 136、00 = 0。結果はrgb(255, 136, 0)です。

3桁のHEXコードはどうですか?

3桁のHEXは、各桁が2倍になるショートハンドです: #F80 = #FF8800。このコンバーターは両方の形式を自動的に処理します。

HEXとRGBはいつ使い分けるべきですか?

HEXはよりコンパクトで、CSSで人気があります。RGBは、コードでチャンネルを個別に操作する必要がある場合や、透明度のためにrgba()を使用する場合に好ましいです。

hex表記とは実際何か

hex色はRGB色の24ビット表現を16進数で表したものだ。#の後に6桁、3ペア：赤・緑・青。各ペアは00からffの数値：チャンネルごとに1バイト（8ビット）、3チャンネル、合計24ビット。これはちょうど2²⁴ = 16,777,216種類の個別の色をエンコードするのに十分だ。1990年代後半から消費者向けディスプレイの基準となっている「トゥルーカラー」/「数百万色」の範囲だ。

ハッシュ記号は値の一部ではなく、CSSパーサーに「続くものはhex色で変数名ではない」と伝えるシンタックスプレフィックスだ。それがなければff0000のような文字列はレキサーに曖昧になる可能性がある。0〜9の数字は10進数の意味を保持し、A〜F（CSSでは大文字小文字を区別しない）は10進数の10〜15を表す。つまりfは15、ffは15 × 16 + 15 = 255だ。

計算の仕組みと具体例

2桁のhexペアはそれぞれ(high_digit × 16) + low_digitの公式で0〜255の10進数にマッピングされる。各桁は0〜15として解釈される（A=10〜F=15）：

JavaScriptではパース全体が2行で書ける。const n = parseInt(hex.slice(1), 16);の後にconst [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];：これがウェブ上のあらゆるhex-to-RGBコンバーターの実質的なコードだ。逆方向は'#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')だ。

3桁・4桁・8桁の省略形

チャンネルが対称の場合、CSSでは省略形が使える：

3桁省略形はCSS Level 1（1996年）から存在する。4桁と8桁のアルファ形式はCSS Color Module Level 4でずっと後に追加され、2015年半ば頃から幅広いクロスブラウザ対応が実現した。

名前付きカラーとrebeccapurpleのストーリー

HTML 4.01（1999年12月）は16色の名前付きカラー（black・silver・gray・white・maroon・red・purple・fuchsia・green・lime・olive・yellow・navy・blue・teal・aqua）を規定した。Windows VGAパレットの標準16色を基にしている。CSS 2.1ではorangeを17番目として追加した。CSS Color Module Level 3はX11のrgb.txtファイルからさらに約130の名前を正式に採用した（MosaicとNetscapeの初期バージョンがX Window Systemのルーツから引き継いだもの）。cyan/aquaやgray/greyなどのエイリアスをどう数えるかによって、合計は約147〜148になる。

CSS Color Module Level 4はもう1色を追加した。こんなエピソードがある。Rebecca MeyerはCSSの権威でW3CメンバーのEric A. Meyerの6歳の娘だった。彼女は2014年6月7日、6歳の誕生日当日に脳癌で亡くなった。Ericはその週ブログに書いた：「彼女は6歳になれた。ほぼ12時間の間、彼女は6歳だった」。コミュニティメンバーが彼女の好きな色、深い茄子の紫色、hex #663399をbeccapurpleとして追加することを提案した。Ericは1つの条件で受け入れた：rebeccapurpleでなければならずbeccapurpleではいけない。Rebeccaが最近、幼い頃の愛称はもう自分には合わないと宣言していたからだ。CSSワーキンググループは2014年6月22日、彼女の死の2週間後に変更を承認した。WebKitや他のブラウザエンジンは数日以内にサポートを実装した。人物の名を冠した唯一のCSSカラーで、現代のすべてのブラウザに静かに刻まれた記念碑だ。

sRGB：全てのhexコードが暗黙的に使う色空間

CSSに#FF5733と書くとき、単に数値を指定しているのではなく、sRGB色空間でそれを指定している。これは暗黙的なものだ。別のcolor()関数を使って明示的に指定しない限り、ブラウザはhex値をsRGBとして解釈する。

sRGBは1996年にHewlett-PackardとMicrosoftが共同提案し、IEC 61966-2-1:1999として採用された。当時の典型的なCRTモニターの応答曲線を基準とした単一のデバイス非依存色空間だ。白色点D65（6500K）でITU-R BT.709（HDTVの標準）と一次色度を共有する。W3CはウェブのデフォルトカラースペースとしてsRGBを明示的に定義した。全てのhexコード・全てのrgb()値・全ての古典的なJPEGとタグなしPNG画像はsRGBとして解釈される。

正直な制限：sRGBはCIE 1931可視色図の約35.9%をカバーする。自然界に存在し、現代のOLEDスマートフォン画面で表示できるが、hex表記では指定できない色がある。鮮やかなエメラルドグリーン・鮮やかな赤橙の夕陽の色調・蛍光塗料などだ。CSS Color Module Level 4はそれらのための新しい空間をcolor()関数で導入した：Display P3（iPhone 7と2015年後半のiMac以降のAppleディスプレイが使用、sRGBより約25%広い）とRec. 2020（4K/8Kの放送標準、CIE 1931の約75%）だ。古いsRGBのみのデバイスではブラウザが優雅にフォールバックする。

現代の代替記法：HSL・HWB・OKLCH

hexはコンパクトだが人間にはフレンドリーではない。#3DE7C9を見て色相を推測することはできない。CSSは人間の色に対する考え方に合った関数記法を段階的に追加してきた：

OKLCHはCSSカラーの長期的な方向性だが、hexコードはデザインツール・ブランド仕様・コピー＆ペーストされるスニペットの共通言語であり続けるだろう。短く・あらゆるテキスト媒体でコピー＆ペーストに安全で・普遍的に理解されているためだ。

加法混色RGBの1861年起源

RGBモデルはYoung-Helmholtzの三色説（19世紀初頭）に端を発する。人間の目には赤・緑・青に対応する3種類の色受容体があると提唱した。James Clerk Maxwellは1861年5月17日にロンドンの王立研究所でこれを実験的に実証した。タータンリボンの白黒写真3枚（赤フィルターで撮影・緑で撮影・青で撮影）を同色フィルターを付けた3台のプロジェクターで投影した。スクリーン上に再合成された画像はリボンをほぼフルカラーで表示した。これは一般的に最初のカラー写真とされている。同じ加法混色RGBの原理が、これまで作られた全てのCRT・LCD・OLED・プラズマディスプレイを動かしている：各ピクセルは独立して可変輝度の赤・緑・青のサブピクセルのトライアドで、網膜がそれらを混合して知覚される色にする。

さらなる質問

hexは大文字小文字を区別しますか？

いいえ。#abcdefと#ABCDEFはパーサーにとって同一だ。CSS仕様は明確に：hex色の値は大文字小文字を区別しない。#FfAa00のような混在した大文字小文字も合法だが、本番コードではまれだ。（URLフラグメントとは異なる。先頭のハッシュは全く別のシンタックス概念だ。）

2つのhexコードを平均するとなぜくすんだグレーになるのですか？

hexの値はガンマ符号化されており（sRGBトランスファー関数が適用されている）、ガンマ空間での平均は線形光での平均と同じではないためだ。古典的な例はlinear-gradient(red, green)がくすんだオリーブ色の中間点を生成することで、数学的にはガンマ符号化空間で正しいが視覚的には誤りだ。OKLCHのような現代の色関数は知覚的に均一な空間で補間することでこれを解決し、よりスムーズなグラデーションを生成する。

「ネオン」や「蛍光」色のhexコードがないのはなぜですか？

hex表記は暗黙的にsRGBであり、sRGBは人間の目が見える色の約36%しかカバーしていないためだ。多くの鮮やかな色（鮮やかなエメラルドグリーン・明るい赤橙色・蛍光塗料）は自然界に存在し、現代のワイドガモットスクリーンで表示できるがsRGBキューブの外にある。それらに到達するにはcolor(display-p3 …)・color(rec2020 …)・高クロマ値のoklch()が必要だ。それらの色にhex相当のものはない。

「Webセーフパレット」とは何でしたか？

1990年代後半、多くのモニターが256色に限られていたとき、デザイナーはWindowsとMac OSのシステムパレットの共通部分である216色のパレットに固執した。この216色は6×6×6のキューブから来た：R・G・Bのそれぞれが00・33・66・99・CC・FFの値のみを取った。Lynda Weinmanが1996年の著書Designing Web Graphicsで普及させた。24ビットカラーが消費者向けハードウェアに普及した2000年頃に廃れた。現在は純粋な歴史的好奇心で、#CC0033や#993366のようなヴィンテージhexコードに時折残っている。

サーバーに何か送信されますか？

いいえ。hex-to-RGBは純粋関数のJavaScript算術の2行だ。変換はローカルで動作し、入力した色に関する情報はどこにもアップロードされない。ページは一度読み込まれればオフラインでも動作する。

関連ツール

カラーコンバーター

HEX、RGB、HSL間で変換します。

カラーパレットジェネレーター

美しいカラーパレットを生成します。

色合い

色の色合いとシェードを生成します。