色変換ツール

RGB・HEX・HSL・HSV形式の相互変換

カラープレビュー

色の値を入力すると、ここにプレビューが表示されます

HEX (16進数)

例: #FF0000、#F00、FF0000（大文字・小文字どちらも可）。コピーは「#」付き6桁の大文字です。

🔴 RGB (0-255)

🌈 HSL (色相・彩度・明度)

°
%
%

💎 HSV (色相・彩度・明度)

°
%
%

🏷️ HTMLカラーコード

一覧の30色から選ぶとその色に変わります。ほかの方法で色を変えた場合は、30色のいずれかと完全に一致するときだけ色名を表示し、一致しないときはコピーしません。

🎯 カラーピッカー

🔢 ランダム色生成

色履歴

色を確定するたびに最新10件まで残し、このブラウザーに保存して次回も表示します。押すとその色を読み込みます。

カラープリセット

赤
緑
青
黄
マゼンタ
シアン
オレンジ
紫
ピンク
茶
グレー
黒

色変換について

HEX (16進数)

WebデザインやCSSで最も一般的な色表現。#RRGGBBの形式で表記。

RGB (Red Green Blue)

赤、緑、青の光の三原色で色を表現。各色0-255の値で指定。

HSL (Hue Saturation Lightness)

色相、彩度、明度で色を表現。直感的に色を調整しやすい。

HSV (Hue Saturation Value)

色相、彩度、明度（輝度）で色を表現。HSLとは明度の計算方法が異なる。

入力と変換のしかた

  • どの形式の欄に入力しても、入力中にほかの形式とプレビューを更新します。入力欄から移動するかEnterで確定すると、入力した欄の表記もそろえます（例: f00 → #FF0000）。
  • HEXは「#」の有無、3桁・6桁のどちらでも入力できます。透明度付きの8桁（#RRGGBBAA）や色名の直接入力には対応していません。形式が正しくない間はほかの欄を変えず、入力欄の下にメッセージを表示します。
  • 数値は整数で扱い、範囲外の値は補正します。RGBは0〜255に、HSL・HSVの彩度・明度は0〜100に収め、色相は360で割った余り（例: 400 → 40、-30 → 330）にします。空欄は0として扱います。
  • 色はRGB（整数）を基準に保ちます。RGB・HEX・ピッカーから入力した場合、HSL・HSVは整数のRGBから計算するため、元の値と1程度ずれることがあります。HSL・HSVの欄に入力した場合は、入力した値をそのまま表示します（彩度0でも色相を保ちます）。
  • ランダム生成はRGBの各値を0〜255から無作為に選びます。プリセット・ランダム・色名・履歴から選んだ色は、すぐに履歴に追加します。
  • 色履歴は最新10件で、同じ色は重ねて追加しません。履歴はこのブラウザーの保存領域（localStorage）に残り、「履歴クリア」で消せます。処理はブラウザ内で行い、入力した内容をサーバーへ送信しません。