Utilore

HEX を RGB に変換

HEX コードを貼り付ければ RGB の各チャンネルが読み取れます。#1f5fd6 は rgb(31, 95, 214) になり、アルファ値を含むコードなら透過を保った rgba() が得られます。

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

コントラスト:

使い方

  1. HEX コードを貼り付けます。先頭の # はあってもなくても構いません。
  2. 下に表示される RGB 値を確認します。アルファ値があれば RGBA になります。
  3. RGB の行の横にある「コピー」を押します。

知っておくと便利

6桁が意味しているもの

HEX は三つの数値を16進数で書いた表記です。最初の 2 桁が赤、次が緑、最後が青で、それぞれ 00 から FF まで。これは RGB で目にする 10 進の 0〜255 に当たります。#1f5 のような 3 桁は短縮形で、各桁を 2 回ずつ並べた #11ff55 と同じ意味になります。

HEX ではなく RGB が求められる場面

canvas や SVG の API、Android と iOS の色オブジェクト、そして色を書き下すのではなく計算して求める処理は、いずれもチャンネル単位で色を扱います。また、古いブラウザが読み違える 8 桁 HEX を避けて透過を指定できるのも RGB だけです。

よくある質問

透過を含む8桁の HEX にも対応しますか。

対応します。最後の 2 桁がアルファ値で、rgba() の 4 番目の値として表示され、0〜255 から CSS が求める 0〜1 の範囲に換算されます。

先頭の # は必須ですか。

必須ではありません。「1f5fd6」でも「#1f5fd6」でも受け付けますし、3 桁・4 桁の短縮形も使えます。

ブラウザの外に出るものはありますか。

ありません。変換はページ内の計算だけで、送信も記録も行いません。

関連ツール