16進数カラーコードとRGBの変換方法 - 完全ガイド

Web開発では、同じ色を #3a7bd5 のような16進数(HEX)と、rgb(58, 123, 213) のような10進数で表します。HEXは短くコピーしやすく、RGBは各成分を計算しやすいため、CSS・デザインツール・画像処理APIの間で両方が使われます。CSSにおける通常のHEXとRGBは、どちらも同じsRGB色空間の赤・緑・青チャンネルを別の進数で書いたものです。

Hex and RGB are two notations for the same sRGB channel values in CSS. This guide covers the arithmetic in both directions, shorthand expansion, alpha-enabled forms, modern CSS syntax, robust conversion code, and common validation mistakes.

1. HEXとRGBは何を表しているか

sRGB色は赤(R)・緑(G)・青(B)の光を組み合わせます。各チャンネルは通常8ビット、つまり 0〜255 の256段階です。HEXとRGBの違いは値ではなく表記法です。

#ff0000 と rgb(255, 0, 0) は同じ純赤です。一方、color(display-p3 ...) や oklch() は異なる色空間・モデルなので、単なる進数変換ではありません。

2. 6桁HEXカラーの構造

基本形は #RRGGBB です。# に続く6桁を2桁ずつ区切り、赤・緑・青を表します。16進数では a〜f を10〜15として使います。

#  3a  7b  d5
   RR  GG  BB
   赤  緑  青

各2桁は 00〜ff、つまり10進数の0〜255です。ff = 15 × 16 + 15 = 255 なので、#000000 は黒、#ffffff は白です。

3. HEXからRGBへ手動変換する

6桁を2桁ずつに分け、上位桁に16を掛けて下位桁を足します。#3A7BD5 では A=10、B=11、D=13 です。

#3A7BD5 → 3A / 7B / D5

R: 3A = 3 × 16 + 10 = 58
G: 7B = 7 × 16 + 11 = 123
B: D5 = 13 × 16 + 5 = 213

結果: rgb(58, 123, 213)

一般式は2桁を xy として x × 16 + y です。58・123・213を16進数へ戻すと3a・7b・d5になるため、計算も検算できます。

4. RGBからHEXへ手動変換する

各10進数を16で割り、商を上位桁、余りを下位桁にします。16未満で1桁になる値も、先頭に0を補って必ず2桁にします。

rgb(10, 128, 255)

R:  10 ÷ 16 = 0 余り10(A) → 0a
G: 128 ÷ 16 = 8 余り 0    → 80
B: 255 ÷ 16 = 15余り15(F) → ff

結果: #0a80ff

#0A80FF と #0a80ff は同じ色です。CSSでは大文字・小文字のどちらも有効ですが、プロジェクト内では統一すると差分が読みやすくなります。

5. 3桁省略形 #RGB の展開ルール

#abc は各文字を2回繰り返し、#aabbcc に展開します。#a0b0c0 のように0を足す規則ではありません。

6桁から3桁へ縮められるのは、各チャンネルの2文字が同じ場合だけです。#aabbcc → #abc は可能ですが、#abbbcc は正確には短縮できません。

6. 8桁HEXとアルファチャンネル

不透明度を含むHEXは #RRGGBBAA の順で、末尾の AA がアルファです。00 は完全な透明、ff は完全な不透明です。4桁の #RGBA も各桁を複製するため、#3a7c → #33aa77cc になります。

rgba(58, 123, 213, 0.5) とも対応しますが、HEXのアルファは0〜255、関数側は0〜1またはパーセントなので尺度を混同しないでください。8桁HEXはモダンブラウザで広く対応済みですが、古いブラウザやWebViewでは非対応の場合があります。

.overlay {
  background: rgba(58, 123, 213, 0.5); /* 古い環境向け */
  background: #3a7bd580;
}

7. CSS Color 4以降の rgb() 構文

以前はアルファなしを rgb()、ありを rgba() と書き分けました。CSS Color Level 4では rgb() がアルファも統一的に扱い、スペース区切りの rgb(r g b / a) が導入されました。rgba() は後方互換のため残り、実質的に rgb() の別名です。

/* 従来 */
color: rgb(58, 123, 213);
color: rgba(58, 123, 213, 0.5);

/* CSS Color 4 */
color: rgb(58 123 213);
color: rgb(58 123 213 / 0.5);
color: rgb(22.75% 48.24% 83.53% / 50%);

これは記法の更新であり、通常の数値を使う限り色空間はsRGBです。既存のカンマ構文を機械的に直す必要はありません。

8. JavaScriptとPythonで相互変換する

JavaScript

