HEXをRGBに変換する方法
HEXのカラーコードをRGBにすぐ変換できます。HEXかRGBの値を入力するかスライダーを動かすと、すべての形式が同時に更新され、プレビュー、計算式、よく使う色の表も確認できます。
- 上の対応する欄にHEXの値(例:#3B82F6)を入力するか貼り付けます。
- RGBの値がすぐに更新されます:#3B82F6 は rgb(59, 130, 246) です。ほかの形式と色のプレビューも一緒に変わります。
- RGBの値をコピーして、CSS、デザインツール、コードに貼り付けます。
HEX→RGB の計算式
HEXカラーは16進数2桁の組が3つ(赤・緑・青)でできています。各組を16進数から10進数に変換するとRGBの各チャンネルになります:
#3B82F6 → rgb(59, 130, 246)
よく使う色のHEXとRGB
| HEX | RGB |
|---|---|
#000000 | rgb(0, 0, 0) |
#FFFFFF | rgb(255, 255, 255) |
#FF0000 | rgb(255, 0, 0) |
#00FF00 | rgb(0, 255, 0) |
#0000FF | rgb(0, 0, 255) |
#FFFF00 | rgb(255, 255, 0) |
#00FFFF | rgb(0, 255, 255) |
#FF00FF | rgb(255, 0, 255) |
#808080 | rgb(128, 128, 128) |
#FFA500 | rgb(255, 165, 0) |
#800080 | rgb(128, 0, 128) |
#3B82F6 | rgb(59, 130, 246) |
HEXとRGBとは
HEXカラーは#のあとに16進数6桁が続く形で、赤・緑・青を2桁ずつ、00(なし)からFF(最大)で表します。CSSやデザインツールで最もよく使われる書き方です。
RGBは赤・緑・青の各チャンネルを0〜255の数値で表します(例:rgb(59, 130, 246))。ディスプレイが光を混ぜる仕組みそのものです。
よくある質問
変換すると色は変わりますか?
HEX、RGB、HSLは同じ画面上の色を表すので、相互の変換は正確です(HSLは整数に丸めます)。CMYKは印刷用で、仕上がりはプリンターのカラープロファイルによって変わるため、画面の色から求めたCMYKは目安として使ってください。
結果をCSSで使えますか?
はい。CSSはhex(#3B82F6)、rgb(59, 130, 246)、hsl(217, 91%, 60%) をそのまま使えます。CMYKはCSSの形式ではなく、印刷やデザインソフトで使います。
透明度はどうなりますか?
アルファ値を追加します。CSSでは8桁のhex(#3B82F680)かrgba()/hsla()を使います。変換ツールは不透明な色で計算し、アルファ値はどの形式でも同じです。
このツールは無料ですか?
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか?
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。