カラーコンバーター
HEX・RGB・HSL・HSV・CMYK間で色を変換
入力または選択すると、5つの表現がリアルタイムで更新されます。
色空間とその細則
1回の貼り付けで全形式
"indigo"、"#4f46e5"、rgb(79,70,229)、hsl(245,58%,59%)を貼り付けると、5つの表現がすべて即座に得られます。モードごとに色を入力し直す必要はありません。
ピッカー付きライブ色見本
入力またはネイティブカラーピッカーのドラッグでプレビューが更新されるため、変換する色は目で見ている色見本と正確に一致します。
1クリックでコピー
各形式の行にコピーボタンがあり、すべてブラウザでオフライン動作します。パレットの在庫管理にアップロードは不要です。
カラーコンバーターとは？
カラーコンバーターは、ツールごとに話される形式間で単一の色を変換します。デザインソフトはHEXやCMYKを出力し、フロントエンドエンジニアはCSS用にrgb()やhsl()を必要とし、データツールはhsv()を求めるかもしれません。カラーピッカーを5回開く代わりに、持っている値を貼り付ければ他をすべて即座に見られます。"#4f46e5" → rgb(79, 70, 229) → hsl(245, 58%, 59%)。
できること
- hex（#fff、#ffffff、#rrggbbaa）とrgba()入力を解析
- 任意入力のrgb / hsl / hsv / cmyk相当を計算
- 入力や選択に合わせて更新されるライブプレビュー色見本
- 存在する場合アルファを保持（8桁hex、rgba）
- 各形式を個別のボタンでコピー
- ビジュアル選択のためのネイティブカラーピッカー
使う場面
- デザインツールのブランド色をCSS変数へ
- 印刷のCMYK値をWebセーフなhexに変換
- CSSグラデーションやダークモードパレット用にhsl値を取得
- 他のコンバーターが色をどう丸めたか確認
プライバシー：変換はすべてブラウザ内で行われ、入力した内容がアップロードされることはありません。
HEX、RGB、HSL、そしてコントラストの真の意味
- HEX と RGB は、異なる表記法で表現された同一の sRGB 値であり、相互変換は単なる算術演算であり、色のシフトを伴うことはありません。
- HSL は、同じ色域（gamut）を円柱座標系で表現したもので、色相（hue）は回転し、彩度（saturation）は半径方向に広がり、明度（lightness）は高さ方向に変化します。等間隔の HSL 値の差異は、人間の知覚上でも等しくはなく、その課題に対応するために OKLCH などの知覚的に均一な色空間が考案されました。
- WCAG のコントラスト比は、ガンマ補正を施した後の相対輝度に基づいて算出され、生の RGB 平均値からは計算されません。以下のチェッカーは、公式の WCAG 2.1 式を用いています。
よくある質問
対応形式は？⌄
hex（3・4・6・8桁。8桁はアルファ付き）、rgb()/rgba()、hsl()/hsla()、hsv()/hsb()、cmyk()。入力は#FFF、rgb(255 0 0)、hsl(0, 100%, 50%)のどれでも自動的に正規化されます。
変換は正確ですか？⌄
標準CSS変換式に一致します（チャンネルは整数に丸め）。HSL/HSVの色相は小数1桁の精度で保持され、CMYKは従来の変換で計算され、小数1桁の百分比に丸められます。
色はどこかに送信されますか？⌄
いいえ。すべてブラウザ内で純粋なJavaScriptにより動作します。転送も保存もされません。