カラーコンバーター
HEX、RGB、HSL形式間でカラーピッカー付きで色を変換。
このツールについて
カラーコンバーターは、HEX・RGB・HSL形式の間でカラー値を即座に変換する無料オンラインツールです。どの形式でも値を入力するか、ビジュアルカラーピッカーを使用すると、3つの表現がすべて同時に更新されます。CSS対応の出力でスタイルシート・デザイントークン・コードに直接貼り付けられます。インストール不要、サーバー不要。
このコンバーターはCSS・デザインツール・ブランドスタイルガイドで頻繁に色形式を切り替えるWebデベロッパーとデザイナー向けに構築されています。HEXはHTML属性とCSSのhexリテラルで使用され、RGBはCSS rgb()関数とCanvas APIで使用され、HSLはCSSでより読みやすく調整可能な色定義に使用されます。
デザインツール（Figma・Adobe XD）とコード間での色の変換・異なる形式でのブランドカラーの一貫性確認・HSLの色相と明度を調整した色のバリエーションの探索に最も役立ちます。コントラストチェッカーとの組み合わせがアクセシビリティテストに特に有効です。
使い方
- 1
HEX・RGB・HSLのいずれかの形式で色の値を入力するか、ビジュアルカラーピッカーを使用します。
- 2
他のすべての形式フィールドが同等の色の値に自動的に更新されます。
- 3
ワンクリックで任意の形式の値をコピーします。
- 4
HTMLにはHEX値を、CSS rgb()関数にはRGB値を、読みやすいHSL定義にはHSL値を使用します。
- 5
コードを知らなくてもカラーピッカーで視覚的に色を選択して色相を探索できます。
機能
3形式のサポート
HEX（#RRGGBB）・RGB（チャンネルごと0〜255）・HSL（色相・彩度・明度）間で即座に変換できます。
ビジュアルカラーピッカー
ネイティブカラーピッカーで視覚的に色を選択できます。すべての形式フィールドが同期して更新されます。
CSS対応出力
スタイルシートに直接貼り付けられるCSS互換形式でカラー値をコピーできます。
リアルタイム変換
入力したり色を選択したりするたびにすべての形式フィールドが即座に更新されます。ボタンをクリックする必要はありません。
主な活用事例
- ›CSSカスタムプロパティやデザイントークンで使用するためにブランドカラーをHEXからRGBまたはHSLに変換する。
- ›FigmaやAdobe XDのHEXカラー値をコードベースが必要な形式に変換する。
- ›Canvas APIやSVGのfill属性で使用するためにHEXカラーのRGB相当値を見つける。
- ›HSL値を調整して明るい・暗い・より彩度の高いトーンのカラーバリエーションを作成する。
よくある質問
どの色形式に対応していますか？
HEX（#RRGGBB）、RGB（0-255）、HSL（色相0-360、彩度0-100%、明度0-100%）。
カラーピッカーは使えますか？
はい、カラーピッカーをクリックして視覚的に色を選択できます。すべての形式が自動更新されます。
RGBとHSLの違いは何ですか？
RGBは赤・緑・青のチャンネル強度（各0〜255）で色を定義します。HSLは色相（0〜360°）・彩度（0〜100%）・明度（0〜100%）で色を定義し、色を明るくしたり彩度を変えたりするのに直感的です。
RGBA や HSLA（アルファ/不透明度付き）も変換できますか？
現在のツールはアルファチャンネルなしの3つのコア形式（HEX・RGB・HSL）を変換します。RGBAとHSLAのサポートは今後のアップデートで追加される予定です。
出力の色の値はCSS互換ですか？
はい。すべての出力値は標準のCSSフォーマットです（HEXは#RRGGBB、RGBはrgb(r, g, b)、HSLはhsl(h, s%, l%)）。スタイルシートに直接貼り付けられます。