HEX ↔ RGB カラーコンバーター

HEX色は赤、緑、青チャネルを表す3組の16進数です。#RRGGBBの形式です。各ペアは16進数（0–FF = 10進数では0–255）です。変換方法：HEXを分割して、16進から10進に変換します。例：#1A2B3C → R=0x1A=26、G=0x2B=43、B=0x3C=60 → rgb(26, 43, 60)。短いHEX形式#RGB：各数字が重複されます。#F3A → #FF33AA → rgb(255, 51, 170)。CSSは両方の形式に対応しています：#FF33AAと#F3Aは同じです。プログラム的には、parseInt("1A", 16) = 26です。

HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）を表し、RGBより直感的な色モデルです。色相：色相環上の0–360度。0/360=赤、60=黄、120=緑、180=シアン、240=青、300=マゼンタ。彩度：0–100%。0% = グレー、100% = 完全に彩度が高い（鮮やかな色）。明度：0–100%。0% = 黒、100% = 白、50% = 純色。CSS：hsl(240, 100%, 50%) = 純青。RGBよりの利点：色のバリエーションを直感的に作成できます。色を明るくするには明度を上げます。パステル調にするには彩度を下げます。色相を回転させるには度を加減します。デザインシステムで色パレットの生成に使用されます。

HSV（色相、彩度、値）はHSB（色相、彩度、明るさ）としても呼ばれます。HSLと似ていますが異なります：値/明るさ：0=黒、100%=完全に明るい（純粋な色または彩度による白）。HSV対HSL：HSLでは100%の明度は常に白です。HSVでは100%の値と0%の彩度は白、100%の彩度は純粋な色相です。HSVは設計ツール（Photoshop、Figma等）のほとんどのカラーピッカーで使用されるモデルです。色選択の際により自然です：色相を選んで、2D正方形で彩度と明るさを選択します。

アルファは色に透明性を追加します。範囲：0（完全に透明）から1（完全に不透明）。アルファを含むCSS形式：rgba(255, 100, 50, 0.5) — 50%透明。hsla(120, 60%, 50%, 0.8) — 20%透明。アルファ付きHex：#RRGGBBAA（8桁hex）。#FF000080 = 赤で約50%の不透明度（0x80 = 128 = 128/255 ≈ 0.5）。短形式：#RGBA（4桁）。#FF08 = 赤で約53%の不透明度。モダンCSS：color(display-p3 1 0 0 / 0.5)ワイドガマット用。opacityプロパティ対アルファ色：opacityは要素全体とその子に影響します。アルファ色は特定のプロパティにのみ影響します。opacity: 0.5をテキスト付きdivに適用すると、背景とテキストの両方が透明になります。background-color: rgba(0,0,0,0.5)は背景にのみ影響します。

CSSには140以上の名前付き色があります。よく知られているもの：red、blue、green、white、black、gray、orange、purple、pink、cyan。ユニークな名前：rebeccapurple（#663399、CSS仕様作成者Eric Meyerの娘のために追加）、cornflowerblue（#6495ED）、papayawhip（#FFEFD5）、lawngreen（#7CFC00）。いつ使用するか：名前付き色は素早いプロトタイピングに適しています。本番環境：一貫性とツール互換性のためHEXまたはHSLを使用します。HSLはデザインシステムに最適です — プログラム的にパレットバリアントを生成できます：hsl(210, 80%, 20%/30%/40%/50%/60%)青のスケール用。設計トークンでは名前付き色を避けてください。実際の値が隠れてしまうためです。