HEXカラーコードをRGBに変換する方法

HEXとRGBは、まったく同じ色を書く2つの方法です。デザイナーと開発者は常にこれらを切り替えています。CSSスタイルシートではHEX、JavaScriptアニメーションではRGB、デザインツールではHSL。これらがどう関係しているかを理解すると、色の作業がぐっと楽になります。コンバーターは頭の中の計算を肩代わりしてくれるので、16進数の割り算ではなく、色を正しく選ぶことに集中できます。

HEXカラーの仕組み

#FF5733のようなHEXカラーコードは、赤、緑、青のチャンネルを表す6桁の16進数です:

各チャンネルは00(0、色なし)からFF(255、最大強度)までの範囲を持ちます。つまり#FF5733は、赤がフル、緑がそこそこ、青が少しで、暖かいオレンジレッドになります。

HEXからRGBに変換する手順

1. HEXコードを入力: #FF5733のような色コードを入力または貼り付けるか、カラーピッカーを使います。
2. RGB値を確認: 同等の赤、緑、青の値(それぞれ0から255)を表示します。
3. 任意の形式でコピー: 値をrgb(255, 87, 51)、個別のチャンネル、またはHSLなど他の形式で取得します。

Web上のカラーコードの簡単な歴史

初期のWebブラウザ(1993年のMosaic、1994年のNetscape)では、色は名前付きの色だけを使っていました: red、blue、green。HTML 3.2仕様(1997年)はBGCOLOR属性を通じて16進数のカラーコードを導入し、CSS 1(1996年)はそれを普遍的なものにしました。10進数ではなくHEXを選んだのは現実的な理由からです。6文字のHEXコードはrgb(255, 87, 51)よりも短く、カラーピッカーからコピーペーストするのが簡単だからです。

RGBカラーモデル自体はずっと古いものです。James Clerk Maxwellは1861年に、人間の目に見える色はすべて、赤、緑、青の光を混ぜることで作れることを示しました。テレビ(1930年代)とコンピューターモニター(1970年代)はこの原理を直接利用しています。各ピクセルは、それぞれ異なる明るさを持つ3つのサブピクセル(1つ赤、1つ緑、1つ青)です。

モダンなCSS(2010年以降)はさらに多くのカラーフォーマットを追加しました: hsl()(色相、彩度、明度)、hwb()(色相、白度、黒度)、lab()(知覚的に均一)、lch()、oklab()、oklch()、任意の色空間用のcolor()。これらはすべてHEX/RGBと同じ色を表しますが、異なる思考モデルを使います。HEXが残っているのは、密度が高く、コピーペースト可能で、共有しやすいからです。

手動変換: 頭の中でやる方法

シンプルなHEX値の変換にツールは必要ありません。コツは16のべき乗を知っていることです:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10(hex)= 16
• FF(hex)= 255

5AのようなHEXペアの場合: 1桁目に16を掛け、2桁目を足します。5A = 5 × 16 + 10 = 90。

ショートカット:

• 00 = 0
• 33 = 51(よくある20%のグレーステップ)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

33、66、99、CCのペア(任意の組み合わせ)は、1990年代から続く古典的な「Webセーフ」216色パレットを生み出します。これらは今日でもデザイナーのムードボードに頻繁に現れます。

よく使われるカラーコード

アルファ付きHEX(8桁HEX)

CSS 4(2017年)はアルファチャンネル付きの8桁HEXを導入しました。#FF5733CCは、80%の不透明度を持つrgb(255, 87, 51)です(CC(16進数)= 204、これを255で割ると0.80)。

モダンブラウザ(Chrome 62以降、Firefox 49以降、Safari 9.1以降、Edge 79以降)で普遍的にサポートされています。新規プロジェクトには、8桁HEXはrgba()のクリーンな代替手段です。古いプロジェクトでは、後方互換性のためにrgba()を使い続けましょう。

短い4桁HEXも存在します: #F80Cは#FF8800CCと同じです。3桁HEXと同じショートハンドルールが適用されます。

各形式の使い分け

HEXを使う場合:

