Color Converter
Convert between HEX, RGB, and HSL color formats with live preview.
Color
Complementary
#c47d09
Formatted Values
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
このカラー変換ツールは、1つの色を CSS でよく使う3つの形式 HEX・RGB・HSL に同時に表示します。いずれかの欄に値を入力するかカラーピッカーを動かすと、ほかの形式が即座に再計算されるため、変換式を手で計算する必要はありません。
デザインツールは HEX を返すのにスタイルシートは HSL を使うとき、明度だけを微調整したいとき、または手早く補色がほしいときに便利です。すべての計算はブラウザ内で行われ、色のデータがサーバーに送られることはありません。
使い方
- 標準のカラーピッカーで色を選ぶか、#3b82f6 のような6桁の HEX コードを HEX 欄に貼り付けます。
- R・G・B（各0〜255）または H・S・L（色相0〜360、彩度・明度0〜100）の数値を調整して色を整えます。
- 1つの欄を変えるだけで、見本のスウォッチと3形式の値がリアルタイムに連動して更新されます。
- HEX・RGB・HSL の横にあるコピーボタンで、その CSS 文字列をそのままクリップボードにコピーします。
- 補色のスウォッチで反転した色を確認し、アクセントが必要ならその HEX 値をコピーします。
よくある質問
- 対応しているカラー形式は何ですか？
- HEX（#ff8800 のような6桁）、RGB（各チャンネル0〜255）、HSL（色相0〜360度、彩度・明度0〜100%）に対応します。1つを編集すると残り2つが自動で更新されます。
- RGB と HSL の値は有効範囲に制限されますか？
- はい。RGB は四捨五入のうえ0〜255、色相は0〜360、彩度と明度は0〜100に制限されるため、範囲外の値は入力できません。
- 補色はどのように計算されますか？
- 各 RGB チャンネルを反転（255から引く）して色相環の反対側の色を作ります。本格的なパレット生成ではなく、アクセント色を決める手早い出発点です。
- アルファ値や3桁の短縮 HEX には対応していますか？
- いいえ。HEX 欄はアルファなしの6桁コードを受け付けます。#f80 のような短縮形は先に #ff8800 へ変換し、透明度は CSS 側で別途指定してください。
- 入力した色のデータはどこかに送信されますか？
- いいえ。すべての変換はブラウザの JavaScript で処理されます。サーバーには何も送信されず、ページの読み込み後はオフラインでも動作します。