RGBから16進数への完全変換ガイド:色の原理、#RRGGBBの仕組み、Python/JS/Java/C++での実装コードを徹底解説

Webデザイン、データ可視化、ゲーム開発など、デジタル世界の色を扱う上で、RGBと16進数の変換は必須の知識です。Python, JavaScript, Java, C++でのRGB↔16進数の双方向変換を実装するための実用的なサンプルコードを提供します。

2025年9月28日
16to10チーム
7 分钟阅读
RGB16進数カラーコードWebデザインプログラミングPythonJavaScriptJavaC++
其他语言版本

该文章暂无zh版本。显示ja版本。

RGBから16進数への完全変換ガイド:色の原理、#RRGGBBの仕組み、Python/JS/Java/C++での実装コードを徹底解説

摘要

Webデザイン、データ可視化、ゲーム開発など、デジタル世界の色を扱う上で、RGBと16進数の変換は必須の知識です。特にWebで使用される16進数カラーコード#RRGGBB)は、RGBの3要素を10進数から16進数に変換したものです。

本記事では、この色の仕組みと変換の基礎原理を深く掘り下げ、**Python, JavaScript, Java, C++**という主要なプログラミング言語で、RGB16進数の双方向変換を実装するための実用的なサンプルコードを提供します。色の世界を自由に操るスキルを身につけましょう。

RGBカラーモデルと16進数の基礎

RGB 16 進数変換を理解するには、まずRGBカラーモデルと16進数表記の仕組みを知る必要があります。

RGBの基本原理:光の三原色

RGBは、光の三原色(Red:赤、Green:緑、Blue:青)を混ぜ合わせて色を表現する加法混色モデルです。

  • 各色の強度は通常、0から255までの10進数で表現されます。
  • 0が最も暗い(光がない)状態、 255が最も明るい(光が最大)状態を示します。
  • 例:純粋な赤は (255,0,0) で表現されます。

