このツールは …回 使われています。
コンピュータには便利でも、人にはちょっとピンとこない 16進数カラーコード。
このツールなら、RGBの数値とカラーコードをその場で相互変換でき、よく使う色はクリックひとつでコピーできます。
- カラーコードを今すぐ調べたい
- 色見本からコードをコピーしたい
RGB値 ⇔ 16進数カラーコード 自動変換
R / G / B に 0〜255 の数値（半角）を入れると、カラーコードと色見本が表示されます。逆に、カラーコード（3桁または6桁）を入れると RGB の値が求められます。
16進数カラーコードって、なに？
HTMLやCSSで色を指定するときに使う、「#」＋6つの英数字で表すコードです（例：#FF0088）。中身はとてもシンプルで、RGBの数値を16進数に置き換えて並べているだけです。
変換のしくみ（例：R 255 / G 0 / B 136）
まずは光の三原色 R・G・B の数値からスタート。
それぞれを2桁の16進数へ変換。1桁になるときは頭に 0 を足して2桁にそろえます。
R → G → B の順につなげて、頭に「#」をつければ完成です。
そもそも何の数字？
画面の色は R(赤)・G(緑)・B(青) の光の組み合わせ。それぞれ 0〜255 の256段階で、合わせて約1,680万色を表現できます。
3桁に省略できることも
「FF0088」のように2桁が同じ文字でそろう色は、#F08 のように3桁でも書けます（例：#FFFFFF → #FFF）。
人は RGB の数値の方が色をイメージしやすく、機械はコードの方が扱いやすい。だから両方を行き来できると便利、というわけですね。RGB や CMYK の違いは こちらの記事 でくわしく解説しています。
色名から探すカラーコード早見表｜白・黒・赤・青・緑（クリックでコピー）
よく使う代表色のカラーコードとRGB値を色名ごとにまとめました。色をクリックまたはタップすると、その色のカラーコードをコピーできます。
色を視覚的に選びたい場合や、HSL・CMYK 形式・もっと多くの色から探したい場合は、216色をそろえたカラーピッカー付きの Web色見本帳 が便利です。
白・グレー
ffffff
rgb(255, 255, 255)
fafafa
rgb(250, 250, 250)
f5f5f5
rgb(245, 245, 245)
f0f0f0
rgb(240, 240, 240)
dddddd
rgb(221, 221, 221)
黒
000000
rgb(0, 0, 0)
888888
rgb(136, 136, 136)
222222
rgb(34, 34, 34)
aaaaaa
rgb(170, 170, 170)
444444
rgb(68, 68, 68)
cccccc
rgb(204, 204, 204)
666666
rgb(102, 102, 102)
eeeeee
rgb(238, 238, 238)
赤
ff0000
rgb(255, 0, 0)
ff4040
rgb(255, 64, 64)
ff8080
rgb(255, 128, 128)
ffbfbf
rgb(255, 191, 191)
オレンジ
ff8000
rgb(255, 128, 0)
ff9f40
rgb(255, 159, 64)
ffbf80
rgb(255, 191, 128)
ffdfbf
rgb(255, 223, 191)
黄
ffff00
rgb(255, 255, 0)
ffff40
rgb(255, 255, 64)
ffff80
rgb(255, 255, 128)
ffffbf
rgb(255, 255, 191)
黄緑
80ff00
rgb(128, 255, 0)
9fff40
rgb(159, 255, 64)
bfff80
rgb(191, 255, 128)
dfffbf
rgb(223, 255, 191)
緑
00ff00
rgb(0, 255, 0)
40ff40
rgb(64, 255, 64)
80ff80
rgb(128, 255, 128)
bfffbf
rgb(191, 255, 191)
青緑
00ff80
rgb(0, 255, 128)
40ff9f
rgb(64, 255, 159)
80ffbf
rgb(128, 255, 191)
bfffdf
rgb(191, 255, 223)
水色
00ffff
rgb(0, 255, 255)
40ffff
rgb(64, 255, 255)
80ffff
rgb(128, 255, 255)
bfffff
rgb(191, 255, 255)
緑青
0080ff
rgb(0, 128, 255)
409fff
rgb(64, 159, 255)
80bfff
rgb(128, 191, 255)
bfdfff
rgb(191, 223, 255)
青
0000ff
rgb(0, 0, 255)
4040ff
rgb(64, 64, 255)
8080ff
rgb(128, 128, 255)
bfbfff
rgb(191, 191, 255)
紫
8000ff
rgb(128, 0, 255)
9f40ff
rgb(159, 64, 255)
bf80ff
rgb(191, 128, 255)
dfbfff
rgb(223, 191, 255)
ピンク
ff00ff
rgb(255, 0, 255)
ff40ff
rgb(255, 64, 255)
ff80ff
rgb(255, 128, 255)
ffbfff
rgb(255, 191, 255)
ショッキングピンク
ff0080
rgb(255, 0, 128)
ff409f
rgb(255, 64, 159)
ff80bf
rgb(255, 128, 191)
ffbfdf
rgb(255, 191, 223)
よくある質問（FAQ）
- 白のRGB値・カラーコードは？
- 白は
rgb(255, 255, 255)、カラーコードは#FFFFFF（3桁なら#FFF）です。R・G・Bのすべてを最大値の255にすると白になります。少しだけ灰色に落とした#FAFAFAや#F5F5F5は背景色としてよく使われます。上の「白・グレー」の早見表からワンクリックでコピーできます。 - 赤・緑・青のRGB値は？
- 光の三原色はそれぞれ、赤が
rgb(255, 0, 0)（#FF0000）、緑がrgb(0, 255, 0)（#00FF00）、青がrgb(0, 0, 255)（#0000FF）です。該当する色を1つだけ255にし、残りを0にすると、その色の最も鮮やかな状態になります。 - 16進数カラーコードからRGBに変換するには？
- 「#」を除いた6桁を2桁ずつに区切り、それぞれを10進数に直すとRGBの値になります。例えば
#FF0088なら、FF=255・00=0・88=136 で rgb(255, 0, 136) です。手計算しなくても、上の変換ツールにカラーコードを入力すれば R・G・B の値が自動で表示されます。 - 「#F08」のような3桁のカラーコードは何が違うの？
- 3桁のカラーコードは、各桁を2回ずつ繰り返した6桁コードの省略形です。
#F08は#FF0088、#FFFは#FFFFFFと同じ色を表します。このツールのカラーコード欄は、3桁の入力にも対応しています。 - rgb() と 16進数カラーコード、どちらを使えばいい？
- どちらも同じ色を表す別の書き方なので、基本はどちらでも構いません。CSSでは短く書ける16進数（HEX）が主流ですが、JavaScriptで数値として色を扱うときや、透明度を指定したいとき（rgba()）は rgb() 系が便利です。チームやプロジェクトの慣習に合わせるのがおすすめです。
- 白・黒・赤などの定番色のカラーコードは？
- 白は
#FFFFFF（rgb(255, 255, 255)）、黒は#000000（rgb(0, 0, 0)）です。光の三原色は、赤#FF0000・緑#00FF00・青#0000FF。黒や赤・緑・青は、上の早見表からワンクリックでコピーできます。