色変換

HEX、RGB、HSL の色コードを変換し、共有しやすいコピースニペットとしてまとめます。

カラーコンバーター
選択した色 #3B82F6
共有URL https://comutil.com/ja/color
クリア
パレットプレビュー
推奨テキスト
#FFFFFF
色を選ぶと、正規化された出力、スニペット、可読性ガイドを生成します。
色形式とは何ですか?

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

色形式の詳細

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

主な使用例
  • デザインツールの色をCSSに変換
  • カラーテーマとパレットの作成
  • 色の明るさと彩度の調整
  • プラットフォーム間でのブランドカラーの統一
  • 色のコントラストのアクセシビリティテスト
形式比較
HEX #RRGGBB - コンパクトで広くサポートされ、コピー&ペーストが容易
RGB rgb(R, G, B) - プログラムでの操作に直感的
HSL hsl(H, S%, L%) - 要素を調整してバリエーションを簡単に作成可能
よくある質問

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

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

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

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