16進数カラーコード(#RRGGBB)の構造

Web開発(CSSやHTML)で使われる16進数カラーコードは、シャープ記号(#)に続く6桁の16進数で構成されます。

#RRGGBB

  • RR:赤(Red)の強度を2桁の16進数で表現
  • GG:緑(Green)の強度を2桁の16進数で表現
  • BB:青(Blue)の強度を2桁の16進数で表現

2桁の16進数は、1バイト(8ビット)のデータを表し、その範囲は 00 から FF です。

16進数10進数意味
000色の強度が最も弱い(最小)
FF255色の強度が最も強い(最大)

変換の核:10進数255 ↔ 16進数FF

RGBの10進数値を16進数に変換するプロセスは、単に0から255の数値を16進数に基数変換するだけです。そして、必ず2桁で表現するために、値が15以下の場合(例:10進数10 → 16進数A)は、ゼロ埋めを行って 0A とします。

  • 例: RGB (180, 50, 255)
    • R: 180→B4
    • G: 50→32
    • B: 255→FF
    • 結果: #B432FF

実際の変換作業を効率化するため、当サイトのカラーコード変換ツールを活用して、RGB値と16進数カラーコードの相互変換を簡単に行うことができます。

主要なプログラミング言語での変換方法

RGB 16 進数 変換を実装するための各言語のコアとなる機能を紹介します。

JavaScript/HTMLでの利用(Web開発の標準)

JavaScriptでは、数値のtoString(16)メソッドが最も直感的です。Web環境では、カラーコードの操作が最も頻繁に行われます。

方向関数/メソッド説明
10進数16進数num.toString(16)10進数を16進数表記の文字列に変換
ゼロ埋めhex.padStart(2, '0')1桁の16進数(例: A)を 0 で埋めて 2 桁(例: 0A)にする
16進数10進数parseInt(hex, 16)16進数文字列を10進数に戻す

Pythonでの変換ロジック

Pythonでは、F-stringのフォーマット指定子を使って、簡単に10進数を2桁の16進数(大文字)に変換できます。

方向関数/メソッド説明
10進数16進数f'{num:02X}'2桁でゼロ埋め(02)、大文字(X)で16進数にフォーマット
16進数10進数int(hex_str, 16)基数 16 を指定して10進数整数に変換

Javaでの変換アプローチ

Javaでは、Integerクラスの静的メソッドを使用して変換を行います。ゼロ埋めや大文字化は、文字列操作で行います。

方向関数/メソッド説明
10進数16進数Integer.toHexString(num)10進数を16進数文字列に変換
ゼロ埋めString.format("%02X", num)2桁でゼロ埋め、大文字の16進数文字列を生成
16進数10進数Integer.parseInt(hex_str, 16)16進数文字列を10進数に戻す

実行可能!双方向変換コードの完全なサンプル集

RGB 16 進数の双方向変換を行う、実用的なコードサンプルです。

Python RGB ↔ Hex 変換サンプル

PYTHON
# RGB (10進数) と 16進数カラーコード (#RRGGBB) の双方向変換を行うPythonコード

def rgb_to_hex(r, g, b):
    """
    3つの10進数RGB値 (0-255) を16進数カラーコード (#RRGGBB) に変換します。
    """
    # 各成分を2桁の16進数(大文字、ゼロ埋め)に変換し連結
    # :02X は「ゼロ埋め(0)、2桁(2)、16進数(X)」を意味する
    hex_code = f'#{r:02X}{g:02X}{b:02X}'
    print(f"RGB({r}, {g}, {b}) -> {hex_code}")
    return hex_code

def hex_to_rgb(hex_code):
    """
    16進数カラーコード (#RRGGBB) を10進数RGB値 (R, G, B) のタプルに変換します。
    """
    # '#' プレフィックスを削除し、大文字に変換
    hex_code = hex_code.lstrip('#').upper()
    
    if len(hex_code) != 6:
        print(f"エラー: '{hex_code}' は有効な6桁の16進数コードではありません。")
        return None

    try:
        # 2桁ずつ区切り、基数16として10進数に変換
        r = int(hex_code[0:2], 16)
        g = int(hex_code[2:4], 16)
        b = int(hex_code[4:6], 16)
        
        print(f"Hex '{hex_code}' -> RGB({r}, {g}, {b})")
        return (r, g, b)
    except ValueError:
        print(f"エラー: '{hex_code}' に無効な16進数文字が含まれています。")
        return None

# 実行例
print("--- RGBから16進数へ ---")
rgb_to_hex(255, 0, 0)      # 純粋な赤: #FF0000
rgb_to_hex(0, 128, 255)    # 明るい青: #0080FF
rgb_to_hex(15, 15, 15)     # 濃い灰色 (ゼロ埋め必要): #0F0F0F

print("\n--- 16進数からRGBへ ---")
hex_to_rgb("#FF0000")
hex_to_rgb("0080FF")
hex_to_rgb("#0f0f0f")      # 小文字も処理可能

JavaScript RGB ↔ Hex 変換サンプル

JAVASCRIPT
// RGB (10進数) と 16進数カラーコード (#RRGGBB) の双方向変換を行うJavaScriptコード

function componentToHex(c) {
    // 10進数成分を2桁の16進数に変換し、ゼロ埋め ('0') と大文字化を行うヘルパー関数
    const hex = c.toString(16).toUpperCase();
    return hex.padStart(2, '0');
}

function rgbToHex(r, g, b) {
    /**
     * 3つの10進数RGB値 (0-255) を16進数カラーコード (#RRGGBB) に変換します。
     */
    const rHex = componentToHex(r);
    const gHex = componentToHex(g);
    const bHex = componentToHex(b);
    
    const hexCode = `#${rHex}${gHex}${bHex}`;
    console.log(`RGB(${r}, ${g}, ${b}) -> ${hexCode}`);
    return hexCode;
}

function hexToRgb(hexCode) {
    /**
     * 16進数カラーコード (#RRGGBB) を10進数RGB値 {r, g, b} オブジェクトに変換します。
     */
    // '#' プレフィックスを除去
    hexCode = hexCode.replace(/^#/, '');

    if (hexCode.length === 3) {
        // 3桁表記 (#RGB) の場合は6桁に展開
        hexCode = hexCode[0] + hexCode[0] + hexCode[1] + hexCode[1] + hexCode[2] + hexCode[2];
    }

    if (hexCode.length !== 6) {
        console.error(`エラー: '${hexCode}' は有効なカラーコードではありません。`);
        return null;
    }

    // 2桁ずつ区切り、基数16で10進数に変換
    const r = parseInt(hexCode.substring(0, 2), 16);
    const g = parseInt(hexCode.substring(2, 4), 16);
    const b = parseInt(hexCode.substring(4, 6), 16);

    // parseIntがNaNを返す場合のエラーチェック
    if (isNaN(r) || isNaN(g) || isNaN(b)) {
         console.error(`エラー: '${hexCode}' に無効な16進数文字が含まれています。`);
         return null;
    }

    console.log(`Hex '#${hexCode}' -> RGB(${r}, ${g}, ${b})`);
    return { r, g, b };
}

// 実行例
console.log("--- RGBから16進数へ ---");
rgbToHex(255, 0, 0);      // #FF0000
rgbToHex(0, 128, 255);    // #0080FF
rgbToHex(170, 170, 170);  // #AAAAAA

console.log("\n--- 16進数からRGBへ ---");
hexToRgb("#FF0000");
hexToRgb("0080FF");
hexToRgb("#aaa");        // 3桁表記の例 -> #AAAAAA

Java RGB ↔ Hex 変換サンプル

JAVA
// RGB (10進数) と 16進数カラーコード (#RRGGBB) の双方向変換を行うJavaコード

public class RgbHexConverter {
    
    private static String componentToHex(int c) {
        // 10進数成分を2桁の16進数に変換し、ゼロ埋めと大文字化を行うヘルパー関数
        // %02X は「ゼロ埋め(0)、2桁(2)、16進数大文字(X)」のフォーマット指定子
        return String.format("%02X", c);
    }

    public static String rgbToHex(int r, int g, int b) {
        /**
         * 3つの10進数RGB値 (0-255) を16進数カラーコード (#RRGGBB) に変換します。
         */
        if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
            System.out.println("エラー: RGB値は0から255の範囲である必要があります。");
            return null;
        }

        String hexCode = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
        System.out.println("RGB(" + r + ", " + g + ", " + b + ") -> " + hexCode);
        return hexCode;
    }

    public static int[] hexToRgb(String hexCode) {
        /**
         * 16進数カラーコード (#RRGGBB または RRGGBB) を10進数RGB値 {r, g, b} の配列に変換します。
         */
        // '#' プレフィックスを除去
        if (hexCode.startsWith("#")) {
            hexCode = hexCode.substring(1);
        }
        
        // 大文字に変換して処理を統一
        hexCode = hexCode.toUpperCase();

        if (hexCode.length() != 6) {
            System.out.println("エラー: '" + hexCode + "' は有効な6桁の16進数コードではありません。");
            return null;
        }
        
        try {
            // 2桁ずつ区切り、基数16として10進数に変換
            int r = Integer.parseInt(hexCode.substring(0, 2), 16);
            int g = Integer.parseInt(hexCode.substring(2, 4), 16);
            int b = Integer.parseInt(hexCode.substring(4, 6), 16);

            System.out.println("Hex '#" + hexCode + "' -> RGB(" + r + ", " + g + ", " + b + ")");
            return new int[]{r, g, b};
        } catch (NumberFormatException e) {
            System.out.println("エラー: '" + hexCode + "' に無効な16進数文字が含まれています。");
            return null;
        }
    }

    public static void main(String[] args) {
        System.out.println("--- RGBから16進数へ ---");
        rgbToHex(255, 0, 0);
        rgbToHex(0, 128, 255);
        
        System.out.println("\n--- 16進数からRGBへ ---");
        hexToRgb("#FF0000");
        hexToRgb("0080FF");
        hexToRgb("#B432FF");
    }
}

C++ RGB ↔ Hex 変換サンプル

C
// RGB (10進数) と 16進数カラーコード (#RRGGBB) の双方向変換を行うC++コード
#include <iostream>
#include <sstream>
#include <iomanip>
#include <string>

// 10進数成分を2桁の16進数に変換し、ゼロ埋めと大文字化を行うヘルパー関数
std::string componentToHex(int c) {
    if (c < 0 || c > 255) return "XX";
    
    std::stringstream ss;
    // std::hex: 16進数表示
    // std::uppercase: 大文字
    // std::setw(2): 2桁
    // std::setfill('0'): 0埋め
    ss << std::hex << std::uppercase << std::setw(2) << std::setfill('0') << c;
    return ss.str();
}

// 3つの10進数RGB値 (0-255) を16進数カラーコード (#RRGGBB) に変換します。
std::string rgbToHex(int r, int g, int b) {
    std::string hex_code = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    std::cout << "RGB(" << r << ", " << g << ", " << b << ") -> " << hex_code << std::endl;
    return hex_code;
}

// 16進数カラーコード (#RRGGBB) を10進数RGB値 {r, g, b} の配列に変換します。
// 戻り値は3要素の配列で、エラー時は{-1, -1, -1}
std::tuple<int, int, int> hexToRgb(const std::string& hex_code) {
    std::string hex_part = hex_code.starts_with("#") ? hex_code.substr(1) : hex_code;

    if (hex_part.length() != 6) {
        std::cerr << "エラー: '" << hex_code << "' は有効な6桁の16進数コードではありません。" << std::endl;
        return {-1, -1, -1};
    }

    try {
        // 2桁ずつ区切り、std::stoulで基数16として10進数に変換
        int r = std::stoul(hex_part.substr(0, 2), nullptr, 16);
        int g = std::stoul(hex_part.substr(2, 2), nullptr, 16);
        int b = std::stoul(hex_part.substr(4, 2), nullptr, 16);

        std::cout << "Hex '" << hex_code << "' -> RGB(" << r << ", " << g << ", " << b << ")" << std::endl;
        return {r, g, b};
    } catch (const std::exception& e) {
        std::cerr << "エラー: '" << hex_code << "' に無効な16進数文字が含まれています。(" << e.what() << ")" << std::endl;
        return {-1, -1, -1};
    }
}

int main() {
    std::cout << "--- RGBから16進数へ ---" << std::endl;
    rgbToHex(255, 0, 0);
    rgbToHex(0, 128, 255);
    rgbToHex(15, 15, 15);

    std::cout << "\n--- 16進数からRGBへ ---" << std::endl;
    hexToRgb("#FF0000");
    hexToRgb("0080FF");
    hexToRgb("#0F0F0F");
    
    return 0;
}

変換方法の比較とカラーコードの応用

RGB 16 進数 変換には、一般的な6桁表記以外にも、表現のバリエーションが存在します。

3桁表記(#RGB)と6桁表記(#RRGGBB)の比較

特徴6桁表記(例: #A3E7C93桁表記(例: #ACE
形式#R1R2G1G2B1B2#RGB
表現力(1677万色を表現可能)(各成分は 00,11,…,FF の16種類のみ)
展開ルール変化なし各桁を複製して6桁に展開(例: #ACE#AACC EE
用途ほとんどすべての色指定、標準的な記述ウェブ上での簡略表記、CSSのショートハンド

RGBA(透明度)と16進数(#RRGGBBAA)

CSSでは、RGBA表記(Red, Green, Blue, Alpha=透明度)も使用されます。

  • RGBAでは、透明度(Alpha)を0.0(完全透明)から1.0(完全不透明)の10進数で指定します。
  • 16進数でも透明度を表現でき、これは8桁表記**#RRGGBBAA**となります。最後の2桁(AA)が透明度を示し、00が0%、FFが100%(不透明)に対応します。
16進数表記意味
#FF0000純粋な赤(不透明)
#FF000080純粋な赤(50%透明)

よくある質問(FAQ)

Q1: 16進数カラーコードの「#」は何を意味しますか?

A: シャープ記号(#)は、その後に続く文字列が16進数のカラーコードであることを示すための単なるプレフィックス(接頭辞)です。HTMLやCSSの規格で定められており、プログラムが文字列を色コードとして正しく解釈するために使用されます。

Q2: 3桁表記と6桁表記の違いは?

A: 3桁表記(例:#369)は、各成分の桁が同じ値を持つ色を短く記述するためのショートハンドです。これは必ず6桁表記に展開されます(例:#369#336699)。3桁表記では表現できる色の種類が大きく制限されますが、コードの記述量を減らすのに役立ちます。

Q3: 16進数#FFFFFF#000000は何色ですか?

A:

  • #FFFFFF: R, G, Bのすべての成分が最大値(255)であり、**白(White)**を表します。
  • #000000: R, G, Bのすべての成分が最小値(0)であり、**黒(Black)**を表します。

まとめ:RGB 16進数変換をマスターしてデザインを加速させよう

RGB 16 進数 変換は、デジタルの「色」を数値として扱い、プログラミングで制御するための基本的な技術です。

本記事で提供した各言語の変換関数は、10進数 ↔ 16進数という基数変換の仕組みを、色の指定という具体的な応用例で実装したものです。これらのコードをプロジェクトに活用し、色の管理や操作の効率を上げ、より表現豊かなデジタル体験を創り出してください。

当サイトのカラーコード変換ツールも活用して、RGBと16進数の変換を簡単に行い、理解を深めてください!