カラーコード変換ツール

RGB・HEX・HSLのカラーコードを相互に変換します。色のプレビューも確認できます。

このツールの使い方

特徴

• ブラウザ内完結:変換処理はサーバーに送信されません。
• 3つの形式に対応:HEX・RGB・HSLを相互変換できます。
• カラープレビュー:色の見た目を確認できます。
• ワンクリックコピー:各形式のコードを簡単にコピーできます。
• 入力バリデーション:正しい値の範囲を自動チェックします。
• レスポンシブ対応:スマホ・タブレットでも快適に操作できます。
• 完全無料:登録不要で今すぐ使えます。

よくある使用例

• Webデザインでの色指定の変換
• CSSのカラーコード記述
• デザインツール間での色情報の受け渡し
• カラーパレットの作成
• 画像編集ソフトとWebの色合わせ
• アクセシビリティチェック用の色情報確認

注意点

変換処理はブラウザ上でのみ行われ、サーバーには保存されません。安心してご利用ください。RGB・HSLからHEXへの変換時に、小数点以下の値は切り捨てられます。

カラーコード形式について

HEX(16進数)

HEXカラーコードは、#に続く6桁の16進数で色を表現します。例: #FF5733

• 最初の2桁: 赤(R)の強さ(00〜FF)
• 次の2桁: 緑(G)の強さ(00〜FF)
• 最後の2桁: 青(B)の強さ(00〜FF)

Webデザインで最も一般的な形式で、CSSでそのまま使用できます。

RGB(Red Green Blue)

RGBは赤・緑・青の3つの数値(0〜255)で色を表現します。例: rgb(255, 87, 51)

• R: 赤の強さ(0〜255)
• G: 緑の強さ(0〜255)
• B: 青の強さ(0〜255)

CSSやプログラミング言語で広く使用される形式で、直感的に理解しやすいのが特徴です。

HSL(Hue Saturation Lightness)

HSLは色相・彩度・明度の3つの値で色を表現します。例: hsl(9, 100%, 60%)

• H(色相): 色の種類を角度で表現(0〜360度)
• S(彩度): 色の鮮やかさ(0〜100%)
• L(明度): 色の明るさ(0〜100%)

色の調整が直感的に行えるため、デザイナーに好まれる形式です。