HEX→RGB 変換ツール
HEXカラーコードをRGB形式に変換します。指定したHEX値を入力するだけで、対応するRGB値を即座に取得できます。
HEX を貼り付け、RGB / HSL のスライダーを動かすか、ビジュアルピッカーで選択するだけで、HEX・RGB・HSL・CMYK の各フォーマット間をリアルタイムに変換できます。
HEX
3桁または6桁の HEX コードを貼り付けてください（# は省略可）。
RGB
HSL
CMYK
%
%
%
%
CMYK は印刷用カラースペースです。値は RGB から計算され、整数パーセントに丸められます。
カラーコンバーターとは?
カラーコンバーターは、Web・デザイン・印刷で使われる各種フォーマット間で同じ色を変換するツールです。同じ青でも #4F8AB2、rgb(79, 138, 178)、hsl(207, 38%, 50%)、cmyk(56%, 22%, 0%, 30%) のように書き分けられますが、表記が違うだけで色は同じです。
カラーフォーマットの早見表
- HEX - CSS やデザインツールで使われる6文字の16進コード（例: #4F8AB2）。
- RGB - 0〜255 の Red / Green / Blue 値。CSS や多くの API で利用されます。
- HSL - 色相 (0-360)、彩度 (%)、明度 (%)。視覚的な調整に向いています。
- CMYK - Cyan・Magenta・Yellow・Key の4チャンネル形式。印刷向けです。
AIエージェントからこのツールを使う
無料のJSON APIとModel Context Protocol (MCP) サーバー。登録不要、APIキー不要、CORS開放。Claude、ChatGPT、Cursor、スクリプト、フロントエンドアプリ向けに設計。
curl -X POST https://mate.tools/api/v1/color-convert.php \
-H "Content-Type: application/json" \
-d '{"color":"#FF5733"}'import urllib.request, json
req = urllib.request.Request(
"https://mate.tools/api/v1/color-convert.php",
data=json.dumps({"color":"#FF5733"}).encode(),
headers={"Content-Type": "application/json"},
)
with urllib.request.urlopen(req) as r:
print(json.load(r))const r = await fetch("https://mate.tools/api/v1/color-convert.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({"color":"#FF5733"}),
});
console.log(await r.json()); Claude Desktopのclaude_desktop_config.json、Cursorの~/.cursor/mcp.json、その他のMCP対応クライアントに追加:
{
"mcpServers": {
"mate-tools": {
"command": "npx",
"args": ["-y", "@mate-tools/mcp-server"]
}
}
}よくある質問
HEX コードを2文字ずつ3組に分け、それぞれを16進から10進に変換します。#4F8AB2 なら 4F = 79、8A = 138、B2 = 178 となり、rgb(79, 138, 178) です。コンバーターはリアルタイムで計算します。
HEX・RGB・HSL は同じ RGB カラーを別の書き方で表したものです。HEX はコンパクト、RGB はチャンネル値そのまま、HSL は色相・彩度・明度を直感的に調整できます。CMYK は印刷用の独立した4チャンネル空間で、RGB から計算されるため画面上の色と完全には一致しません。
はい。3桁の HEX は各桁を倍にした省略形で、#FA0 は #FFAA00 と同じ意味です。コンバーターは # の有無や3桁・6桁いずれにも対応します。
画面は加法混色の RGB、印刷は減法混色の CMYK を使うため、すべての RGB 色に完全に対応する CMYK は存在しません。プロのデザインソフトは紙やインク、プリンターのプロファイルを反映しますが、ここでの値は数式どおりの変換結果で、出発点として使えます。
RGB の各チャンネルは 0〜255、HSL の彩度と明度は 0〜100% にクランプされます。色相は 0〜360 度の値として扱います。範囲外を入力すると有効範囲に丸められ、他のフォーマットも自動的に更新されます。
