カラーコード変換ツール｜HEX・RGB・HSL
HEX・RGB・HSLのカラーコードを相互変換します。Webデザイン・CSS開発に必須。
カラーコード変換ツール｜HEX・RGB・HSLとは
HEX・RGB・HSL・HSVのカラーコードを相互変換する無料オンラインツールです。#ff0000形式のHEXカラー、rgb(255,0,0)形式のRGB値、hsl(0,100%,50%)形式のHSL値を瞬時に相互変換。リアルタイムカラープレビュー付き。Webデザイン・CSS開発・デザイン作業に必須のカラーコード変換ツールです。
使い方
- 1カラーコード（HEX・RGB・HSL・HSVのいずれか）を対応する入力欄に入力してください。
- 2リアルタイムでHEX・RGB・HSL・HSVの全形式に自動変換されます。カラープレビューも同時に更新されます。
- 3各形式のコピーボタンで、使いたい形式をクリップボードにコピーできます。
- 4カラーピッカーを使って視覚的に色を選択することもできます。
メリット・特徴
- HEX・RGB・HSL・HSVの4形式をリアルタイムで相互変換
- カラープレビューで変換前後の色を視覚的に確認できる
- CSSで直接使えるrgb()・hsl()形式で出力
- 3桁HEX（#rgb）も自動的に6桁（#rrggbb）に展開して変換
- Webデザイン・フロントエンド開発・グラフィックデザインに必須
- 登録・インストール不要。ブラウザで即利用できる完全無料ツール
カラーコードの種類と使い分け
Webデザイン・CSS開発では複数のカラー形式が使われており、それぞれ用途に応じた使い分けが重要です。HEX・RGB・HSL・HSVの特徴を理解して、場面に合ったカラー形式を選択できるようになりましょう。
WebデザインにおけるHEX・RGB・HSLの役割
CSSでは複数のカラー形式がサポートされており、それぞれ用途に応じた使い分けが推奨されます。HEX（16進数）形式は最も広く使われており、デザインツールとの互換性が高く、短く書けるため可読性に優れています。RGB形式はJavaScriptでの動的なカラー操作（色の計算・グラデーション生成）に向いています。HSL形式はCSSカスタムプロパティと組み合わせたデザインシステム設計に便利で、明度を変えて色のトーンバリエーションを作る際に直感的に操作できます。TailwindやMaterial Designなどのデザインシステムではカラーパレットの管理にHSLが多用されています。
HSVとグラフィックデザインツールの関係
HSV（Hue・Saturation・Value）はHSBとも呼ばれ、Adobe PhotoshopやIllustratorのカラーピッカーで使われる形式です。Hは色相（0〜360°）、Sは彩度（0〜100%）、VまたはBは明るさ（0〜100%）を表します。HSLとHSVは似た概念ですが計算式が異なります。グラフィックツールで指定したHSV値をWebのCSSに適用したい場合は、本ツールを使ってHSV→HEXまたはRGBに変換するのが効率的です。PhotoshopやFigmaから色をコピーしてWeb実装する際のブリッジとして活用できます。
カラーコード変換の実践テクニック
カラーコード変換をCSSカスタムプロパティやアクセシビリティ対応と組み合わせることで、より効果的なデザインシステムを構築できます。
CSSカスタムプロパティとHSLの活用
モダンなCSSではHSL形式をカスタムプロパティ（CSS変数）と組み合わせて使うことで、柔軟なデザインシステムを構築できます。例えば「--color-primary: hsl(220, 90%, 56%)」のように定義し、明度だけを変えた「--color-primary-light: hsl(220, 90%, 75%)」のようなバリエーションを作れます。これにより、ブランドカラーを変更する際にHSLの数値を調整するだけで、アプリ全体の色を一貫して更新できます。本ツールでブランドカラーのHEXをHSLに変換し、デザインシステムに組み込む用途に活用してください。
コントラスト比とアクセシビリティの確認
Webアクセシビリティのガイドライン（WCAG 2.1）では、テキストと背景のコントラスト比がAA基準で4.5:1以上必要とされています。カラーコードを変換した後は、テキストカラーと背景カラーのコントラスト比を確認することが重要です。HSLの明度（L値）を参考にすると、明度差が大きいほどコントラストが高いと大まかに判断できますが、正確な計算にはコントラストチェッカーを使用してください。Figmaのアクセシビリティプラグインや本サイトのカラーコントラストチェッカーと組み合わせることで、アクセシブルなカラー設計が実現できます。
よくある質問（FAQ）
- HEX・RGB・HSL・HSVの違いは何ですか？
- HEXは#RRGGBBの16進数形式でCSSで最もよく使われます。RGBは赤・緑・青を0〜255の数値で表します。HSLは色相(0〜360°)・彩度(0〜100%)・明度(0〜100%)で色を定義し、直感的に色を調整できます。HSVはHSBとも呼ばれ、色相・彩度・明度（Value/Brightness）で表現します。PhotoshopなどのグラフィックツールではHSVが使われることが多いです。
- 3桁のHEX（#rgb）も変換できますか？
- はい、#f00のような3桁のHEXも自動的に6桁（#ff0000）に展開して変換します。3桁HEXは各桁を2回繰り返した6桁HEXと同じ色を表します。
- 透明度（アルファ値）には対応していますか？
- 現在はRGBA・HSLAなどのアルファ値には対応していません。透明度を含むカラーコードの変換が必要な場合は、アルファ値を別途設定してください。
- デザインツール（Figma・Photoshop）と連携できますか？
- FigmaはHEX・RGB・HSLのカラー形式に対応しているため、本ツールで変換したカラーコードをそのまま入力できます。PhotoshopはHSB（HSV）・RGB・HEXに対応しています。各ツールの仕様に合わせて形式を選んでコピーしてください。
- HSLで明度を調整するとどうなりますか？
- HSLのL（明度）を50%から上げると白に近づき、下げると黒に近づきます。彩度（S）を0%にするとグレースケール色になります。HSLは色のバリエーションを作る際に直感的で、Tailwind CSSなどのデザインシステムでも多用されています。
- カラーコードをCSSに貼り付けるにはどうすればいいですか？
- 変換後の各形式のコピーボタンをクリックすると、CSSで使える形式のまま（例: #ff0000 や rgb(255, 0, 0) や hsl(0, 100%, 50%)）クリップボードにコピーされます。そのままCSSのcolor・background-colorなどのプロパティに貼り付けて使用できます。
不具合や動作がおかしい点を見つけたら教えてください。
不具合報告はこちら →