UtilBoxx
カラーツール·5 分

Hex から RGB への色変換：完全ガイド

Hex カラーコードを RGB、HSL、CMYK に変換。無料のブラウザベース・コンバーター付き。

16 進カラーコードとは？

16 進カラーコードは、Web デザインで色を表現する 6 文字の文字列です。例：`#FF5733`。`#` はプレフィックスで、6 文字は 3 組の 16 進数字 —— 赤、緑、青の各ペア。Hex は hexadecimal（16 進）の略で、基数は 16 なので、各ペアは 00 から FF（10 進で 0〜255）の値を表せます。

つまり `#FF5733` は次のように分解できます：

  • `FF` = 赤 255
  • `57` = 緑 87
  • `33` = 青 51

これら 3 つの強度の光を混ぜると、暖色寄りのオレンジになります。Hex コードは CSS、HTML、そしてほとんどのデザインツールで色を記述する最も一般的な方法です。短く、RGB との間で正確に往復でき、Web 上の色の共通語です。

出会う他の一般的な色表記には、RGB（赤 0-255、緑 0-255、青 0-255）、HSL（色相 0-360、彩度 0-100%、明度 0-100%）、CMYK（シアン、マゼンタ、イエロー、キー/黒の割合、印刷用）があります。Web 開発者、デザイナー、デジタルマーケターにとって、これらの間で変換できることは日常業務です。

方法 1：UtilBoxx の無料カラーコンバーター（推奨）

最も速く、安全で、プライベートな方法は UtilBoxx の Hex→RGB ツール です。完全にブラウザ内で動作し、データを一切デバイスから送りません。アップロードも登録もトラッキングも不要です。

使い方は次のとおりです：

  1. utilboxx.com/ja/tools/color/hex-rgb を開く
  2. Hex コードを入力または貼り付け（先頭の `#` はあってもなくても可）
  3. RGB、HSL、CMYK への変換を一度に確認
  4. スポイトで画面上の任意の場所から色を取得
  5. 任意の出力をクリックでクリップボードにコピー

この方法を推奨する理由：

  • 100% 無料、アカウント不要、登録不要、メール認証不要
  • プライバシー最優先：すべてブラウザ内で完結。何もアップロードされません
  • 全部入り：HEX、RGB、HSL、CMYK を 1 つの画面に
  • 双方向：どの形式で入力しても他のすべてが得られる
  • スポイト：画面上の任意ピクセルから色を取得
  • ワンクリックコピー：どの形式でもクリップボードへ
  • あらゆるデバイスで動作：Windows、Mac、Linux、ChromeOS、iOS、Android

たまに色を変換するだけなら、これほど低コストな選択肢はありません。

方法 2：Photoshop カラーピッカー（有料）

Photoshop は画像編集のヘビー級で、そのカラーピッカー（ツールバーの前景/背景色スウォッチをクリックで開く）は色選択のゴールドスタンダードです。HEX、RGB、HSL、CMYK、Lab、その他いくつかの色空間が並んで表示されます。`#` フィールドに Hex コードを入力したり、H/S/B スライダーを動かしたり、色フィールドの任意の場所をクリックしたり、開いている画像からスポイトでサンプリングしたりできます。

ただし価格があります。Photoshop は Creative Cloud サブスクリプションの一部で、月額約 $22.99（年額約 $240）。たまの変換にはオーバースペックで、デスクトップインストールが必要なので、古いマシンには負担です。

既にレタッチ、合成、デザインのために Photoshop を使っているなら価値があります。色変換だけが目的であれば、ブラウザツールで十分です。請求書も不要です。

方法 3：コードで変換（JavaScript または Python）

開発者なら、好みの言語のワンライナーで色を変換できます。信頼性の高いスニペットを以下に示します：

```bash # Python が入った任意の Unix シェル： python3 -c "import sys; h=sys.argv[1].lstrip('#'); print(tuple(int(h[i:i+2], 16) for i in (0,2,4)))" "#FF5733" # (255, 87, 51) ```

