色変換

HEX、RGB、HSLカラーコードをライブプレビューで相互変換します。

カラーコンバーター
プレビュー
色の値
色を入力すると変換結果が表示されます
対応形式
HEX #FF5733, #F53, ff5733
RGB rgb(255, 87, 51), 255, 87, 51
色形式とは何ですか？

ウェブ上の色は複数の形式で表現できます。HEXは16進表記（#RRGGBB）を使用し、RGBは赤、緑、青の成分（0-255）を指定し、HSLは色相（0-360）、彩度、明度（0-100%）を使用します。各形式は、デザイン作業やプログラムによる色操作など、異なるユースケースに利点があります。

色形式の詳細

HEX色はRGB値を16進数でエンコードします（チャンネルあたり16-255）。RGBは色の強度（0-255）を直接指定します。HSLは色（色相）と強度（彩度/明度）を分離し、色のバリエーションを作成するのに直感的です。すべての形式で同じ1670万色を表現できます。

主な使用例
  • デザインツールの色をCSSに変換
  • カラーテーマとパレットの作成
  • 色の明るさと彩度の調整
  • プラットフォーム間でのブランドカラーの統一
  • 色のコントラストのアクセシビリティテスト
形式比較
HEX #RRGGBB - Compact, widely supported, easy to copy/paste
RGB rgb(R, G, B) - Intuitive for programmatic manipulation
HSL hsl(H, S%, L%) - Easy to create variations by adjusting components
よくある質問

RGBではなくHSLを使用すべきタイミングは？

HSLは、単一のコンポーネントを調整するだけで色のバリエーション（明るく、暗く、彩度を上げる/下げる）を作成する必要がある場合に適しています。RGBは色の混合や画像処理に適しています。

HEXの短縮形とは何ですか？

HEXの短縮形は6桁の代わりに3桁を使用します（#RRGGBBの代わりに#RGB）。各桁は2倍になります：#F00は#FF0000（赤）になります。各ペアが同一の桁を持つ場合にのみ機能します。