Color Converter｜HEX / RGB / HSL の相互変換とカラーパレット作成

色 HEX RGB HSL
結論：30秒でカラーコードを変換する
  • HEX (#RRGGBB): Web デザイン・Figma の標準表記
  • RGB (r, g, b): プログラミング描画やシェーダーでの標準表記
  • HSL (h, s%, l%): 直感的な明暗・彩度調整に最適
  • 変換ツール: 下のコンポーネントでリアルタイム相互変換

1. オンライン Color Converter (HEX / RGB / HSL)

カラーピッカーまたはテキスト入力で、各色空間の値を同時に算出します。

🎨 この場でカラーコードを変換する

RGB 99, 102, 241
Unity Color
new Color(0.388f, 0.4f, 0.945f)

履歴（直近5色）

2. Web 開発における各色表記の使い分け

色表記記述例活用シーン・特徴
HEX#3b82f6定番の 16 進数表記。最もコード長が短く直感的
RGBArgba(59, 130, 246, 0.5)透明度（Alpha）を指定したいオーバーレイや影の指定
HSLhsl(217, 91%, 60%)テーマカラーのバリエーション（ホバー色・アクティブ色）生成
OKLCHoklch(0.6 0.2 250)Modern CSS (2026) で普及。人感に基づいた均一な明度調整

3. 注意点（ハマりどころ）

  1. Unity や OpenGL での 0.0 〜 1.0 正規化
    • CSS での RGB 値は 0 〜 255 ですが、Unity や WebGL などのシェーダーでは 0.0 〜 1.0 の小数値に正規化（例: 255 → 1.0, 128 → 0.5）して扱う必要があります。
  2. 色空間（Color Space）の違いによるくすみ
    • sRGB モニターと Display P3（Mac / iPhone）で HEX カラーの見え方が若干異なる場合があります。広色域を扱う場合は CSS color(display-p3 r g b) の使用を検討してください。