16進数 色 変換ツール｜HEX・RGB・CMYKを相互変換
HEXカラーコードを入力するだけで、RGB・HSL・CMYK・RGBAとCSS用コードを確認できます。色のプレビューを見ながら、Web制作やデザイン資料に使う値をすぐコピーできます。
先に答え：通常のHEXは6桁の
#RRGGBB で入力します。たとえば #3B82F6 はRGB 59, 130, 246 に変換されます。下のツールは先頭の#を省略した入力、3桁・4桁・6桁・8桁の形式に対応しています。
16進数 色 変換ツール
HEXカラーコードから、画面表示やCSS指定で使う色の数値をまとめて確認します。
よく使うHEXの例
変換結果（例）
入力例 #3B82F6 の結果を表示しています。
現在のプレビュー色
#3B82F6
| RGB | rgb(59, 130, 246) | |
|---|---|---|
| HSL | hsl(217, 91%, 60%) | |
| CMYK | cmyk(76%, 47%, 0%, 4%) | |
| RGBA | rgba(59, 130, 246, 1) |
CSS指定
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部分に戻し、透明度は背景上でも確認してください。関連する配色はコントラスト比チェッカーで検証できます。
16進数 色 変換のよくある質問
はい。#fffや#rgbaを6桁・8桁へ展開してから計算します。
近似値として使い、印刷会社の条件と校正を優先してください。
はい。HEX、RGB、HSL、CMYK、RGBA、CSS指定のコピー用ボタンを使えます。
3・4・6・8桁の0〜9、A〜Fだけにそろえ、「例に戻す」から再入力します。