ブランド青「#2563EB」をRGBへ変換。37・99・235になるまでを確認

サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。

Web制作で使う青#2563EBを入力すると、Red 37、Green 99、Blue 235と表示された。CSS用の値はrgb(37 99 235)、百分率ではrgb(14.51% 38.82% 92.16%)である。

6桁のうち25が赤、63が緑、EBが青を表し、それぞれ16進数から0～255の10進数へ変換される。EBが235と最も大きいため、見た目も青が強い。

操作手順

1. Hex to RGB Color Converterを開く。
2. Hex color codeへ2563EBを入力する。
3. Convertを押す。
4. R・G・Bの3欄とCSS color欄を確認する。

同じ色を別の書式で使う

デザイン資料では#2563EB、画像編集や一部APIでは37, 99, 235、CSSではrgb(37 99 235)というように、用途で書式が変わる。数値の意味は同じなので、変換後の3成分を控えておけば色をそろえられる。

透明度を加える場合、現行CSSではrgb(37 99 235 / 50%)のように書ける。変換結果のRGB値は変えず、末尾でアルファ値を指定する。

出典・確認先

• RapidTables: Hex to RGB
• MDN: rgb()
• W3C: CSS Color Module Level 4