カラーコンバーター
HEX/RGB/HSL形式の色コードを相互変換します
カラープレビュー
HEX
RGB
HSL
CSS コード
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
💡 カラーコードの雑学・Tips
🎨 HEXコードは16進数で色を表現
HEXカラーコード（#RRGGBB）は、赤・緑・青の各色を00〜FFの16進数（0〜255）で表現します。例えば #FF0000 は赤255・緑0・青0で純粋な赤色です。短縮形の3桁表記（#RGB）もあり、#F00 は #FF0000 と同じ意味になります。
🌈 HSLは人間の感覚に近い色指定
HSL（色相・彩度・明度）は、RGBやHEXより直感的に色を調整できます。色相（Hue）で色の種類を、彩度（Saturation）で鮮やかさを、明度（Lightness）で明るさを調整します。CSSでアニメーションやホバー効果を作る際、HSLを使うと「同じ色相で明度だけ変える」といった調整が簡単です。
💻 Webセーフカラーは今や過去の遺物
かつて256色しか表示できないモニターが主流だった時代、すべての環境で正しく表示できる「Webセーフカラー」216色が推奨されていました。現在のディスプレイは1677万色（24bit カラー）以上を表示できるため、Webセーフカラーを気にする必要はなくなりました。
♿ アクセシビリティには色のコントラスト比が重要
WCAG（Webコンテンツアクセシビリティガイドライン）では、テキストと背景のコントラスト比が4.5:1以上（大きな文字では3:1以上）であることが推奨されています。視覚障害のあるユーザーでも読みやすいデザインを実現するため、色選びの際はコントラスト比チェックツールの併用をおすすめします。
🖥️ sRGBとディスプレイP3の違い
従来のWeb標準色空間はsRGBですが、最新のディスプレイは広色域のDisplay P3に対応しています。CSS Color Level 4では color(display-p3 ...) でP3色域の色を指定できますが、非対応ブラウザではフォールバックが必要です。鮮やかな色表現が重要な写真・デザインサイトで活用されています。