function hexToRgb(input) {
  let hex = input.replace(/^#/, "");
  if (/^[0-9a-f]{3}$/i.test(hex)) {
    hex = hex.split("").map((c) => c + c).join("");
  }
  if (!/^[0-9a-f]{6}$/i.test(hex)) throw new Error("invalid HEX");
  return {
    r: parseInt(hex.slice(0, 2), 16),
    g: parseInt(hex.slice(2, 4), 16),
    b: parseInt(hex.slice(4, 6), 16),
  };
}

function rgbToHex(r, g, b) {
  const values = [r, g, b];
  if (values.some((v) => !Number.isInteger(v) || v < 0 || v > 255)) {
    throw new RangeError("RGB must be integers from 0 to 255");
  }
  return "#" + values.map((v) => v.toString(16).padStart(2, "0")).join("");
}

hexToRgb("#3A7BD5");    // { r: 58, g: 123, b: 213 }
rgbToHex(10, 128, 255); // "#0a80ff"

Python

import re

def hex_to_rgb(value: str) -> tuple[int, int, int]:
    value = value.removeprefix("#")
    if re.fullmatch(r"[0-9a-fA-F]{3}", value):
        value = "".join(ch * 2 for ch in value)
    if not re.fullmatch(r"[0-9a-fA-F]{6}", value):
        raise ValueError("invalid HEX")
    return tuple(int(value[i:i + 2], 16) for i in (0, 2, 4))

def rgb_to_hex(r: int, g: int, b: int) -> str:
    values = (r, g, b)
    if any(type(v) is not int or not 0 <= v <= 255 for v in values):
        raise ValueError("RGB must be integers from 0 to 255")
    return "#{:02x}{:02x}{:02x}".format(*values)

print(hex_to_rgb("#3A7BD5"))   # (58, 123, 213)
print(rgb_to_hex(10, 128, 255)) # #0a80ff

JavaScriptの parseInt(text, 16) とPythonの int(text, 16) は基数16を明示します。逆方向では padStart(2, "0") と :02x がゼロ埋めを担当します。

9. CSS・SCSSで色変数を一元管理する

同じ色をHEXとRGBで重複管理すると片方だけ更新する事故が起きます。CSSではチャンネルを変数に持たせ、利用側でアルファだけ変えられます。

:root {
  --brand-rgb: 58 123 213;
  --brand: rgb(var(--brand-rgb));
}
.button { background: var(--brand); }
.shadow { box-shadow: 0 8px 24px rgb(var(--brand-rgb) / 25%); }

SCSSでは色関数を使い、単一の色トークンから派生させます。

$brand: #3a7bd5;
.button {
  background: $brand;
  border-color: rgb(red($brand), green($brand), blue($brand));
  box-shadow: 0 8px 24px rgba($brand, 0.25);
}

Sassのバージョンやモジュール方式で推奨APIは異なりますが、正本を1つにし、形式変換は表示・外部連携の境界で行う原則は共通です。

10. Color Converterで実践的に確認する

1. Color Converterへ #3A7BD5 を入力します。
2. RGBが rgb(58, 123, 213) になることを確認します。
3. #abc や #3a7bd580 も試し、短縮形とアルファ値を比較します。
4. 色見本を目視して値をコピーし、CSSへ貼り付けます。

手計算の学習には式が役立ちますが、実務ではツールで入力検証と丸めを再確認すると転記ミスを減らせます。新しい色を視覚的に選ぶ場合はColor Pickerも利用できます。

よくある間違いと直し方

• #を含めたまま解析する: 先に除去してから parseInt(..., 16) へ渡す。
• 3桁を0埋めする: #abc は #a0b0c0 ではなく #aabbcc。
• 短縮できない値を丸める: 各ペアが同じ文字でなければ3桁化できない。
• アルファの尺度を混同する: HEXは0〜255、CSS関数は0〜1またはパーセント。
• 8桁をARGBと思う: CSSは #RRGGBBAA でアルファは末尾。
• 大文字と小文字を別の色と思う: #FF00AA と #ff00aa は同値。
• ゼロ埋めを忘れる: 10はHEXで a でも、色チャンネルは 0a。
• 範囲外を黙って丸める: -1、256、小数、NaN は変換前に検証する。
• 色空間変換と混同する: HEX/RGBは通常同じsRGB値の表記変更で、OKLCH変換とは別。
• 透明色のRGBを無視する: アルファ0でもRGB成分は補間や画像処理に影響する場合がある。

English summary

CSS hex and rgb() normally encode the same three 8-bit sRGB channels. Split #RRGGBB into RR, GG and BB, then calculate high-digit × 16 + low-digit; #3A7BD5 becomes rgb(58, 123, 213). In reverse, divide each 0–255 value by 16 and zero-pad each result to two characters. Three-digit #RGB duplicates each digit, so #abc expands to #aabbcc, not #a0b0c0.

Alpha hex uses #RRGGBBAA or shorthand #RGBA, while modern CSS uses rgb(r g b / a); rgba() remains for compatibility. Strip the hash, validate length and characters, expand shorthand before parsing, reject out-of-range RGB values, and explicitly convert between 0–255 and 0–1 alpha scales. Verify arithmetic and rounding with Color Converter before committing production tokens.

関連ツール / Related tools

関連ガイド / Related guides