カラーコード変換ツール
HEX・RGB・HSL無料オンライン変換
HEX・RGB・HSLのカラーコードを相互に変換し、リアルタイムで色をプレビュー表示。WebデザインやCSS配色の確認に便利です。無料・登録不要・ブラウザだけで完結します。
カラーコード変換とは？
カラーコード変換とは、色を表現する異なる形式（HEX、RGB、HSL）を相互に変換することです。Webデザインやアプリ開発では、ツールやフレームワークによって使用するカラーコード形式が異なるため、変換作業が頻繁に発生します。
HEX（ヘックス）は「#FF5733」のように16進数で色を表す形式で、CSSやデザインツールで最も一般的に使われています。RGB（アールジービー）は赤・緑・青の光の三原色をそれぞれ0〜255の数値で指定する形式で、プログラミングや画像処理で多用されます。HSL（エイチエスエル）は色相（Hue: 0〜360度）・彩度（Saturation: 0〜100%）・明度（Lightness: 0〜100%）で色を表現し、人間の色認識に最も近い直感的なモデルです。デザイナーが配色を調整する際にはHSLが特に便利で、色相を固定したまま明るさや鮮やかさだけを変えるといった操作が容易にできます。
カラーコード変換ツールの使い方
HEX・RGB・HSLの変換はリアルタイムで行われ、どの入力欄からでも操作できます。
- 任意の形式で色を入力する — HEX入力欄（例：#2563eb）、RGB入力欄（例：R:37, G:99, B:235）、HSL入力欄（例：H:221, S:83, L:53）のいずれかに値を入力します。
- リアルタイムで変換結果を確認 — 1つの形式を入力すると、残りの2つの形式が自動的に計算・表示されます。プレビューエリアに色も即座に反映されます。
- カラーピッカーで視覚的に選択 — カラーピッカーをクリックしてブラウザの色選択ダイアログから直感的に色を選ぶこともできます。
- CSSにそのまま使用 — 表示されたHEX・RGB・HSLの値をそのままCSSプロパティに記述できます。
カラーコード変換の活用シーン・ユースケース
- WebデザインのCSS記述 — デザインカンプで指定されたHEXカラーをRGBやHSLに変換してCSSに記述します。透明度を使う場合はRGBA/HSLAへの変換が必要です。
- デザインツール間の色の受け渡し — FigmaではHEX、PhotoshopではRGBなど、ツールごとに主に使われる形式が異なるため、変換して正確な色を再現できます。
- 配色パレットの作成 — HSLモデルで色相を固定し、彩度や明度を段階的に変えることで、統一感のある配色バリエーションを作成できます。
- アクセシビリティのコントラスト確認 — 背景色と文字色のRGB値からコントラスト比を計算し、WCAG基準を満たすかチェックする際の事前変換に使えます。
- ブランドカラーの管理 — ブランドガイドラインのカラーをHEX・RGB・HSLすべての形式で確認・記録し、媒体ごとに適切な形式で使用できます。
- プログラミングでの色操作 — JavaScriptやPythonで色を動的に操作する際、HSLに変換してから明度を変更し、再度HEXに戻すといった処理に活用できます。
よくある質問
HEX、RGB、HSLの違いは何ですか？
HEX（ヘックス）は16進数で色を表す形式（例：#FF0000）で、CSSで最も広く使われています。RGB（アールジービー）は赤・緑・青の値を0〜255で指定する形式（例：rgb(255,0,0)）で、プログラミングや画像処理で使用されます。HSL（エイチエスエル）は色相・彩度・明度で色を表す形式（例：hsl(0,100%,50%)）で、人間の直感に近い色指定が可能です。
RGBとRGBAの違いは何ですか？
RGBは赤(R)・緑(G)・青(B)の3要素で色を表現する形式です。RGBAはこれにアルファ値(A)を加え、透明度も指定できる拡張形式です。アルファ値は0（完全に透明）から1（完全に不透明）の範囲で指定します。半透明の背景色やオーバーレイの実装に使われます。
HSLカラーモデルのメリットは何ですか？
HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）という人間の色認識に近いパラメータで色を指定できるのが最大のメリットです。「同じ色味で少し明るくしたい」「鮮やかさだけ下げたい」といった調整が、HEXやRGBよりも直感的に行えます。配色パレットの作成にも適しています。
3桁のHEXコードと6桁のHEXコードの違いは？
3桁のHEXコード（例：#F00）は6桁の短縮形です。各桁が2回繰り返され、#F00は#FF0000と同義です。3桁で表現できるのは4,096色に限られますが、6桁では16,777,216色（約1677万色）を表現できます。より正確な色指定には6桁を使用します。
カラーコードの変換結果をそのままCSSに使えますか？
はい、このツールで表示されるすべての値はCSSにそのまま使用できます。HEXなら「color: #2563eb;」、RGBなら「color: rgb(37, 99, 235);」、HSLなら「color: hsl(221, 83%, 53%);」のように記述できます。
CSSではどのカラーコードを使うべきですか？
どの形式でもCSSは対応していますが、用途に応じて使い分けるのがベストです。一般的にはHEXが最も普及しています。透明度が必要な場合はRGBAやHSLA、配色テーマを動的に変更する場合はHSLが適しています。チームの方針に合わせて統一するのがおすすめです。
Webでよく使われる色のカラーコード一覧
Webデザインで頻繁に使われる基本色のカラーコードを一覧にまとめました。CSSでの記述にそのままコピーしてお使いいただけます。
基本カラー
| 色名 | HEX | RGB | 用途の例 |
|---|---|---|---|
| ブラック | #000000 | rgb(0, 0, 0) | テキスト、ボーダー |
| ホワイト | #FFFFFF | rgb(255, 255, 255) | 背景、余白 |
| レッド | #EF4444 | rgb(239, 68, 68) | エラー、警告、削除ボタン |
| ブルー | #3B82F6 | rgb(59, 130, 246) | リンク、プライマリボタン |
| グリーン | #22C55E | rgb(34, 197, 94) | 成功、確認、有効状態 |
| イエロー/アンバー | #F59E0B | rgb(245, 158, 11) | 注意、警告バッジ |
| グレー | #6B7280 | rgb(107, 114, 128) | サブテキスト、プレースホルダー |
人気のUIフレームワークのカラー
| フレームワーク/サービス | メインカラー | HEX |
|---|---|---|
| Tailwind CSS（Blue 500） | Blue | #3B82F6 |
| Bootstrap（Primary） | Blue | #0D6EFD |
| Material Design（Blue 500） | Blue | #2196F3 |
| GitHub | Dark | #24292E |
| Twitter/X | Blue | #1DA1F2 |
| LINE | Green | #06C755 |
| YouTube | Red | #FF0000 |
配色のコツ：色の組み合わせパターン
Webデザインで美しい配色を作るには、色彩理論の基本パターンを知っておくと便利です。HSLカラーモデルを使うと、これらのパターンを簡単に作成できます。
| パターン名 | 説明 | HSLでの作り方 | 印象 |
|---|---|---|---|
| 補色（Complementary） | 色相環の反対側の色 | 色相を180度ずらす | コントラストが強く、目を引く |
| 類似色（Analogous） | 色相環で隣り合う色 | 色相を±30度ずらす | 調和がとれ、落ち着いた印象 |
| トライアド（Triadic） | 色相環を3等分した色 | 色相を120度ずつずらす | バランスの良い鮮やかさ |
| モノクロマティック | 同じ色相で明度・彩度を変える | H固定、S・Lを変動 | 統一感があり、洗練された印象 |
| スプリットコンプリメンタリー | 補色の両隣の色を使う | 色相を±150度ずらす | 補色より柔らかく、変化がある |
Webサイトの配色では、メインカラー1色 + アクセントカラー1色 + ニュートラルカラー（グレー系）の3色を基本にすると、まとまりのあるデザインになります。
関連記事
カラーコード完全ガイド
HEX・RGB・HSLの違いと使い分けを解説