RGB ↔ 16進色について
Web では css の rgb(r,g,b) とデザイン仕様の #RRGGBB が混在します。どちらかを貼ると R/G/B と hex が双方向に同期します。
各チャンネルは 0～255 の 1 バイト。hex は R・G・B それぞれ 2 桁の 16 進。ブラウザ既定の sRGB モデルに沿います（本ツールは不透明色）。
できること
0～255 チャンネル
R/G/B は独立。rgb(255,128,0) は赤最大・緑半分・青ゼロ。広色域を明示しない限り sRGB として扱います。
#RRGGBB
255→FF、128→80、0→00。例：#FF8000。#RGB 短縮（#F80→#FF8800）も CSS では有効。大文字小文字は色に影響しません。
手計算の要点
- RGB→hex：各通道を 2 桁 hex（10～15 は A～F）にし連結。
- hex→RGB：3 ペアを (上位×16+下位) の十進に。
- 例：#3B82F6 → rgb(59, 130, 246)。
対象外
- アルファ（rgba、#RRGGBBAA 等）
- HSL、OKLCH など別色彩空間
- CMYK 印刷、Display P3 広色域
よくある使い方
RGB を hex に
rgb(255,128,0) またはスライダーで #FF8000。CSS 変数や Tailwind の extend.colors にコピー。
hex を rgb() に
#3B82F6 → rgb(59,130,246)。SCSS やインライン style で通道ごとに調整しやすい。
DevTools とデザイン token
計算 style が rgb() のとき hex に揃え、共有パレット JSON の食い違いを減らす。
レガシー文字列の整理
#RGB 短縮や # 抜け、スペース入り rgb() を一度貼り、正規形をコピー。
よくある質問
- RGB と hex をオンラインで互換するには？
- rgb() または #RRGGBB を貼るか R/G/B・hex 欄を編集。リアルタイム同期後、どちらかをコピー。
- RGB から hex 色コードへ？
- 0～255 の 3 通道または rgb() 全体。例 rgb(255,128,0)→#FF8000。
- hex から rgb() へ？
- FF8000 または #FF8000 で rgb(255,128,0)。1 通道だけ変えると hex も追従。
- hex と rgb() の使い分けは？
- sRGB では同じ色。hex は短く token 向き、rgb() は通道調整が読みやすい。
- sRGB とは？
- Web 既定の RGB。color(display-p3…) 等を使わない限りブラウザは sRGB として描画します。
- #FF0000 と rgb(255,0,0) は同じ？
- はい、純赤。hex の大小文字は無関係です。
- #RGB 三位短縮は？
- #F00 は #FF0000 に展開するか rgb(255,0,0) を入力するのが確実です。
- 1 通道の十進を hex 2 桁に？
- 十進 10 → 0A。R/G/B いずれかを変えると #RRGGBB 全体が更新されます。
RGB ↔ hex 例
rgb(255, 255, 255)白 — #FFFFFFrgb(0, 0, 0)黒 — #000000rgb(255, 0, 0)赤 — #FF0000rgb(255, 128, 0)橙 — #FF8000rgb(59, 130, 246)青系 — #3B82F6rgb(16, 185, 129)エメラルド — #10B981#6366F1インディゴ — rgb(99, 102, 241)