カラーコード変換

カラーコード変換

HEX、RGB、HSLの色コードを入力するかカラーピッカーを使うと、プレビューと各形式の値が更新されます。入力が有効な場合は、対応するHEX、RGB、HSL、HSBの値を確認できます。

CSS色名は、このツールが対応している名前リストと完全一致する場合だけ表示されます。

よくある使い方

デザイン値をCSS向けに変換する

デザイン上のHEXカラーを、CSSで使う rgb(...) や hsl(...) の値に変換できます。

色を素早く確認する

カラーピッカーとプレビューを使って、コピー前に色を確認できます。

短いHEXを正規化する

#f00 のような短いHEXを入力し、6桁のHEX出力をコピーできます。

使い方

1. HEX、RGB、HSL、または対応しているCSS色名を入力します。
2. またはカラーピッカーで色を選びます。
3. HEX、RGB、HSL、HSBの出力を確認します。
4. 必要な値の横にある コピー を使います。

注意点・制限

このツールは色形式の変換用です。アクセシビリティのコントラスト判定やパレット生成は行いません。

• HEX入力は #RGB、#RRGGBB、RGB、RRGGBB に対応しています。
• RGB入力は rgb(r, g, b) 形式で、各値は0〜255の整数です。
• HSL入力は hsl(h, s%, l%) 形式で、色相は0〜360、割合は0〜100です。
• HSBは出力のみです。HSB形式の入力には対応していません。
• アルファ値、lab()、lch()、oklch() には対応していません。
• CSS色名は対応している一部の名前のみです。

プライバシーと処理

色の解析と変換はブラウザ内のJavaScriptで実行されます。このカラーコード変換ツールのコードは、入力した色をサーバーに送信しません。