16進数 色 変換ツール｜HEX・RGB・CMYKを相互変換
HEXカラーコードを入力するだけで、RGB・HSL・CMYK・RGBAとCSS用コードを確認できます。色のプレビューを見ながら、Web制作やデザイン資料に使う値をすぐコピーできます。
「色 16 進数 変換」や「16 rgb」で探している場合も、HEXとRGBの対応を同じ結果画面で確認できます。
#RRGGBB で入力します。たとえば #3B82F6 はRGB 59, 130, 246 に変換されます。下のツールは先頭の#を省略した入力、3桁・4桁・6桁・8桁の形式に対応しています。
16進数 色 変換ツール
HEXカラーコードから、画面表示やCSS指定で使う色の数値をまとめて確認します。
よく使うHEXの例
変換結果（例）
入力例 #3B82F6 の結果を表示しています。
| RGB | rgb(59, 130, 246) | |
|---|---|---|
| HEX（8桁） | #3B82F6 | |
| HSL | hsl(217, 91%, 60%) | |
| CMYK | cmyk(76%, 47%, 0%, 4%) | |
| RGBA | rgba(59, 130, 246, 1) |
color: #3B82F6;
有効なHEXを入力すると、ここに変換結果が表示されます。
16 進数 色 変換とは？HEXの読み方
HEXは画面で使うRGBの赤・緑・青を16進数で表したコードです。通常の #RRGGBB は2桁ずつを 00〜FF で指定し、10進数の0〜255に対応します。
#336699 は rgb(51, 102, 153) です。「色 16 進数 変換」や「16 rgb」で探している場合も、HEXとRGBを同時に確認すると入力ミスを減らせます。#fff は6桁へ展開され、4桁・8桁は末尾を透明度として扱います。
16進数カラーコードの使い方
- 入力：
#3B82F6のようにHEXを入力。#は省略できます。 - 確認：3・4・6・8桁の形式なら自動で変換します。
- 利用：プレビューとRGB・HSL・CMYK・RGBAを確認します。
- コピー：必要な行のボタンからCSSや仕様書へ貼り付けます。
入力中に形式が不正になると結果を空状態へ戻し、修正方法を表示します。色見本ボタンは代表色の確認に使えます。
出力形式の使い分け
| 形式 | 主な用途 |
|---|---|
| HEX | CSS、HTML、デザインツールの色指定。 |
| RGB | 画面表示、画像処理、JavaScriptの数値。 |
| HSL | 色相・彩度・明度を調整した配色。 |
| CMYK | 印刷前の近似値。最終色は校正で確認。 |
| RGBA | 透明度を含むCSSの背景や枠線。 |
HEXとRGBは同じsRGB値の別表記です。CMYKは印刷条件の影響を受けるため、入稿仕様や色校正を優先してください。
対応形式と入力エラー
| 形式 | 例 | 処理 |
|---|---|---|
| 3桁 | #09F | 各桁を2回展開。 |
| 4桁 | #09FC | RGBと透明度を展開。 |
| 6桁 | #0099FF | 通常のRGBカラーとして変換。 |
| 8桁 | #336699CC | 末尾2桁をalphaとしてRGBA表示。 |
| 無効 | #12G45Z、5桁や7桁 | 結果を更新せず修正を案内。 |
RGB関数や空白は入力できません。エラー時はHEX部分に戻し、透明度は背景上でも確認してください。関連する配色はコントラスト比チェッカーで検証できます。
HEXからRGBへ変換する仕組み
16進数の色変換は、HEXの文字列をRGBの赤・緑・青に分け、それぞれを0〜255の10進数へ読み替える処理です。たとえば #336699 は 33、66、99 の3組に分けます。各組は 33＝51、66＝102、99＝153なので、結果は rgb(51, 102, 153) になります。
1桁目が16の位、2桁目が1の位です。したがって2桁の値は「16の位×16＋1の位」で計算できます。A〜Fは10〜15として扱い、FFは255、00は0です。ツールではこの分解と計算を自動化するため、入力欄に大文字・小文字のどちらを入れても同じ値を表示します。
| HEX | RGB | 読み方 |
|---|---|---|
#000000 | rgb(0, 0, 0) | 3色すべて0の黒。 |
#FFFFFF | rgb(255, 255, 255) | 3色すべて255の白。 |
#336699 | rgb(51, 102, 153) | 33・66・99を10進数に変換。 |
#09F | rgb(0, 153, 255) | 0・9・Fを2桁ずつに展開。 |
変換結果は用途に合わせて使い分ける
同じ色でも、使う場所によって確認すべき形式が変わります。WebページのCSSならHEXまたはRGB、透明な背景ならRGBA、色相を調整する配色作業ならHSLが扱いやすい形式です。印刷へ渡すときは、表示されたCMYKを最終値と断定せず、印刷会社の仕様とカラープロファイルを優先してください。
| 目的 | 見る値 | 確認ポイント |
|---|---|---|
| CSSで色を指定 | HEX | color: #336699;のように貼り付ける。 |
| JavaScriptで計算 | RGB | 各チャンネルが0〜255の範囲か確認する。 |
| 透明度を含める | RGBA・8桁HEX | 末尾2桁がalphaで、背景色によって見え方が変わる。 |
| 配色を調整 | HSL | 色相・彩度・明度を個別に動かす。 |
| 印刷用に検討 | CMYK | 用紙・インク・ICC条件で最終色を校正する。 |
16進数 色 変換で迷わない確認手順
変換値を別のツールや資料へ移すときは、数値だけでなく入力形式と用途も一緒に確認するとミスを減らせます。特に、先頭の # の有無、桁数、透明度の有無は、コピー前に見ておきたいポイントです。
- 桁数を確認：3・4・6・8桁のどれかを確認し、5桁や7桁をそのまま使わない。
- 文字を確認：使える文字は0〜9とA〜F。似た文字の入力ミスがあればエラー表示を読む。
- 形式を確認：CSSにはHEX、計算処理にはRGB、透明度が必要ならRGBAまたは8桁HEXを選ぶ。
- 表示を確認：結果の色見本を元のデザインと見比べ、印刷では校正紙や指定プロファイルも確認する。
このページのコピー用ボタンは、結果欄の値をそのまま貼り付けるためのものです。コピー後は、CSSのセミコロンや関数の括弧を含める必要があるか、貼り付け先の書式に合わせて整えてください。
HEX・RGB・CSSコードをコピーするときの注意
変換結果のコピーは、入力値を手作業で書き写すより安全です。ただし、コピーする行を間違えると、HEXをRGB欄へ貼り付けたり、RGBAの透明度を失ったりすることがあります。必要な形式を決めてから該当行のボタンを押してください。
- Webの色指定は
HEXまたはCSS指定を選ぶ。 - RGB値をプログラムへ渡す場合は、3つの数値と順番を保つ。
- 8桁HEXやRGBAは、背景色が変わると見た目も変わるため、透明度を確認する。
- CMYKは印刷環境に依存するため、入稿先の指定値と照合する。
実務で使う入力例と変換結果の確認
色 16 進数 変換を実務で使うときは、入力したHEXだけでなく、変換後の数値が目的に合っているかを確認します。下の例は、よく使う色を入力した場合の目安です。RGBの順番は赤・緑・青で固定され、値はすべて0〜255の範囲になります。
| 入力HEX | 変換後RGB | 用途の例 |
|---|---|---|
#FF0000 | rgb(255, 0, 0) | 警告や強調の赤。 |
#10B981 | rgb(16, 185, 129) | 成功状態や緑系のUI。 |
#F59E0B | rgb(245, 158, 11) | 注意を促すアンバー。 |
#00000080 | rgba(0, 0, 0, 0.5) | 約50%透明な黒。 |
「16 rgb」で探している場合
「16 rgb」は、16進数とRGBの対応を確認したい検索意図として使われる表現です。HEXの各2桁をRGBの1値へ置き換えると考えると、#3B82F6 は 3B=59、82=130、F6=246 となります。手計算の確認だけでなく、入力欄へ値を入れて結果をコピーすると、桁の読み違いを防げます。
Webと印刷の両方で使う場合
Web上で決めたHEXを印刷へ渡すと、RGBとCMYKの色域や用紙条件の違いで見た目が変わることがあります。まずHEX・RGBを基準値として保存し、印刷工程では入稿先のICCプロファイル、用紙、インク、校正結果を別に記録してください。変換ツールのCMYKは比較用の近似値として扱うと、安全に引き継げます。
入力を変えるたびに結果は同じ画面で更新されます。作業中の基準色を比較したいときはパレット例を使い、値を決めたらHEX・RGB・CSSの必要な行だけをコピーしてください。8桁HEXを入力した場合は、8桁HEX欄とRGBA欄の両方を確認すると透明度を失いません。