Hex to RGB 変換ツール：開発者向けカラーコードガイド

色はすべてのユーザーインターフェースの基本要素であり、開発者は16進カラーコードとRGB値を頻繁に切り替えます。CSSでWebサイトをスタイリングする場合でも、モバイルアプリを構築する場合でも、Pythonでデータ可視化スクリプトを書く場合でも、hexとRGBの相互変換を理解することは不可欠です。この完全ガイドでは、変換アルゴリズムの説明、複数言語でのコード例、アルファ透明度などの高度なトピックを扱います。

無料オンラインHex to RGB変換ツールをお試しください。

16進カラーコードとRGB値とは？

16進カラーコードは、#接頭辞付きの6文字の文字列で色を表します。各文字ペアが1つのカラーチャンネル（赤・緑・青）をエンコードします。形式は#RRGGBBで、各ペアは00からFFの16進数です。CSSは#F00のような3文字の省略形もサポートし、#FF0000に展開されます。

RGB値は、赤・緑・青の強度を0から255の3つの10進数で定義します。CSSではrgb(255, 87, 51)と記述します。hexとRGBは同じ色空間（sRGB）を記述するため、変換は無損失です。

Hex to RGB変換の仕組み

hexからRGBへの変換は、各hexペアが直接1つのRGBチャンネルに対応するため簡単です：

例：#1A2B3Cは R=26、G=43、B=60 = rgb(26, 43, 60)。

逆変換（RGBからhex）は、各10進チャンネル値を2桁の16進文字列に変換して連結します。

一般的な16進カラーコードとRGB値

一般的な色のhexとRGBの対照表：

Hex・RGB・HSLの使い分け

3つの形式はすべて同じsRGB色空間を記述します：

Hex (#RRGGBB)は最もコンパクトな形式で、CSSのデフォルト選択です。デザインツールはデフォルトでhex形式でコピーします。

RGB / RGBAは個別チャンネルの操作やアルファ透明度が必要な場合に最適です。

HSL / HSLAは最も人間が読みやすい形式で、カラーパレットやテーマに最適です。

実践では：静的な色にはhex、透明度にはrgba()、動的カラーシステムにはhsl()。

JavaScript・CSS・PythonでのHex to RGB変換

JavaScript / TypeScript

3文字省略形、6文字、8文字（アルファ付き）に対応するhex-to-RGB関数：

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand (#F0A -> FF00AA)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS：HexとRGBの実践

CSSではhexとRGBは互換性があります：

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Pythonでは組み込みのint()で簡単に変換できます：

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB to Hex（JavaScript）

RGBからhexへの逆変換：

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

アルファチャンネル：透明度付きHex (#RRGGBBAA) とRGBA

hexとRGBの両方がアルファチャンネルをサポートします。1.0（またはFF）=不透明、0.0（または00）=完全透明。

8桁hex (#RRGGBBAA)はカラーチャンネルの後に2文字のアルファ値を追加します。例：#FF000080=50%不透明の赤。

rgba()はより一般的な構文です：rgba(255, 0, 0, 0.5)。モダンCSS構文：rgb(255 0 0 / 0.5)。

アルファ変換：hexから10進：255で割る。10進からhex：255を掛けて変換。

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

よくある質問

hexをRGBに変換するには？

#を削除し、3つの2文字ペアに分割し、各ペアを16進数から10進数に変換します。#3B82F6はrgb(59, 130, 246)になります。

hexとRGBの違いは？

hexとRGBは異なる数値システムで同じsRGB色を表します。hexはコンパクトな16進表記、RGBは0-255の3つの10進数を使います。#FF0000とrgb(255, 0, 0)は同一です。

hexとRGBカラー形式を理解することはWeb開発者の基本スキルです。即座に変換するには当ツールをご利用ください。

無料のHex to RGB変換ツールで即座に色を変換。