カラーコード変換
HEX・RGB・HSLカラーコードをリアルタイムで相互変換。カラープレビュー・スライダー調整・ワンクリックコピー機能付き。CSSやWebデザインの開発に便利な無料オンラインツール。
HEX・RGB・HSLのカラーコードをリアルタイムで相互変換できるオンラインツールです。Webデザインやフロントエンド開発で色の指定を行う際に、各形式の値を素早く確認・調整できます。
HEX
#00ff88RGB
rgb(0, 255, 136)HSL
hsl(152, 100%, 50%)// 詳細
カラーモデルの違い
HEXは16進数6桁（例：#FF5733）で色を簡潔に表現します。RGBは赤・緑・青の光の三原色を0〜255の数値で指定します。HSLは色相（0〜360度）・彩度（0〜100%）・明度（0〜100%）で色を表現し、「もう少し明るく」「彩度を下げて」といった直感的な色調整が可能です。
CSSでの使い分け
CSSではHEX、RGB、HSLのいずれも使用できます。HEXはデザインカンプからの値指定に、RGBはJavaScriptでの動的な色変更に、HSLはテーマカラーのバリエーション作成に適しています。CSS Variables（カスタムプロパティ）と組み合わせる場合は、HSLの各値を個別に変数化すると柔軟な色管理が可能です。
アクセシビリティと色選び
Webアクセシビリティの観点では、テキストと背景のコントラスト比が重要です。WCAG 2.1では通常テキストに4.5:1以上、大きなテキストに3:1以上のコントラスト比を求めています。色を選ぶ際は、見た目だけでなくコントラスト比も意識しましょう。
// FAQ
- HEX、RGB、HSLの違いは何ですか？
- HEXは16進数で色を表現（例：#FF0000）、RGBは赤・緑・青の0-255の値で表現（例：rgb(255,0,0)）、HSLは色相・彩度・明度で表現（例：hsl(0,100%,50%)）します。用途に応じて使い分けます。
- CSSでどの形式を使うべきですか？
- どの形式でもCSSで使用できます。HEXは簡潔で広く使われ、RGBは透明度（RGBA）を指定しやすく、HSLは色の調整が直感的です。
- 透明度（アルファ値）には対応していますか？
- はい、RGBA形式とHEXA（8桁HEX）に対応しています。
- デザインツールからコピーしたカラーコードをそのまま使えますか？
- はい、HEX（#付き・なし）、RGB（rgb()形式・カンマ区切り）、HSL（hsl()形式）など、一般的なカラーコードの記法をそのまま入力できます。
// 使い方
-
カラーコードを入力
HEX、RGB、HSLいずれかの形式でカラーコードを入力します。
-
変換結果を確認
入力した色が他の形式に自動変換されます。カラープレビューも表示されます。
-
値を調整
スライダーで色を直感的に調整することもできます。