カラー変換ツール
RGB、HEX、HSL形式間で色を変換します。デザイナーと開発者向けのプレビューとワンクリックコピー機能付き無料カラー変換ツール。
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
RGB値
59
赤
130
緑
246
青
HSL値
217度
色相
91%
彩度
60%
明度
🔒 ブラウザで動作する高速で無料の計算機。アップロード不要、100%プライベート。
最終更新: 2026年1月
関連する計算機
よくある質問
HEXをRGBに変換するには？
#FF5733のようなHEXカラーは、ペアに分割してRGBに変換します：FF=255（赤）、57=87（緑）、33=51（青）。各ペアは16進数（0-FF）で、10進数の0-255を表します。つまり#FF5733 = RGB(255, 87, 51)。#F53のような短縮形HEXは各桁を展開：#FF5533。このコンバーターは自動で計算します—任意の形式を入力するだけで即座に結果が得られます。
RGBとHSLの違いは何ですか？
RGB（赤、緑、青）は光の強度を混ぜて色を定義します（各0-255）。HSL（色相、彩度、明度）はより直感的です：色相はカラーホイール上の位置（0-360°）、彩度は色の強さ（0-100%）、明度は明るさ（0-100%）です。HSLは調整が簡単—色を明るくするにはLを上げるだけ。彩度を下げるにはSを減らします。RGBはスクリーンが表示するもの、HSLは人間が色を考える方法です。
CSSでHEXとRGBのどちらを使うべき？
静的な色にはHEX（#FF5733）を使用—コンパクトで広くサポートされています。透明度が必要な場合はRGBまたはRGBAを使用：rgba(255, 87, 51, 0.5)は50%透明な色を作成。HSLはプログラム的な色の操作に最適—明度や彩度の調整が簡単です。モダンCSSは3つのフォーマットすべてを同等にサポートするので、可読性とアルファチャンネルの必要性に基づいて選択してください。
補色を見つけるには？
補色はカラーホイール上で反対側にあり、最大のコントラストを生み出します。HSLでは、色相に180°を加算または減算するだけ。例えば、色がH=30°（オレンジ）の場合、補色はH=210°（青）です。SとLは同じに保ちます。赤（#FF0000、H=0°）はシアン（H=180°）と補色関係。このコンバーターはHSL値を表示し、補色、トライアド（+120°）、スプリット補色（+150°/+210°）の計算を容易にします。
なぜ画面によって色が違って見えるのですか？
スクリーンは色域（表示可能な色の範囲）、キャリブレーション、パネル技術（IPS、OLED、TN）が異なります。#FF5733のような色は正確なデジタル値ですが、モニターはカラープロファイルと設定に基づいて異なる解釈をします。一貫した色のためには、ハードウェアキャリブレーションされたモニターを使用し、sRGBカラースペースでデザインし、複数のデバイスでテストしてください。印刷色はCMYKを使用し、RGBより色域が狭いです。