HEXからRGBへ変換

Q: 「ヘックス」とは何の略ですか？

「Hex」 は16 進数の略で、0 ～ 9 の数字と a ～ f の文字を使用する Base16 の番号付けシステムです。 カラー コードでは、RGB が同じデータに使用する Base10 数値とは異なり、16 進数は 3 つのチャネル値を 1 つのコンパクトな文字列にパックします。

Q: 16 進数から RGB 値を自動的に表示するデザイン ツールはどれですか?

Figma、Adobe Photoshop、および Sketch はすべて、スウォッチを選択した瞬間に、カラー パネルに 16 進数とともに rgb を表示します。 ブラウザ DevTools は、 任意の要素の計算されたカラーに対して同様の処理を実行し、別の手順を実行せずにその場で 16 進数を変換します。

Q: 16 進数を RGB に変換するときに起こりやすい間違いは何ですか?

16 進文字を単純な数字として読み取ることは、最も頻繁に起こる間違いです。ペア7B は7×16 + 1 ではなく7 × 16 + 11 = 123です。 3 桁の短縮表記を誤って展開することは、もう 1 つの典型的なエラーです。#f0c は #f0c000 ではなく #ff00cc になります。 8 桁のコードも、最後のペアを青チャネルの一部としてではなく、アルファとして扱う必要があります。

Q: RGB を 16 進数に変換するにはどうすればよいですか?

プロセスを逆にします。 3 つの 10 進数のチャネル値をそれぞれ 2 桁の 16 進数のペア に変換し、16 未満の値にはゼロを埋め込み、その 3 つのペアをポンド記号の後ろでつなぎます。 rgb(51, 102, 255) は、同じ基数 10 から基数 16 への逆算を使用して #3366ff になります。または、RGB から HEX コンバータを通じて実行することもできます。

Q: 一部のプラットフォームではデフォルトで 16 進数が使用され、他のプラットフォームでは RGB が使用されるのはなぜですか?

デザイン ツールはコンパクトでファイル間でコピーしやすいため、デフォルトでは 16 進数が使用されます。 ブラウザや getComputedStyle などの JavaScript API は、レンダリング エンジンが既に動作している数値チャネルに直接マッピングされる形式であるため、色を rgb として返します。

Q: 16 進数から RGB への変換はすべてのソフトウェアとブラウザにわたって一貫していますか?

はい。すべての主要なブラウザは、同じ CSS カラー モジュール レベル 4 ルールを使用して hex と rgb を解析します。そのため、変換には解釈の余地がないため、#3366ff は Chrome、Firefox、Safari で同様に同じチャネル値に解決されます。

HEX → RGB

HEX

変換結果rgb(255, 128, 0)

#FF8000

HEX→RGB変換ツールで、16進カラーコードをRGB値にすぐ変換できます。デザイナーや開発者に向けた、見やすく使いやすいモダンなツールです。

最終更新日: 2026 年 9 月 23 日

機能

