RGBから16進数へのコンバーター

RGBから16進数へのコンバーターは、ウェブデザイン、CSS、グラフィックアプリケーションで使用されるRGBカラー値（赤、緑、青）を16進数カラーコードに即座に変換します。HSL、HSV、CMYKを含むマルチフォーマット出力、CSSコードスニペット、カラーハーモニーパレット、WCAGアクセシビリティコントラストチェック、および最も近い名前付きカラーのマッチング機能を提供します。

一目でわかる

RGBから16進数へのコンバーターは、赤、緑、青の値（それぞれ0〜255）を16進カラーコードに変換します。リアルタイムのプレビューに加え、同じ色をHSL、HSV、CMYKでも表示します。

RGBから16進数へのコンバーターの機能一覧

機能	できること	向いている用途
RGBからHEX	各チャンネルの0〜255を2桁の16進数に変換し、#RRGGBB形式にまとめます。例：rgb(255, 165, 0)から#FFA500。	ウェブデザインやCSSのカラーコードに
リアルタイムプレビュー	スライダーを動かすと色のプレビューが更新されます。ランダムな色の生成機能もあります。	見た目で色を調整するとき
ほかの形式	同じ色のHEX、RGB、HSL、HSV、CMYKを表示します。	デザインツールと印刷ツールの間で色を扱うとき
CSSコード	色のCSSコードを生成し、ワンクリックでコピーできます。	色をスタイルシートに貼り付けるとき
配色と濃淡	補色、類似色、三色配色、分裂補色のパレットに加え、濃淡と明暗を表示します。	調和するカラーパレットを作るとき
コントラストと色名	WCAGのコントラスト比（基準値3:1、4.5:1、7:1）を確認し、最も近いCSS色名を示します。	文字色のアクセシビリティを確認するとき
共有可能なURL	URLパラメーターを使って選んだ色を共有できます。	特定の色を同僚に送るとき

RGBから16進数への変換の仕組み

RGB（赤、緑、青）と16進数（Hex）は、電子ディスプレイで使用される同じ加法混色モデルの2つの異なる記法です。各カラーチャネルの範囲は10進数で0から255です。16進数に変換するには、各10進数のチャネル値を2桁の16進数（16進法）として表現し、3つのペアを組み合わせて # プレフィックスを付けます。

変換公式

各チャネル値 V (0–255) に対して：

1. Vを16で割ります。商が最初の16進数字になり、余りが2番目の数字になります。
2. 10〜15の数字をA〜Fの文字に対応させます。
3. 組み合わせる： #RRGGBB

例： RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (オレンジ)

カラーフォーマットの解説

HEX (16進数)

ウェブ開発で最も一般的なカラー記法です。 # の後にRR、GG、BBを表す6桁の16進数字が続きます。各ペアが同じ数字の場合、短縮形（#RGB）が使用可能です。例： #FF0000 → #F00。

HSL (色相、彩度、明度)

デザイナーにとってより直感的なモデルです。色相（Hue）はカラーホイール上の角度（0°〜360°）、彩度（Saturation）は鮮やかさ（0〜100%）、明度（Lightness）は黒（0%）から純色（50%）を経て白（100%）までの範囲です。HSLは、単一のパラメータを調整するだけで色のバリエーションを簡単に作成できます。

HSV / HSB (色相、彩度、明度/輝度)

HSLと似ていますが、明るさの定義が異なります。Value（明度）が100%であることは、その色相と彩度において色が最も明るい状態であることを意味します。このモデルは、PhotoshopやFigmaなどの多くのグラフィックデザインアプリケーションで使用されています。

CMYK (シアン、マゼンタ、イエロー、キー/黒)

印刷で使用される減法混色モデルです。画面が光を加える（RGB）のに対し、プリンターは光を吸収するインクを混ぜます（CMYK）。デジタルのデザインを物理的な印刷物にする際には、色の正確性を確保するためにCMYKへの変換が不可欠です。

カラーハーモニーの種類

カラーハーモニーは、カラーホイール上の位置に基づいた色の組み合わせです。このツールは4つのタイプを生成します：

• 補色（Complementary）: ホイール上で正反対にある色（180°離れた色）。最大のコントラストと視覚的インパクトを生み出します。
• 類似色（Analogous）: ホイール上で隣接する色（±30°）。自然界によく見られる、調和のとれた心地よいデザインを作成します。
• 三補色（Triadic）: 等間隔に配置された3つの色（120°離れた色）。バランスを保ちつつ、鮮やかなコントラストを提供します。
• 分裂補色（Split-Complementary）: 補色の両隣にある2つの色（150°と210°）。補色よりもバリエーションがあり、より柔らかな印象を与えます。

WCAGアクセシビリティコントラスト

Web Content Accessibility Guidelines (WCAG) は、読みやすさを確保するためのコントラスト比を定義しています：

一般的なRGBから16進数への変換

よくある質問

RGBを16進数に変換する方法は？

RGBを16進数に変換するには、各カラーチャネルの値（0〜255）を16で割って商と余りを求め、それぞれを16進数字（0〜9、A〜F）に対応させます。3つの2桁の16進数値を組み合わせて、先頭に#を付けます。例えば、RGB(255, 165, 0)は#FFA500になります（255→FF、165→A5、0→00）。

RGBと16進数カラーコードの違いは何ですか？

RGBと16進数は、同じ色を異なる記法で表したものです。RGBは赤、緑、青のチャネルにrgb(255, 0, 0)のような3つの10進数（0〜255）を使用します。16進数は#FF0000のように、#の後に6桁の16進数字を使用します。どちらも同一のカラー情報をエンコードしており、16進数は同じRGB値をよりコンパクトな16進法で表現したものです。

16進数はどのカラーモデルを使用していますか？

16進数カラーコードは、コンピュータのディスプレイで使用されているのと同じRGB（赤、緑、青）加法混色モデルを使用しています。6桁の16進数字は3つのペアを表し、最初の2桁が赤、中央の2桁が緑、最後の2桁が青に対応します。各ペアの範囲は00（強さ0）からFF（最大強さ255）までです。

WCAGコントラスト比とは何ですか？

WCAGコントラスト比は、2つの色間の輝度の差を測定するもので、視覚障害を持つ人々のためのテキストの読みやすさを確保するために使用されます。比率は1:1（コントラストなし）から21:1（最大）の範囲です。WCAG 2.0では、通常のテキストには少なくとも4.5:1（AAレベル）、大きなテキストには3:1（AA Large）、強化されたコントラストには7:1（AAAレベル）が必要です。

RGBをHSLに変換する方法は？

RGBをHSLに変換するには：R, G, Bを0〜1に正規化し、最大値と最小値を求めます。明度を(max+min)/2として計算し、彩度は明度に依存します。色相はどのチャネルが支配的か（赤は0°、緑は120°、青は240°）に基づいて、チャネル間の差によって調整して計算します。

CMYKとは何ですか？いつ使うべきですか？

CMYKはシアン、マゼンタ、イエロー、キープレート（黒）の略です。これは印刷で使用される減法混色モデルです。RGBや16進数が画面（加法混色）で使用されるのに対し、プリンターは光ではなくインクを混ぜるため、印刷デザインにはCMYKが不可欠です。RGBをCMYKに変換することで、デジタル上の色が印刷物に正しく反映されるようになります。

その他のリソース

• WCAG 2.1 コントラストガイドライン