カラーコンバーター
さまざまな形式の間で色を変換します。
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
色選択
カラーピッカーをクリックするか、下で値を直接入力してください
HEX
RGB
R
G
B
HSL
H
S
L
色のバリエーション
明るさ変化
彩度変化
調和色
その他のユーティリティ
カラーフォーマットの基礎知識
HEX（16進数）
HEXカラーは、赤・緑・青の値を16進数で表す6桁のコードです。 形式は #RRGGBB（例：#FF5733）で、それぞれのペアは00からFFの範囲を取ります。 Web制作やCSSで最もよく使われる形式です。
RGB（赤・緑・青）
RGBは、赤・緑・青をそれぞれ0〜255の値で表します。 形式は rgb(255, 87, 51)。デジタルディスプレイの標準形式で、 各色チャンネルを個別に調整しやすいのが特徴です。
HSL（色相・彩度・明度）
HSLは色相（0〜360°）、彩度（0〜100%）、明度（0〜100%）で色を表します。 形式は hsl(14, 100%, 60%)。配色を考えたり明るさを調整したりする際に、 より直感的に扱えることが多い形式です。
カラーフォーマット比較
| 形式 | 例 | 主な用途 |
|---|---|---|
| HEX | #FF5733 | Web開発、CSS |
| RGB | rgb(255, 87, 51) | デジタルデザイン、プログラミング |
| HSL | hsl(14, 100%, 60%) | 配色設計、明るさ調整 |
色を扱う際のヒント
- 色のバリエーションにはHSLを活用: 明度を変えるだけで同系色の濃淡が作れます
- コードにはHEXが便利: スタイルシートで最もコンパクトに書けます
- コントラストを確認: 背景色に対して文字が読みやすいか確認しましょう
- アクセシビリティに配慮: 色覚多様性に対応できているか確認しましょう