リアルタイム変換 - HEX コードを入力すると、すぐに RGB 値を取得します。
ビジュアルカラープレビュー - ダイナミックシャドウ付きのグラデーションカードに表示されるカラーを確認します。
カラーピッカーの統合 - クリックして視覚的に色を選択します
40 のプリセットカラー - 人気の色にすばやくアクセス
クリップボードにコピー - ワンクリックで HEX 値と RGB 値の両方をコピーします。
個々の RGB の内訳 - 赤、緑、青のコンポーネントを個別に表示します。
入力検証 - 3 桁 (#RGB) と 6 桁 (#RRGGBB) の両方の形式を処理します。
レスポンシブデザイン - モバイルとデスクトップでシームレスに動作します。

用途

以下に最適:

設計仕様を変換する Web 開発者
さまざまなカラーフォーマットを扱うグラフィックデザイナー
CSS スタイルとテーマの作成
クイックカラーリファレンス検索
色彩理論とRGB合成を学ぶ

HEX から RGB コンバーターとは何ですか?

HEX to RGB コンバータは、16 進数のカラーコードを取得して、それを赤、緑、青のチャネル値に変換する小さなユーティリティです。

#3366ff のようなものを入力すると、数秒以内に rgb(51, 102, 255) が返されます。

ここでの差別化機能はスピードです。 16 進数から 10 進数までの計算を手作業で行う代わりに、このツールは通常、入力すると更新されるライブカラー見本を使用して、即座に演算を実行します。

ツールのほとんどのバージョンには、いくつかの特徴があります。

16 進値のテキストフィールド (先頭のシャープ記号の有無にかかわらず)
一致する赤、緑、青の数字を示す出力領域
コードを編集すると更新されるライブプレビュースウォッチ
結果を直接取得するためのコピーボタン

開発者は、色をデザインファイルからスタイルシートに移動するときに、常にこれらのツールに手を伸ばします。

ほとんどのスタイルシート (EN) では 16 進数がデフォルトの形式ですが、多くの場合、スクリプトやアニメーションライブラリでは代わりに rgb が必要になります。

「コーンフラワーブルー」のように、コードではなく名前から始める場合は、名前付きの色を検索するために構築された別のツールを使用すると、その方向に適しています。

HEX と RGB: 2 つのカラー形式の違いは何ですか?

Hex と rgb は、2 つの異なるカウントシステムを使用してまったく同じ色を表します。

Hex は、base16 で書かれた 1 つの 6 文字の文字列に色をパックします。 RGB は、チャネルごとに 1 つずつ、3 つの個別の Base10 数値を記述します。

特性	16進数	RGB	アルファサポート
形式	#3366ff	rgb(51, 102, 255)	4 桁または 8 桁の 16 進数が必要です
基数	Base16 (0 ～ f)	Base10 (0 ～ 255)	該当なし
主な用途	スタイルシート、デザインツール	スクリプト、動的値	rgba() に組み込まれています

どちらの表記法も、ブラウザが解析するとsRGB色空間内の同じ点を表します。

Hex は、スタイルシートやデザインツールのスウォッチに常に表示されます。 CSS がその役割を引き継ぐずっと前に、古い HTML (EN) の色属性も直接受け入れていました。

反対方向に進むことも同様に一般的です。すでに rgb 値があり、同等の 16 進数が必要な場合は、専用のrgb から 16 進数へのコンバータがその交換を処理します。

HEX から RGB への変換はどのように機能しますか?

16 進数から RGB への変換では、6 桁の 16 進数コードが 3 つの 2 桁のペアに分割され、各ペアが Base16 から Base10 に変換されます。

#3366FF を実際の例として取り上げます。

赤のペア: 16 進数の 33 は 10 進数の 51 に相当します。

緑のペア: 16 進数の 66 は 10 進数の 102 に相当します。

青のペア: 16 進数の FF は 10 進数の 255 に相当します。

これら 3 つの結果を組み合わせると、rgb(51, 102, 255) が得られます。これは、同じ色が別の方法で書かれたものです。

16 進数が存在するのは、主に 2 つの 16 進数が正確に 1 バイトにマップされるためです。そのため、00 ～ FF は 0 ～ 255 と完全に一致し、変換で何も失われることはありません。

各チャネルは、ギャップや丸めなしで 0 から 255 までの 256 個の値を保持できます。

コンバーターはどの HEX 入力フォーマットを受け入れますか?

16 進数から rgb へのコンバーターは、通常、3 桁の短縮表記と完全な 6 桁の文字列という 2 つの長さの 16 進コードを受け入れます。

CSS カラーモジュールレベル 4 (EN) 仕様 (W3C) では、16 進カラー構文は 3、4、6、または 8 桁の 16 進数を受け入れ、余分な桁はアルファ透明度のために予約されていると定義されています。このコンバータは、3 桁と 6 桁の 2 つの不透明形式を受け取ります。

3 桁の 16 進数の短縮表記

簡単な注記:

各桁を 2 倍にして完全な形式に展開します
#f0c は #ff00cc になります
手書きの CSS で一般的で、主に速度向上のため

すべての色がこのショートカットに適しているわけではありません。この方法で短縮できるのは、各チャンネルの 2 桁が繰り返される色のみです。

6 桁のフル 16 進数

6 桁の 16 進数は、倍加や推測を必要とせずに、色の完全で明確なバージョンを示します。

これは、ほとんどのデザインツールがデフォルトでエクスポートする形式であり、ほとんどのコンバータが標準入力として期待しているものです。

ここでは大文字と小文字は関係ありません。 #FF00CC と #ff00cc は同じ色を指します。

RGB、RGBA、HSL: HEX から RGB コンバーターは何を出力できますか?

多くのコンバーターはプレーンなRGBにとどまりません。また、出力オプションとしてRGBA、HSL、場合によっては HSV も提供します。これは、単純な rgb() 値と、個別の赤、緑、青の数値に焦点を当てています。

RGB および RGBA 出力

標準の rgb 出力は、コンマで区切られた 3 つの整数である rgb(51, 102, 255) のようになります。

4 番目の値を追加すると、RGBA が得られます。これは、透明度のアルファチャネルを追加します: rgba(51, 102, 255, 0.5)。

ブラウザの互換性データを使用できますか (EN)によると、同じアルファ値にマッピングされる 8 桁の 16 進数の短縮表記のブラウザサポートは、Firefox 49 (2016) と Chrome 62 (2017) で導入されました。

この出力が最も重要になるのは、色がグラデーション (EN)内に収まり、シャープに切り取られるのではなく端でフェードする必要がある場合です。

HSL および HSV 出力

HSL は色を色相、彩度、明度に分解します。
HSV (HSB とも呼ばれます) は、明度を明るさと交換します。
どちらも、生の RGB 数値よりも人間の目で調整するのが簡単です。

デザイナーは、3 つの個別のチャネル値を手動で再計算せずに色を明るくしたり暗くしたい場合に HSL を好むことがよくあります。

ワークフローが rgb で開始され、代わりに HSL に移行する必要がある場合、その個別の変換は、ここで説明する 16 進数から rgb への計算ではなく、独自の式で実行されます。

HEX から RGB への変換はどの程度正確ですか?

16 進数から RGB への変換は、標準の 3 桁および 6 桁のコードに対して正確に行われます。

各 2 桁の 16 進数のペアは 0 ～ 255 の間の 1 つの整数に正確にマップされるため、丸めは必要ありません。

四捨五入は、コンバーターが 8 桁コードから HSL、HSV、または 10 進アルファ値を計算する場合にのみ表示されます。これは、必ずしも整数になるとは限らない除算が含まれるためです。たとえば、CC は 255 のうちの 204、または rgba() アルファとして 0.8 です。

主要な数値:

カラーチャネルごとに 256 の可能な値があり、合計 16,777,216 の RGB の組み合わせが得られます。
sRGB のリファレンスディスプレイは、IEC 61966-2-1 (1999) 規格に従って、公称ガンマ 2.2 を使用します。
アルファ値は、10 進数として 0 ～ 1、またはパーセンテージとして 0% ～ 100% です。
16 進アルファ表記は同じ 0 ～ 255 の範囲に直接マッピングされ、base16 で記述されています。

ガンマ補正により、画面上での色の表現が変わります。変換自体が生成する数値には影響しません。

これらは 2 つの別々のステップであり、これらを混同することは、色の計算に慣れていない人にとってよくある混乱の原因です。

CSS やデザイン作業で HEX と RGB をいつ使用する必要がありますか?

短い静的な値の場合は 16 進数が優先されます。透明度または動的な値が画像に入った瞬間に、RGB と RGBA が優先されます。

ソリッドなブランドカラーが満載のスタイルシートは、16 進数で読みやすく、入力が短く、スキャンも速くなります。

JavaScript を使用して要素をフェードしたり、背景とブレンドしたり、不透明度をアニメーション化したりする必要がある場合、RGBA がより実用的な選択となります。RGBA は、アルファ値を色そのものから分離するためです。

デザインシステムのデフォルト:

ほとんどのデザインツールは、デフォルトでスウォッチを 16 進数としてエクスポートします。
Tailwind (EN) などのユーティリティフレームワークは、16 進数で定義されたカラーパレット全体を出荷します。
コンポーネントライブラリは多くの場合、ホバー状態やオーバーレイのためにこれらの 16 進値を内部的に rgba に変換します。

16 進数はスタイルシートに限定されません。これは、CSS とまったく同じ 6 桁のルールに従う SVG の塗りつぶし属性とストローク属性 (EN)にも同じくらい頻繁に表示されます。

設計者と開発者の間できれいに移動する必要がある静的なものには 16 進数を選択してください。カラーをフェード、ブレンド、またはインタラクションに応答する必要がある瞬間に、rgb または rgba を選択します。

HEX から RGB への変換方法の比較: オンラインツール、コード、手動計算

16 進数コードを RGB 値に変換するには 4 つの実際的な方法があり、それぞれが異なる状況に適合します。

方法	速度	必要なツール	最適な用途
手動計算	最も遅い	なし	数学を学ぶ
ブラウザ開発ツール	速い	ブラウザに組み込まれている	簡単な 1 回限りのチェック
オンラインコンバータツール	最速	インターネット接続	コード不要のワークフロー
コードベースの変換	高速、再現可能	スクリプトまたはライブラリ	自動化、一括変換

手動計算

手動で変換を行うということは、ソフトウェアにまったく依存せず、紙の上または頭の中で 16 進数から 10 進数までの計算を行うだけであることを意味します。

長所:

どこでも作業可能、ツールや接続は不要
カラーモデルがどのように機能するかを実際に理解します。

短所:

単色以外では遅い
時間に追われても簡単に算数を計算できる

ブラウザ開発ツール

Chrome、Edge、Firefox DevTools のカラーピッカーは、[スタイル] パネルのカラー見本から開きます。 Shift キーを押しながらスウォッチをクリックすると、値が hex、rgb、hsl の間で切り替わり、内蔵のスポイトがページ上の任意のピクセルをサンプリングします。

長所:

すでにインストールされているため、追加でダウンロードするものはありません
ライブページから直接色を読み取ります

短所:

ページ上の要素にすでに適用されている色にのみ機能します
大量のコードを一度に変換するようには構築されていない

Web アプリ内の色をサンプリングするために、バージョン 95 以降の Chromium ブラウザでは、選択した色を 16 進文字列として返す EyeDropper API (EN) も公開しています。

オンラインコンバータツール

提供するもの:

インストール手順なしですぐに結果が得られます
数値の横にあるライブプレビューのスウォッチ
通常は無料、出力用のコピーボタンあり

読み込みにはインターネット接続が必要で、ほとんどの場合、パレット全体ではなく、一度に 1 色ずつ変換するのが限界です。

コードベースの変換

数色以上の色を処理する必要がある場合には、変換をスクリプトに記述するのが合理的です。

たとえば、Python の Pillow イメージングライブラリは 1 回の呼び出しで変換を処理します。ImageColor.getrgb("#3366ff") は (51, 102, 255) を返します。

長所: 反復可能、スクリプト可能、大規模なビルドパイプライン内で動作します。

短所: 基本的なコーディングの知識と、それを実行するための作業環境が必要です。

HEX から RGB への変換はカラーアクセシビリティにどのような影響を与えますか?

ほとんどのコントラストチェック式は 16 進数の文字列ではなく 10 進数のチャネル値を中心に記述されているため、16 進数から RGB への変換はアクセシビリティにとって重要です。

WCAG 達成基準 1.4.3 (EN) では、背景に対する通常のテキストの最小コントラスト比を 4.5:1、大きなテキストの場合は 3:1 に設定しています。

計算は 0 から 255 までの数値で行われるため、そこに到達するには、通常、テキストの色と背景の両方の RGB 値をその数式で実行する必要があります。

低コントラストのテキストは、依然として Web 上で最も一般的なアクセシビリティ障害であり、WebAIM Million 2024 レポート (EN)によると、ホームページの 81% で見つかりました。

いくつかの習慣により、16 進値と RGB 値がアクセシビリティの問題にならないようにします。

カラーコントラストチェッカー (EN)などのツールを使用して、最終的なペアリングを確定した後ではなく、確定する前にカラーコントラスト (EN)比をチェックしてください。
16進表記ではタイプミスを見落としやすいため、16進カラーコードと変換後のrgb形式の両方を確認してください。
文書化されたパレットを保管し、同じアクセス可能な値を毎回再作成するのではなく再利用できるようにします。

最初から事前に精査された組み合わせが必要なチームは、事後に色を 1 つずつテストするのではなく、アクセス可能なカラーパレットジェネレーターに頼ることがよくあります。

HEX から RGB コンバーターが適用されないのはどのような場合ですか?

16 進数から RGB へのコンバーターは、分割して変換する 16 進数文字列がないため、「トマト」や「レベッカパープル」などの名前付き CSS カラーを処理することはできません。

CSS カラーモジュールレベル 4 仕様 (W3C) では 148 個の名前付きカラーキーワードが定義されており、各キーワードは変換によって導出されるのではなく、仕様自体の固定 rgb 値にマップされます。

Rebeccapurple は、そのリストの新しいエントリの 1 つであり、計算によってではなく、Web 標準の提唱者である Eric Meyer の娘を追悼して追加されました。

他にも、変換の対象外となる状況がいくつかあります。

広色域またはディスプレイ P3 カラー。16 進数と RGB の両方が想定する sRGB 空間の外に存在します。
印刷用の CMYK 値。まったく異なる 4 チャネルモデルを使用します。
桁数が間違っているか、無効な文字を含む不正な 16 進文字列。ほとんどのコンバータはこれらを単純に拒否します。
値がネイティブに rgb として保存されているファイルを設計するため、変換ステップが冗長になります

これらはいずれもツール自体の障害ではありません。これらは、ツールが処理できるように構築されていない単なる入力です。

HEX を RGB に手動で段階的に変換するにはどうすればよいですか?

16 進数コードを手動で RGB に変換するには、色に関係なく、毎回同じ 4 つの手順に従います。

先頭の # 記号を削除し、6 つの 16 進数文字を残します (最初に各桁を 2 倍にして 3 桁のコードを展開します)。
これらの文字を赤、緑、青の 3 つのペアに分割します。
各ペアを基数 16 から基数 10 に変換します。最初の桁に 16 を掛けて、2 番目の桁を加算します。
3 つの結果を rgb (赤、緑、青) として配置します。

これらの手順で #a94442 を実行すると、赤では a9、緑では 44、青では 42 が得られます。

変換すると、169 (10 × 16 + 9)、68 (4 × 16 + 4)、66 (4 × 16 + 2) となり、最終的な値は rgb(169, 68, 66) となります。

最も一般的な間違いは変換ステップで発生し、人々は 16 進文字 a ～ f が 10 進数値 10 ～ 15 を表すことを忘れてしまいます。

コード内で HEX を RGB に変換するにはどうすればよいですか?

JavaScript

JavaScript (EN) は、カスタム式ではなく組み込み関数を使用して変換を処理します。

parseInt(hex.substring(1, 3), 16) は、16 進数文字列から赤色のペアを取り出し、それをそのまま 10 進数に変換します。

キャラクター 3 から 5 および 5 から 7 に対してこの呼び出しを繰り返すと、緑と青がカバーされます。

よくある間違い: 文字列内に # が残っている間にインデックス 0 からスライスします。 parseInt("#3", 16) は NaN を返すため、最初に # を削除するか、上に示したようにインデックス 1 からスライスを開始します。

Python

int(hex_string[1:3], 16) は、JavaScript バージョンと同じロジックをミラーリングします。
組み込みの colorsys モジュールは、10 進値がすでに得られている場合、rgb、hls、および hsv 間の変換を処理します。
Pillow 上に構築された画像ライブラリは、ファイル内のすべてのピクセルにこれと同じ計算を適用します。

Python のアプローチは、インデックスによる文字列のスライスが言語自体に組み込まれているため、もう少し平易な英語に似ています。

CSS カスタムプロパティ

カスタムプロパティ (一般に CSS 変数と呼ばれます) を使用すると、色を一度定義すると、スタイルシート全体でそれを再利用できます。

他の場所でその 1 つの変数を参照すると、ブランドカラーを手動で更新するためにスタイルシートを検索する手間が削減されます。

典型的なパターン:

16 進値を 1 回定義します (例: --brand-color: #3366ff)。
必要に応じて var(--brand-color) を使用して参照します。
実際に透明性が必要な場合にのみ rgba() に変換します。

これにより、16 進数から RGB への変換ステップが、ファイル全体に散在するのではなく、本当に 10 進形式が必要な少数の場所に分離されます。

よくある質問：HEXからRGBへ変換

「ヘックス」とは何の略ですか？

「Hex」は16 進数の略で、0 ～ 9 の数字と a ～ f の文字を使用する Base16 の番号付けシステムです。

カラーコードでは、RGB が同じデータに使用する Base10 数値とは異なり、16 進数は 3 つのチャネル値を 1 つのコンパクトな文字列にパックします。

16 進数から RGB 値を自動的に表示するデザインツールはどれですか?

Figma、Adobe Photoshop、および Sketch はすべて、スウォッチを選択した瞬間に、カラーパネルに 16 進数とともに rgb を表示します。

ブラウザ DevTools は、任意の要素の計算されたカラーに対して同様の処理を実行し、別の手順を実行せずにその場で 16 進数を変換します。

16 進数を RGB に変換するときに起こりやすい間違いは何ですか?

16 進文字を単純な数字として読み取ることは、最も頻繁に起こる間違いです。ペア7B は7×16 + 1 ではなく7 × 16 + 11 = 123です。

3 桁の短縮表記を誤って展開することは、もう 1 つの典型的なエラーです。#f0c は #f0c000 ではなく #ff00cc になります。 8 桁のコードも、最後のペアを青チャネルの一部としてではなく、アルファとして扱う必要があります。

RGB を 16 進数に変換するにはどうすればよいですか?

プロセスを逆にします。 3 つの 10 進数のチャネル値をそれぞれ 2 桁の 16 進数のペア に変換し、16 未満の値にはゼロを埋め込み、その 3 つのペアをポンド記号の後ろでつなぎます。

rgb(51, 102, 255) は、同じ基数 10 から基数 16 への逆算を使用して #3366ff になります。または、RGB から HEX コンバータを通じて実行することもできます。

一部のプラットフォームではデフォルトで 16 進数が使用され、他のプラットフォームでは RGB が使用されるのはなぜですか?

デザインツールはコンパクトでファイル間でコピーしやすいため、デフォルトでは 16 進数が使用されます。

ブラウザや getComputedStyle などの JavaScript API は、レンダリングエンジンが既に動作している数値チャネルに直接マッピングされる形式であるため、色を rgb として返します。

16 進数から RGB への変換はすべてのソフトウェアとブラウザにわたって一貫していますか?

はい。すべての主要なブラウザは、同じ CSS カラーモジュールレベル 4 ルールを使用して hex と rgb を解析します。そのため、変換には解釈の余地がないため、#3366ff は Chrome、Firefox、Safari で同様に同じチャネル値に解決されます。

HEX から RGB コンバーターを使用した後、次に何を変換する必要がありますか?

16 進数から RGB コンバーターは、16 進数コードが 3 つの 10 進数のチャネル値になった瞬間にジョブを終了し、色空間の変換、コントラストの検証、および印刷準備が整った形式が一般的なカラーワークフローの次のタスクとして残されます。

これらのステップは、それぞれがその前のステップの結果を元に戻すことができるため、固定順序で行うのが最も効果的です。

色がまだ変動している間に、最初に HSL 調整を行います (RGB から HSL コンバータはここから値を取得します)。
色合いが落ち着いたら、次にコントラストをチェックします
CMYK 変換は最後に行われます (印刷製本アセットのみ)

コントラストチェック後に明度を調整すると、通過するペアが静かに 4.5:1 未満に押し戻される可能性があるため、調整した色を再確認してください。

カラーを 16 進数で保存し、スクリプトで数値が必要な場合にのみ RGB に変換すると、レンダリング時にコストがかからずにスタイルシートがコンパクトに保たれます。

印刷チームは通常、同じ計算をさらに一歩進めて、オフセット印刷またはデジタル印刷用に同じ RGB 値を CMYK 値に変換します。 RGB と CMYK (EN) の内訳は、この 2 つが正確に一致することがほとんどない理由を説明しています。

機能

用途