Color Converter

概要

• HEX・RGB・HSLのいずれかの形式で色を入力すると、3つの表記すべてとカラープレビューを一度に表示するツールです。

• CSSやデザインツールで色を指定する際、手元にある表記から別の表記へ素早く変換したい場面で使います。

• 3桁の省略形HEX（例: #F00）にも対応しており、自動的に6桁形式に展開して変換します。

使い方

1. 1

   入力欄にHEX（#FF5733）、RGB（rgb(255, 87, 51)）、HSL（hsl(9, 100%, 60%)）のいずれかの形式で色を入力します。

2. 2

   「変換する」ボタンをクリックします。

3. 3

   HEX・RGB・HSLすべての表記とプレビューが表示されます。

入力例・出力例

#FF5733

rgb(255, 87, 51) / hsl(9, 100%, 60%)

利用シーン

• デザインツール（Figmaなど）で確認したHEXカラーを、CSSで使うRGB/HSL表記に変換する

• HSLで明度・彩度を調整した色を、実装で使うHEXコードに変換する

• デザインカンプに記載された色指定を、実装用に別の表記へ変換して確認する

よくある質問

注意点

• rgba()・hsla()のようにアルファ値（透明度）を含む形式も入力できますが、アルファ値は無視されRGB/HSLの色情報のみが変換されます。

• RGBが256以上、HSLの彩度・明度が100%を超えるなど、範囲外の値を入力するとエラーになります。

• 変換結果はページ上にのみ保持されます。再読み込みすると失われるため、必要な場合はコピーして保存してください。