• スタイルシートにCSSカラー値を書くとき
• 単一の色をデザイナーと共有するとき、またはドキュメントに記載するとき
• JSONやデータファイルに色をコンパクトに保存するとき
• ブランドパレットを扱うとき(企業は通常、ブランドカラーをHEXで指定します)

RGBを使う場合:

• JavaScriptで色をアニメーションするとき(チャンネルを数値としてパースし、補間し、再フォーマット)
• カラーコントラスト比を計算するとき(WCAGの式はRGB上で動作します)
• 古いブラウザでrgba()による部分的な透明度が必要なとき
• キャンバスや画像データから色を読み取るとき(Canvas APIはRGBを返します)

HSLを使う場合:

• 色相のパレットを生成するとき(彩度と明度を固定し、色相を変える)
• ダークモードのバリアントを作成するとき(色相を固定し、明度を上げる)
• 色彩理論の作業をするとき(補色は色相で180°離れています)

OKLCHを使う場合:

• 知覚的均一性を重視するとき(OKLCHで補間すると、RGBで起きる「濁った中間色」を避けられます)
• 2024年以降のプロジェクトでカラーシステムをゼロから構築するとき

よくある落とし穴

• #プレフィックスを忘れる: CSSはハッシュを必須としています。color: FF5733は無効、color: #FF5733が正しい記法です。
• 大文字と小文字の混在: #FF5733と#ff5733は同じ色ですが、スタイルとしては一貫していません。1つを選んで(ほとんどのコードはHEXに小文字を好む)それを続けましょう。
• HEXと一般的な16進数の混同: HEXカラーコードは常に3、4、6、または8桁です。他の桁数(5、7)は無効です。プログラムは黙って切り捨てたり詰めたりするかもしれません。
• 8桁HEXでのバイトオーダーの誤り: 一部のライブラリはRGBA(#FF5733CC、アルファが最後)ではなくARGB(#CCFF5733、アルファが最初)を使います。CSSはRGBAを使います。Adobeや一部のAndroid APIはARGBを使います。
• RGBがsRGBだと仮定する: ほとんどのHEX/RGBカラーはsRGB色空間にあります。P3ディスプレイ(2016年以降のAppleデバイス)はより広い色を表示できますが、標準のHEXではそれらを記述できません。それにはcolor(display-p3 ...)を使いましょう。
• 行き来する変換での色の丸め: HEXからRGBに戻る変換はロスレスです。HEXからHSLに戻る変換は、浮動小数点演算によって1から2レベルの精度を失う可能性があります。

使いこなしのヒント

• CSSではHEXを使う: スタイルシートではcolor: #FF5733がcolor: rgb(255, 87, 51)よりもクリーンで一般的です。
• 透明度にはRGBを使う: 半透明の色が必要なときはrgba(255, 87, 51, 0.5)を使います。標準のHEXでアルファを追加する方法はありません(8桁HEXは存在しますが、ブラウザのサポートはまちまちです)。
• 3桁ショートハンド: #F00は#FF0000と同じです。各ペアが同じ桁を持つときに、スペースを節約するために使いましょう。
• カラーピッカーの方が速い: 適切な色を見つけようとしているなら、HEX値を推測するよりもビジュアルなカラーピッカーを使いましょう。結果に満足したらコードをコピーします。
• ブランドカラーをCSSカスタムプロパティとして保存する: --brand-primary: #FF5733とすれば、値を一度変更するだけですべての場所が更新されます。ファイル間でHEXコードを検索置換するよりも簡単です。
• 選んだ後にコントラストを確認する: 上に置くテキストが読めなければ、美しい色も役に立ちません。このコンバーターをコントラストチェッカーと組み合わせて、WCAG AA(4.5:1)またはAAA(7:1)の比率を検証しましょう。

プライバシー

HEX-RGBコンバーターは完全にブラウザ内で動作します。入力した色、カスタムパレット、保存した値はすべてデバイス上に留まります。これはファイル変換ツールほど重要ではありませんが(カラーコードは個人的に機密ではないため)、デザインの機密性の理由では重要です。試している色は、未発表のブランド方針、NDA下のクライアントワーク、開発中の製品テーマを露呈する可能性があります。ブラウザ専用の計算は露出ゼロです。