カラーホイール
インタラクティブな色相環でハーモニーを探り、バランスの良いパレットを作れます。
今すぐ試すHEXをRGBに変換：カラーコードコンバーター
16進数のコードを入力または貼り付けると、CSSにそのままコピーできるRGB値がすぐに得られます。HSL、CMYK、LABなどの形式も表示。逆方向の変換もできます。
#
#2C71DErgb(44, 113, 222)
RGBチャンネル
- 赤2C → 44
- 緑71 → 113
- 青DE → 222
または色を見ながら選ぶ
カラー変換
HEX→RGB カラー表
よく調べられる色の16進数コードとRGB値です。クリックするとコンバーターに読み込まれます。
| 色 | HEX | RGB |
|---|---|---|
| #FFFFFF | rgb(255, 255, 255) | |
| #000000 | rgb(0, 0, 0) | |
| #FF0000 | rgb(255, 0, 0) | |
| #00FF00 | rgb(0, 255, 0) | |
| #0000FF | rgb(0, 0, 255) | |
| #FFFF00 | rgb(255, 255, 0) | |
| #00FFFF | rgb(0, 255, 255) | |
| #FF00FF | rgb(255, 0, 255) | |
| #FFA500 | rgb(255, 165, 0) | |
| #800080 | rgb(128, 0, 128) | |
| #FFC0CB | rgb(255, 192, 203) | |
| #A52A2A | rgb(165, 42, 42) | |
| #808080 | rgb(128, 128, 128) | |
| #C0C0C0 | rgb(192, 192, 192) | |
| #000080 | rgb(0, 0, 128) | |
| #808000 | rgb(128, 128, 0) |
HexカラーをRGBに変換する方法
Hexコードは6文字で、3つのペアに分かれています。赤、緑、青にそれぞれ1ペアです。各ペアは16進数（0〜9の数字とA〜Fの文字）の数で、これを10進数（0〜255）に変換するとRGB値が得られます。
たとえば、E65817という色は次のように分解されます：
- E6230赤
- 5888緑
- 1723青
rgb(230, 88, 23)結果はrgb(230, 88, 23)です。各チャンネルの値が高いほど、最終的な混色でその色が強くなります。
- E6 = 14 × 16 + 6 = 230
- 58 = 5 × 16 + 8 = 88
- 17 = 1 × 16 + 7 = 23
計算式をステップごとに
16進数では、各ペアの1文字目は2文字目の16倍の重みがあります。1文字目に16を掛けて、2文字目を足します。文字の値はA = 10、B = 11、C = 12、D = 13、E = 14、F = 15です。
CSSで使えるHEXとRGBの形式
同じ色でもさまざまな書き方があります。どれも現在のブラウザで動作し、コンバーターはすべての形式を理解します。
6桁のHEX
最も一般的な形式。赤・緑・青の順に、チャンネルごとに2文字です。大文字でも小文字でもかまいません。
短縮HEX（3桁）
各ペアが同じ文字の繰り返しなら短縮できます：
#FF6600は#F60と書けます。透明度付きHEX（8桁）
最後の2文字はアルファチャンネルです：
00は透明、FFは不透明。80は50%に相当します。カンマ区切りのrgb()
古典的な構文で、どのブラウザでも動作します。各チャンネルは0〜255です。
モダンなrgb()
CSS Color 4の構文：値をスペースで区切り、スラッシュの後に透明度を任意で指定します。
rgba()もエイリアスとして引き続き使えます。
Hexから調和のとれたパレットへ
よくある質問
Hexコードの各文字ペアは、16進数でそれぞれのチャンネル（赤・緑・青）を表します。各ペアを10進数に変換すると、そのチャンネルの0〜255の数値が得られ、3つ合わせてRGB値になります。
3つの色チャンネル（赤・緑・青）それぞれに2文字が必要で、16進数の各ペアはRGBと同じ256通りの値を表せるからです。
16進数では、0〜9の数字とA〜Fの文字を使って10〜15の値を表します。そのため、E65817のように数字と文字が混ざることがあります。
はい。RGBからHexへのコンバーターを使えば逆の変換ができます。3つのRGB値を入力すると、対応する16進数コードが得られます。
各ペアが同じ文字の繰り返しのときに使える短縮形です：#F60は#FF6600、#FFFは#FFFFFFと同じです。コンバーターはどちらも受け付けます。
末尾にアルファチャンネルとして2文字を追加します。#E6581780は同じオレンジの不透明度50%です。00は完全に透明、FFは不透明です。
現在は実質的に違いはありません。モダンなCSSではrgb()もrgb(230 88 23 / 50%)のように透明度を受け付け、rgba()は互換性のためのエイリアスとして残っています。