カラーコード変換

カラーコード変換でできること

HEX・RGB・HSL・CMYKの4つのカラーコードを相互変換できるオンラインツールです。いずれかの形式で色を入力すると、他の形式にリアルタイムで自動変換されます。カラーピッカーで直感的に色を選ぶこともでき、各値はワンクリックでコピーできます。

使い方

HEX入力欄

16進数カラーコード（例: #3B82F6）を入力すると、RGB・HSL・CMYKに自動変換されます。

RGB入力欄

R（赤）・G（緑）・B（青）の各値（0〜255）を個別に入力できます。

HSL入力欄

H（色相: 0〜360）・S（彩度: 0〜100）・L（明度: 0〜100）の各値を入力できます。

CMYK表示

現在の色のCMYK値（C・M・Y・K各パーセント）を表示します。コピーボタンで値を取得できます。

カラーピッカー

ブラウザのカラーピッカーから視覚的に色を選択できます。選んだ色は全形式に即座に反映されます。

カラープレビュー

現在の色を大きな領域で表示し、実際の見た目を確認できます。

コピーボタン

各形式の横にあるコピーボタンで、カラーコードをクリップボードにコピーできます。

リセット

すべての入力値を初期状態に戻します。

よくある質問

このツールは無料ですか？

はい、無料です。登録も不要です。

データはサーバーに送信されますか？

いいえ、すべての処理はブラウザ内で完結します。

HEX・RGB・HSL・CMYKはどう違いますか？

HEXは#RRGGBBの16進数表記でCSSで広く使われます。RGBは赤・緑・青の0〜255の数値で表します。HSLは色相（0〜360°）・彩度・明度で表し、人間が直感的に色を調整しやすい形式です。CMYKはシアン・マゼンタ・イエロー・ブラックの印刷用カラーモデルです。このツールではこれら4形式を相互変換できます。

カラーピッカーで選んだ色をコードに変換できますか？

はい、カラーピッカーで色を選択すると対応するHEX・RGB・HSL・CMYKのコードがすべて自動で表示されます。

CSSで使う色コードはどの形式ですか？

CSSではHEX（#3b82f6）、RGB（rgb(59, 130, 246)）、HSL（hsl(217, 91%, 60%)）のいずれも使えます。用途に合わせて変換してご利用ください。