RGBをHEXに変換
赤・緑・青の値やCSSのrgb()文字列を入力すると、対応するHEXカラーコードが得られます。
入力色
変換する色を入力してください…
RGBカラーをHEXコードに変換
カラーピッカー、画像編集ソフト、グラフィックのコードは色を3つの数値で示すことが多い一方、CSS、デザイントークン、ブランドガイドラインでは短いHEXコードが好まれます。RGBからHEXへの変換は正確です。同じ3バイトを16進数で書き直すだけだからです。
このページは、RGB入力を選択し例の値を入力した状態でカラー変換ツールを開きます。
変換の手順
- 0から255までの各チャンネル値を取ります。
- 16で割ります。商が16進数の1桁目、余りが2桁目です（10から15はAからFと書きます）。
- 1桁になる場合は先頭を0で埋めます。10は
Aではなく0Aになります。 - 3つの組を
#の後ろにつなげます。
| RGB | チャンネルごと | HEX |
|---|---|---|
rgb(10, 132, 255) | 0A · 84 · FF | #0A84FF |
rgb(255, 87, 51) | FF · 57 · 33 | #FF5733 |
rgb(128, 128, 128) | 80 · 80 · 80 | #808080 |
0埋めを忘れるのは、手書きの変換処理で定番のバグです。10、132、255を0埋めせずにつなげると#A84FFとなり、有効な色になりません。
rgba()と8桁HEX
CSSは何年も前から8桁のHEXコードを受け付けています。4つ目の組はアルファです。0〜1のアルファに255を掛けて丸めるので、0.5は128、16進数では80になります。変換ツールは8桁のコードとrgba()の形の両方を表示するので、使うツールが対応しているほうを選べます。
コードでRGBをHEXに変換する
JavaScriptなら'#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')、Pythonなら'#{:02X}{:02X}{:02X}'.format(r, g, b)です。どちらも0埋めを自動で処理します。
関連ツール
逆方向にはHEXをRGBに変換を、明度を体系的に調整したいときはHEXをHSLに変換を、色を文字に使う前にはカラーコントラストチェッカーをお使いください。