カラー形式について
画面の色は主に3つの形式で表されます。HEXは#4f46e5のような6桁の16進数コードを使います。RGB（赤・緑・青）は0〜255の3つの数値で表します。HSL（色相・彩度・輝度）は色相環の角度（0〜360°）・彩度（0〜100%）・輝度（0〜100%）で表します。3つはすべて同じ色空間を表し、相互に変換できます。
カラーコード変換
HEXカラーコードを入力するとRGB・HSLとカラープレビューがすぐに表示されます。
カラープレビュー
RGB
-
HSL-
HEXカラー-
HEXをRGB・HSLに変換する方法
HEXカラーをRGBに変換するには、2桁ずつ3組に分けてそれぞれ16進数から10進数(0〜255)に変換します。HSLはそのRGB値から色相・彩度・明度を計算して求めます。例: #4F46E5はrgb(79, 70, 229)、hsl(243, 75%, 59%)に変換されます。
HEXをRGB・HSLに変換する手順
- #記号を取り除き、6桁のHEXコードを2桁ずつ3組に分けます(#4F46E5なら4F、46、E5)。
- 各16進数のペアを0〜255の10進数に変換し(4F=79、46=70、E5=229)、RGB値を求めます。
- 各RGB値を255で割って0〜1の範囲に正規化し、3つの値のうち最大値・最小値を求めます。
- 明度は最大値と最小値の平均です。彩度と色相は最大値と最小値の差を標準のHSL計算式に当てはめて求めます。
- 表示のために色相は整数の度(0〜360)、彩度・明度は整数のパーセント(0〜100%)に丸めます。
HEX → RGB → HSL
RGBチャンネル = parseInt(16進数のペア, 16) ・ 明度 = (R・G・Bの最大値 + 最小値) / 2 (0〜1に正規化)
- R, G, B = 赤・緑・青チャンネルの値、それぞれ0〜255
- H, S, L = 色相(0〜360度)、彩度・明度(0〜100%)
よく検索されるカラー変換
#FF0000はRGBでいくつですか?
#FF0000はrgb(255, 0, 0)です。赤チャンネルが最大値、緑と青が0の純粋な赤です。
#FFFFFFはRGBでいくつですか?
#FFFFFFはrgb(255, 255, 255)です。3チャンネルすべて最大値の純粋な白です。
#000000はRGBでいくつですか?
#000000はrgb(0, 0, 0)です。3チャンネルすべて0の純粋な黒です。
rgb(0, 128, 0)は16進数でいくつですか?
rgb(0, 128, 0)は#008000です。10進数の128は16進数で80になるためです(中間的な緑)。
#FFA500はRGBでいくつですか?
#FFA500はrgb(255, 165, 0)です。標準的なオレンジ色です。
#00FF00はRGBでいくつですか?
#00FF00はrgb(0, 255, 0)です。緑チャンネルだけが最大値の純粋な緑です。
#0000FFはRGBでいくつですか?
#0000FFはrgb(0, 0, 255)です。青チャンネルだけが最大値の純粋な青です。
rgb(255, 255, 0)は16進数でいくつですか?
rgb(255, 255, 0)は#FFFF00です。赤と緑を最大まで混ぜた純粋な黄色です。
色変換の例
| HEX | RGB | HSL |
|---|---|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
よくある質問
HEX・RGB・HSLはどう違うのですか?
HEXとRGBは同じ方法で色を表しており、赤・緑・青の光の量を表記法だけ変えたもの(16進数か10進数か)です。HSLは同じ色を色相(色そのもの)・彩度(鮮やかさ)・明度(明るさ)で表すため、手作業で色を調整する際に直感的に扱いやすいという特徴があります。
白の彩度が0%になるのはなぜですか?
彩度は色がグレーからどれだけ離れているかを表す値です。純白・黒・その間のすべてのグレーは赤・緑・青の値が互いに等しいため、明度に関係なく彩度は常に0%になります。
#FFFのような3桁のHEXコードも入力できますか?
このツールは6桁のHEX形式(#RRGGBB)を前提としています。#FFFは各桁を2回ずつ繰り返すCSSの省略形(#FFFFFF)なので、入力前に6桁に展開してください。
赤・緑・青がすべて異なる場合、色相はどう計算されますか?
色相は3つのチャンネルのうちどれが最も大きい値かと、残り2つのチャンネルの相対的な位置から計算されます。結果は360度のカラーホイール上の角度で表され、0度が赤、120度が緑、240度が青です。
このツールはウェブ標準の6桁HEXカラーのみを変換します。アルファ(透明度)チャンネル、CSSの色名、HSVやLABなどsRGB以外の色空間には対応していません。
Sources: W3C CSS Color Module Level 4
プライバシーと安全性
- ブラウザ内で計算 — 入力した値はお使いの端末内だけで計算され、utilduckのサーバーへ送信されません。
- 暗号化された通信 — すべてのページはHTTPSで配信され、通信経路で内容を読み取られません。
- 第三者へ渡しません — 入力内容は解析・広告サービスへ渡されません。
- 保存しません — 計算結果をサーバーに保存せず、アカウント登録も不要です。
最終更新: 2026-08-24