RGB vs HEX vs HSL: 最適なCSSカラーモデルの選び方
Webデザイナーやフロントエンドエンジニアがアクセシブルで保守性の高いUIシステムを構築するためのカラー記法ガイド。
技術判定・要約
スタイルガイドやFigma連携の簡潔なデザイントークンにはHEXを使用してください。Canvas描画やマシン処理にはRGBを使用してください。動的なUIテーマ切り替えやホバーステートには、色相・彩度・明度をCSS変数で数理的に調整できるHSLを使用してください。
機能・仕様比較マトリクス
技術仕様に基づく直接比較| 評価軸 | HEX (#) | RGB / RGBA | HSL / HSLA |
|---|---|---|---|
| 構文形式 | #6366f1 or #6366f180 | rgb(99, 102, 241) / rgba(...) | hsl(239, 84%, 67%) / hsla(...) |
| 直感的な可読性 | Low (Hexadecimal base-16) | Medium (Red/Green/Blue 0-255) | High (Angle 0-360°, % lightness) |
| アルファ透明度 | 8-digit hex (#rrggbbaa) | rgba(r, g, b, alpha) | hsla(h, s, l, alpha) |
| テーマ調整の容易さ | Difficult without preprocessor | Difficult to lighten/darken linearly | Trivial (Adjust lightness % directly) |
| ブラウザ互換性 | 100% All Browsers | 100% All Browsers | 100% Modern Browsers |
メリット＆デメリット（トレードオフ）
アーキテクチャ選定における重要検討事項HSL (Hue, Saturation, Lightness)
主な利点・強み
- ✓Predictable color tweaks: increase L for hover states, decrease L for active states
- ✓Ideal for CSS Custom Properties (--primary-h: 239; --primary-s: 84%;)
- ✓Intuitive color wheel angle mapping
留意点・制約事項
- ✕Perceptual lightness is not uniform across colors (pure yellow looks much brighter than pure blue at 50% lightness)
HEX
主な利点・強み
- ✓Shortest character footprint in CSS and HTML stylesheets
- ✓Universally copied from Photoshop, Figma, and Illustrator
留意点・制約事項
- ✕Difficult to mentally estimate the color without a visual previewer
この比較に関する対話型ツールを起動
ブラウザ内で100%プライベートに動作するクライアントサンドボックスImage Color Picker & Eyedropper Inspector
Sample exact pixel colors from any uploaded image with zoom magnifying loupe and HEX/RGB/HSL export.
WCAGカラーコントラスト比チェッカー
テキストと背景色のコントラスト比を計算し、Webアクセシビリティ基準（AA / AAA）の適合を判定。
Image Color Inverter & Negative Filter
Create photographic negatives and invert image colors with real-time intensity slider and high-resolution export.
CSS Gradient Generator & Color Blend Studio
Design linear, radial, and conic CSS gradients with multi-color stops, presets, visual angle wheel, and instant CSS copy.
よくある質問
Clear answers to common engineering questionsWhy is HSL better for dark/light themes?
Because you can keep Hue and Saturation identical while simply swapping the Lightness percentage (e.g. 15% for dark mode backgrounds, 95% for light mode backgrounds).
How does HEX alpha transparency work?
In 8-digit hex like #6366f180, the last two hex digits represent alpha from 00 (0% opacity) to FF (100% opacity). 80 corresponds to roughly 50% opacity.