CSS色変換ツール

このツールでできること

このツールは、スタイルシートで実際に使う3つの色表記、HEX、RGB、HSLだけを扱う変換ツールです。#F00のような短縮HEX、#FF0000のような完全なHEX、rgb()やhsl()の値を入力でき、ネイティブのカラーピッカーから視覚的に選ぶこともできます。ツールは最初の3チャンネルを読み取り、正規化したHEX、RGB、HSLとスウォッチを表示します。解析できない値は推測せず、無効な色として表示します。境界も明確です。rgba()とhsla()は入力として読めますが、alphaは無視され、出力にはRGBAも8桁HEXも出ません。CMYK、Pantone、印刷向け変換、HSV、LAB、LCH、OKLCH、色プロファイル変換、tomatoのようなCSS色名は対象外です。パレット生成、WCAGコントラスト評価、スポイト、画像アップロード、バッチ変換、ファイルダウンロードもありません。1つの色を3つのWeb表記に書き換えるための小さなツールです。入力した色と変換結果はブラウザ内に残り、LocalToolsへアップロードされません。

使い方

1. HEX、RGB、HSL値を貼り付けるか、ネイティブのカラーピッカーで色を選びます。
2. 最初の3チャンネルが解析され、正規化されたHEX、RGB、HSLに変換されます。
3. スウォッチを確認し、必要な表記をコピーします。解析できない値は無効な色として表示されます。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

ここでHEXをRGBに変換するには？

HEXコードを#付きまたは#なしで貼り付けます。2桁ごとに0-255のチャンネルへ変換され、RGBとHSLがスウォッチと一緒にすぐ表示されます。

HEX、RGB、HSLの違いは？

同じsRGB色を3通りに表します。HEXはチャンネルを16進数でまとめ、RGBは0-255の数値で示し、HSLは色相、彩度、明度で表すため手で調整しやすい形式です。

対応している入力形式は？

3桁と6桁のHEX、rgb()、rgba()、hsl()、hsla()です。CSS色名、CMYK、HSV、LAB、LCH、OKLCHは受け付けず、画像やファイル入力もありません。

8桁HEXの透明度が消えるのはなぜ？

alphaを意図的に捨てるためです。RGBAとHSLAは解析できますが、変換されるのは最初の3チャンネルだけなので、出力は常にalphaなしのHEX、RGB、HSLです。

RGBとHEXはいつ使い分けますか？

チャンネル値を計算するならRGB、明度や彩度を手で動かすならHSL、静的なCSS値を短く書くならHEXが便利です。このツールでは3つすべてを表示します。