HEX→RGB カラーコード変換

HEXとRGB：同じ色を表す2つの方法

画面で見るすべての色は、赤・緑・青の3つの光から混合されています。すべてをオンにすると白になり、すべてをオフにすると黒になります。HEXとRGBは単に、この3つのチャンネルがそれぞれどのくらいの明るさであるべきかを表す2種類の記法です。両者はまったく同じ色を指しているため、優れたコンバーターは実際の色味を変えることなく2つの記法の間を変換するだけです。このツールがすることはそれだけです。ブラウザ内で完全に動作し、結果を自分の目で確認できるライブスウォッチを表示します。

16進数カラーコードの読み方

16進数のカラーコードは#1E90FFのような見た目です。ハッシュ記号は開始を示すだけで、その後の6文字は#RRGGBBのパターンで書かれた3つのペアです。最初のペアは赤、2番目は緑、3番目は青です。各ペアは16進数（16進法）で書かれた数値で、数字は0〜9、そしてA・B・C・D・E・Fが10〜15を表します。1つのペアは00（チャンネル完全オフ）からFF（完全オン）までの値を持てます。普通の十進数でいうと、この範囲はRGBが使う0〜255とまったく同じです。チャンネルあたり256段階あることで、6桁形式は16,777,216通りの異なる色を表現できます。

双方向の変換と具体例

HEXからRGBへ変換するには、コードを3つのペアに分割し、それぞれを16進数から普通の十進数に変換します。#1E90FFを例に取りましょう。赤のペアは1E：1に16を掛けて14（E）を加えると30です。緑のペア90は9に16を掛けて0を加えると144。青のペアFFは15に16を掛けて15を加えると255。したがって#1E90FFはrgb(30, 144, 255)になります——おなじみのドジャーブルーです。

逆方向も同じプロセスです。各RGBの数値を2桁の16進数で書きます。純粋な赤rgb(255, 0, 0)はFF・00・00になり、#FF0000として結合されます。覚えておくべきことが1つあります：値が16未満でも2桁が必要なので、5は5ではなく05と書きます。コンバーターはそのパディングを自動で処理しますが、手作業で行うときによくつまずくポイントです。

各形式が使われる場面

HEXはウェブの日常言語です。CSS・HTML・書くコードのほとんどが16進数コードを使います。コンパクトでコピーしやすいからです。RGBはデザインと画像ツールの中でよく現れます——Figma・Photoshop・Sketch・Illustratorは通常0〜255の範囲でスライダーやフィールドを表示し、スクリーン録画やビデオアプリもRGBを期待することが多いです。そのため、スタイルシートから16進数コードを取得してデザインパネルに入力するためにRGBの形式が必要になったり、逆の方向が必要になったりすることがよくあります。そのラウンドトリップがコンバーターの便利な理由です。1つの色を変換するのではなく一致する色のセット全体を作りたい場合は、カラーパレットジェネレーターが適切な出発点であり、デベロッパーツールの下にさらに多くのユーティリティがあります。

アルファ・透明度・HSL

両方の記法には透明度を追加した拡張形式があります。RGBはrgba(30, 144, 255, 0.5)になり、4番目の値はアルファです——0は完全な透明、1は完全な不透明です。HEXは同じ目的で4番目のペアを追加し、8桁の#RRGGBBAAコードになります。80は例えば約50%の不透明度です。一部のコンバーターはHSL（色相・彩度・輝度）も提供しており、人間が考えるような方法で色を表現します——色相環で色相を選び、鮮やかさと明るさをダイヤルで調整します。HSLは異なるパレットではなく異なる思考モデルなので、3つの別々の数値を操作せずに色を少し明るくしたり彩度を落としたりしたいときにより直感的かもしれません。

よくある質問