HEX カラー モデル: #RRGGBB 表記の説明
HEX カラー表記は、RGB 値の 16 進数の省略表現です。形式は #RRGGBB です。ここで:
- RR = 赤チャネル (00 ～ FF = 0 ～ 255)
- GG = 緑チャネル (00 ～ FF = 0 ～ 255) 255)
- BB = 青チャンネル (00 ～ FF = 0 ～ 255)
| カラー | HEX | 意味 |
|---|---|---|
| 純粋赤 | #FF0000 | R=255 G=0 B=0 |
| ピュア緑 | #00FF00 | R=0 G=255 B=0 |
| ピュア青 | #0000FF | R=0 G=0 B=255 |
| 白 | #FFFFFF | R=255 G=255 B=255 |
| ブラック | #000000 | R=0 G=0 B=0 |
| ツールドルフェン ブルー | #3B82F6 | R=59 G=130 B=246 |
短縮表記 HEX: 各チャンネルで両方の数字が同じ場合、3 文字の短縮表記が機能します: #F00 = #FF0000。
RGB カラー モデル: 赤、緑、青チャンネル
rgb(赤、緑、青) - 各チャンネルの範囲は 0 ～ 255 です。
RGB は 加法混色モデル です。チャンネルを加算すると白に近づきます。これが光の仕組みです（テレビ画面、モニター）。
CSS 内:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */HSL カラー モデル: 色相、彩度、明度
HSL は、色を知覚的に意味のある 3 つの次元に分類します:
- 色相 (0–360°): 色自体 - 0°で赤、120°で緑、240°で青
- 彩度(0–100%): 色の強度 — 0% はグレー、100% は純粋な鮮やかな色
- 明度 (0–100%): 明るさ — 0% は黒、100% は白、50% は最も純粋な色色
CSS 内:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */デザイナー ワークフローの利点: 単一色から 5 色パレットを作成するには:
- 90% 明度 → 非常に明るい色合い
- 75% 明度 → 明るい色合い
- 50% 明度 → ベースカラー
- 35% 明度 → 暗いシェード
- 明度 20% → 非常に暗いシェード
H と S を一定に保ちながら、L の値を調整するだけです。
CSS で HEX、RGB、または HSL を使用する場合
HEX を使用: デザイン システムまたはブランド ガイドからの値が必要な単色のリファレンスの場合。 HEX はデザインスペックで最も一般的な形式です。
RGB を使用します: JavaScript でカラー チャネルを動的に操作する必要がある場合: rgb(${r}, ${g}, ${b}).
HSL を使用する: テーマ システムを構築する場合、パレットを動的に生成する場合、またはアクセス可能なライト/ダーク モード切り替え用の CSS カスタム プロパティを操作する場合。
ToolDolfen での色の変換
カラーピッカー・変換ツール (Color Picker)を使用して次のことを行います:
- カラー ホイールとスペクトルで任意の色を視覚的に選択します
- 任意の HEX、RGB、または HSL 値を入力すると、同等の 3 つの形式がすべてすぐに表示されます
- 任意の形式を 1 つでクリップボードにコピーできますクリック
- スポイトを使用して画面の色をサンプリングします（Chrome と Edge のみ）
推奨コンパニオン ガイド
このトピック クラスタの補完的なチュートリアルとユーティリティを探索して、デジタル ワークフローを強化してください:
強力なパスワードの数学: エントロピー、NIST ガイドライン、パスワードの長さ検証済みの標準とブラウザ内での実践的なステップバイステップのチュートリアルMarkdown to HTML Converter Guide: GFM Tables、Math & Real-World Gotchas検証済みの標準とブラウザ内を使用した実用的なステップバイステップのチュートリアルHTML エンティティとエスケープ: 適切なエンコーディングが XSS 攻撃を防ぐ方法検証済みの標準とブラウザ内を使用した実践的なステップバイステップのチュートリアル大きな PDF ファイルを圧縮してメールに添付する方法関連データとメディアを接続する補完的なクロスフォーマット ワークフローツール。