JA
マイツール

RGBをHEXに変換

RGB値をHEXカラーコードに変換し、計算の過程も表示します。各チャンネルを16で割った商と余り、#RRGGBBAAのアルファ付きコード、3桁の短縮形まで一度に確認できます。

逆方向の変換ですか? HEXをRGBに変換 →

1行に1色、0〜255の数値を3つ入力します(rgb() の有無は問いません)。4つ目の値(0〜1または%)はアルファで、#RRGGBBAAになります。
マイツール →
広告

RGBは画面の色を、赤・緑・青の強さ(0〜255)で表します。HEXは同じ3つの数を16進数で2桁ずつ書いたもので、255はFFになり、色は #1E90FF のような短いコードになります。この変換ツールはコードに加えて計算の過程も示すので、宿題や試験、手計算の確認に便利です。

使い方

  1. 赤・緑・青を0〜255で入力します。
  2. 必要なら不透明度を100%未満にして、8桁の #RRGGBBAA コードを得ます。
  3. HEXコード、(あれば)3桁の短縮形、手順の表を確認します。
  4. 複数の色は、一括入力欄に1行に1組のRGB値を貼り付けます。

計算式

各チャンネルについて、商 = ⌊値 ÷ 16⌋、余り = 値 mod 16 で、HEXの2桁は商に対応する数字、続けて余りに対応する数字です(10 = A、11 = B、12 = C、13 = D、14 = E、15 = F)。

不透明度は4つ目の2桁になり、round(不透明度 × 255) です。3桁の短縮形 #RGB があるのは、すべての2桁が同じ数字の繰り返しのときだけです(例:#FF8800 = #F80)。

計算例

rgb(30, 144, 255):30 ÷ 16 = 1 余り 14 → 1E、144 ÷ 16 = 9 余り 0 → 90、255 ÷ 16 = 15 余り 15 → FF。まとめると #1E90FF(ドジャーブルー)です。不透明度50%なら 0.5 × 255 = 127.5 が128に丸められて80になり、#1E90FF80 となります。

よくある質問

電卓なしで手計算するにはどうしますか?

16で割ります。商が1桁目、余りが2桁目です。200なら 200 ÷ 16 = 12 余り 8 → C8 です。

同じ色なのに、デザインツールで違うHEXが表示されるのはなぜですか?

多くの場合、ツールが別のカラープロファイル(Display P3やAdobe RGB)で作業して変換しているためです。CSSのHEXは常にsRGBを意味します。

どんな色でも3桁に短縮できますか?

いいえ。各2桁が同じ数字(00、11 … FF)になっている4,096色だけに短縮形があります。

最終更新:

このツールを引用する
APA

kakaoCalc. (2026, November 8). RGBをHEXに変換. https://kakao.mobile/ja/tools/how-rgb-to-hex-converter/

MLA

“RGBをHEXに変換.” kakaoCalc, 8 Nov. 2026, kakao.mobile/ja/tools/how-rgb-to-hex-converter/.

広告