```javascript // JavaScript：各 hex ペアに parseInt const hex = "#FF5733"; const r = parseInt(hex.slice(1, 3), 16); // 255 const g = parseInt(hex.slice(3, 5), 16); // 87 const b = parseInt(hex.slice(5, 7), 16); // 51 console.log(`rgb(${r}, ${g}, ${b})`); // "rgb(255, 87, 51)"

// 逆方向：RGB → HEX function rgbToHex(r, g, b) { return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("").toUpperCase(); } console.log(rgbToHex(255, 87, 51)); // "#FF5733" ```

```python # Python f-string + format spec hex = "FF5733" r, g, b = int(hex[0:2], 16), int(hex[2:4], 16), int(hex[4:6], 16) print(f"rgb({r}, {g}, {b})") # "rgb(255, 87, 51)"

# RGB → HEX def rgb_to_hex(r, g, b): return "#{:02X}{:02X}{:02X}".format(r, g, b) print(rgb_to_hex(255, 87, 51)) # "#FF5733" ```

```css / モダン CSS は color() と relative color をサポート / :root { --brand: #FF5733; --brand-rgb: 255, 87, 51; / rgba() に流し込む / }

.button { background: rgb(var(--brand-rgb)); border: 1px solid rgba(var(--brand-rgb), 0.5); } ```

その場限りの変換にはブラウザツールが高速。ビルドパイプラインやデザインシステムに組み込むならコードが正解です。

よくある質問

HEX と RGB の違いは？

HEX は 6 文字の 16 進文字列。RGB は 0〜255 の 3 つの 10 進数。両者はまったく同じ色を表し、フォーマットは交換可能です。`#FF5733` = `rgb(255, 87, 51)` = 同じ暖色オレンジ。

HSL は何に向いていますか？

HSL（色相、彩度、明度）は RGB よりずっと直感的に色を扱えます。色を「明るく」するには L を増やす、「鮮やかに」するには S を増やす、スペクトルをシフトするには H を回す。だからモダン CSS のカラーミックス関数や多くのデザインツールは HSL を好みます。

CMYK は何のため？

CMYK は印刷の色モデルです。RGB は画面の色モデル。重なりますが同一ではありません。鮮やかな RGB の青は CMYK で紫に振れずに印刷できないことがあります。印刷所にファイルを送る前に CMYK に変換すれば、実際に印刷される色をプレビューできます。

Hex コードは大文字小文字を区別しますか？

しません。`#FF5733` と `#ff5733` は同じ色です。CSS も同一に扱います。慣習として視認性のため大文字を使います（`#FFFFFF` のほうが `#ffffff` より「白」と読み取りやすい）。

Web ページから色を取るには？

ブラウザ DevTools のスポイトを使います。Chrome、Firefox、Edge で DevTools（F12 または Cmd+Opt+I）を開き、「検証」ツールをクリックし、スタイルパネルの色スウォッチをクリックします。ポップアップで hex、RGB、HSL 値をコピーできます。UtilBoxx のツールにも画面スポイトが内蔵されています。

オンラインの色変換ツールは安全ですか？

サービスによります。UtilBoxx はすべてブラウザ内で処理します —— アップロードなし、サーバーサイド処理なし、ログなし。他のツールでは、入力がログされていると仮定してください。1 回限りの色コードなら大した問題ではありませんが、企業秘密のブランドカラーにはプライベートなツールを使う価値があります。

まとめ

色変換は Web デザイン、ブランディング、印刷に関わる人が頻繁に行う小さな作業であり、有料サブスクリプションやソフトのインストールが必要な作業ではありません。ほとんどの人にとって、UtilBoxx の無料カラーコンバーター は明白な選択です：プライベートで、速くて、無料で、登録不要。

既に Photoshop を常用しているデザイナーなら、カラーピッカーは良いバックアップになります。スクリプトを書くなら、JavaScript と Python のワンライナーが最強です。Mac ユーザーは内蔵の Digital Color Meter（アプリケーション/ユーティリティ内）でも画面から任意の色を RGB で読み取れます。

その他は、UtilBoxx のカラーツール をチェックしてください。すべてブラウザ内で完結する、プライバシー最優先のカラーツールキットが見つかります。

← 記事一覧に戻る