Web色彩を理解する 🎨
Webサイトを作っていると、#FF5733、rgb(255, 87, 51)のような奇妙なコードを見かけます。これらはすべて色彩コードです！初心者でも簡単に理解できるように説明します。
なぜ色彩コードを使うのですか？
私たちは「赤」「青」と言いますが、コンピュータは正確な数字が必要です。
例えば:
- 「赤」と言うと: どの赤？明るい赤？暗い赤？ 🤔
#FF0000と言うと: 正確な赤色！ ✅
Webで使用する3つの色彩表現
1. HEX (ヘキサ) 色彩 🔢
最もよく見かける形式です！
color: #FF5733;
background: #3498db;
形式:
#記号で始まる- 6桁の数字/英文 (0-9, A-F)
- 2桁ずつ切って:
#RRGGBB- RR = 赤 (Red)
- GG = 緑 (Green)
- BB = 青 (Blue)
例:
#FF0000 → 赤 (Red最大)
#00FF00 → 緑 (Green最大)
#0000FF → 青 (Blue最大)
#FFFFFF → 白 (すべての色最大)
#000000 → 黒 (すべての色0)
2. RGB 色彩 🎨
赤(Red)、緑(Green)、青(Blue)の量で表現します！
color: rgb(255, 87, 51);
background: rgb(52, 152, 219);
形式:
rgb(赤, 緑, 青)- 各数字は0~255の間
例:
rgb(255, 0, 0) → 赤
rgb(0, 255, 0) → 緑
rgb(0, 0, 255) → 青
rgb(255, 255, 255) → 白
rgb(0, 0, 0) → 黒
rgb(128, 128, 128) → 灰色
透明度追加 (RGBA):
rgba(255, 0, 0, 0.5) → 半透明の赤
↑
0.0 ~ 1.0 (透明 ~ 不透明)
3. HSL 色彩 🌈
人間が理解しやすい方式！
color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);
形式:
hsl(色相, 彩度, 明度)- H (Hue): 色相 (0~360度)
- S (Saturation): 彩度 (0~100%)
- L (Lightness): 明度 (0~100%)
色相環 (Hue):
0° / 360° → 赤
60° → 黄
120° → 緑
180° → シアン
240° → 青
300° → マゼンタ
例:
hsl(0, 100%, 50%) → 純粋な赤
hsl(120, 100%, 50%) → 純粋な緑
hsl(240, 100%, 50%) → 純粋な青
hsl(0, 0%, 50%) → 灰色
hsl(0, 100%, 100%) → 白
hsl(0, 0%, 0%) → 黒
色彩形式比較
同じ色を3つの方法で表現すると:
🔴 明るい赤
HEX: #FF5733
RGB: rgb(255, 87, 51)
HSL: hsl(9, 100%, 60%)
🔵 青
HEX: #3498db
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)
🟢 緑
HEX: #2ecc71
RGB: rgb(46, 204, 113)
HSL: hsl(145, 63%, 49%)
いつどの形式を使うか？
HEXを使う場合 📝
- デザイナーが色彩コードをくれる時 (最も一般的)
- 簡単に色彩を指定する時
- CSSファイルでよく使用
.button {
background-color: #3498db;
color: #ffffff;
}
RGBを使う場合 🎨
- 透明度(アルファ)が必要な時
- JavaScriptで色彩を計算する時
- 色彩を動的に変更する時
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
}
HSLを使う場合 🌈
- 色相だけを変えたい時
- 明度だけを調整したい時
- 似たトーンの色彩を作る時
.primary {
background: hsl(200, 70%, 50%);
}
.primary-light {
background: hsl(200, 70%, 70%); /* 明度のみ変更 */
}
.primary-dark {
background: hsl(200, 70%, 30%); /* 暗く */
}
実践例
例1: ボタン色彩 🔘
/* 青いボタン */
.button {
background-color: #3498db;
color: #ffffff;
}
/* マウスオーバー時 */
.button:hover {
background-color: #2980b9; /* 少し暗い青 */
}
例2: グラデーション背景 🌅
.gradient-bg {
background: linear-gradient(
to right,
#667eea, /* 紫 */
#764ba2 /* マゼンタ */
);
}
例3: 半透明オーバーレイ 👻
.modal-overlay {
background-color: rgba(0, 0, 0, 0.7); /* 70%不透明の黒 */
}
色彩ツールを使用する
色彩変換
- HEX → RGB → HSL 変換
- カラーピッカーで色選択
- 様々な形式でコピー
使い方:
- Color Converter を開 く
- カラーピッカーで好きな色を選択
- HEX、RGB、HSL コードが自動生成！
- 必要な形式をコピーして使用
CSSグラデーション作成
- 2つ以上の色でグラデーション
- 方向設定
- CSSコード自動生成
色彩選択のヒント 💡
1. 色彩調和
補色 (反対側の色):
赤(0°) ↔ シアン(180°)
青(240°) ↔ 黄(60°)
類似色 (似た色):
hsl(200, 70%, 50%) 青
hsl(210, 70%, 50%) 少し紫がかった青
hsl(190, 70%, 50%) 少しシアンがかった青
2. 明度対比
テキストがよく見えるように:
/* 良い対比 ✅ */
.good-contrast {
background: #000000; /* 黒 */
color: #ffffff; /* 白 */
}
/* 悪い対比 ❌ */
.bad-contrast {
background: #cccccc; /* 明るい灰色 */
color: #ffffff; /* 白 - よく見えない！ */
}
3. 一貫性の維持
似た要素には似た色を使いましょう:
/* Primary 色彩系列 */
.primary { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark { background: hsl(200, 70%, 30%); }
/* Success 色彩系列 */
.success { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark { background: hsl(120, 60%, 30%); }
よく使う色彩コード
基本色彩
赤: #FF0000 rgb(255, 0, 0) hsl(0, 100%, 50%)
緑: #00FF00 rgb(0, 255, 0) hsl(120, 100%, 50%)
青: #0000FF rgb(0, 0, 255) hsl(240, 100%, 50%)
黄: #FFFF00 rgb(255, 255, 0) hsl(60, 100%, 50%)
マゼンタ: #FF00FF rgb(255, 0, 255) hsl(300, 100%, 50%)
シアン: #00FFFF rgb(0, 255, 255) hsl(180, 100%, 50%)
無彩色
白: #FFFFFF rgb(255, 255, 255)
明るい灰色: #CCCCCC rgb(204, 204, 204)
灰色: #808080 rgb(128, 128, 128)
暗い灰色: #333333 rgb(51, 51, 51)
黒: #000000 rgb(0, 0, 0)
人気のある色彩
空色: #87CEEB rgb(135, 206, 235)
ピンク: #FFC0CB rgb(255, 192, 203)
オレンジ: #FFA500 rgb(255, 165, 0)
紫: #800080 rgb(128, 0, 128)
金色: #FFD700 rgb(255, 215, 0)
短縮HEXコード
同じ数字が繰り返される場合は省略できます:
#FF0000 → #F00 (赤)
#00FF00 → #0F0 (緑)
#0000FF → #00F (青)
#FFFFFF → #FFF (白)
#000000 → #000 (黒)
#CCCCCC → #CCC (灰色)
色彩名を使用する
CSSでは色彩名も使用できます:
color: red;
color: blue;
color: green;
color: white;
color: black;
ただし正確な色彩コードを使う方が良いです！
アクセシビリティを考慮する ♿
コントラスト比チェック
- 通常のテキスト: 最小 4.5:1
- 大きなテキスト: 最小 3:1
良い例:
background: #000000; /* 黒 */
color: #FFFFFF; /* 白 - コントラスト 21:1 */
悪い例:
background: #777777; /* 灰色 */
color: #888888; /* やや明るい灰色 - コントラストが低すぎる */
実習: 色彩実験
実習1: 同じ色、異なる明度
.color-1 { background: hsl(200, 70%, 20%); } /* とても暗い */
.color-2 { background: hsl(200, 70%, 40%); } /* 暗い */
.color-3 { background: hsl(200, 70%, 60%); } /* 普通 */
.color-4 { background: hsl(200, 70%, 80%); } /* 明るい */
実習2: 同じ明度、異なる色
.color-1 { background: hsl(0, 70%, 50%); } /* 赤 */
.color-2 { background: hsl(120, 70%, 50%); } /* 緑 */
.color-3 { background: hsl(240, 70%, 50%); } /* 青 */
ヒント
Color Converterで直接色彩を変えながら実験してみてください！
よくある質問 (FAQ)
Q1: HEXの数字と文字は何ですか？
A: 16進数を使っています。
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
↑
A=10, B=11 ... F=15
Q2: RGBはなぜ255までですか？
A: コンピュータは8ビット(0~255)で各色を表現します。
0 = 最小 (色なし)
255 = 最大 (色いっぱい)
Q3: 透明な色はどのように作りますか？
A: RGBAまたはHSLAを使ってください:
rgba(255, 0, 0, 0.5) /* 半透明の赤 */
hsla(0, 100%, 50%, 0.5) /* 半透明の赤 */
Q4: グラデーションはどのように作りますか？
A: Gradient Generatorを使うか:
background: linear-gradient(to right, #667eea, #764ba2);
次のステップ 🚀
色彩を理解したら:
- ✅ Color Converter - 色彩変換練習
- ✅ Gradient Generator - グラデーション作成
- ✅ Shadow Generator - 色彩シャドウ作成
- ✅ Border Radius Generator - 丸い角作成
まとめ
Web色彩は難しくありません！
覚えるポイント:
- HEX:
#RRGGBB- 最も一般的 - RGB:
rgb(赤, 緑, 青)- 透明度追加可能 - HSL:
hsl(色相, 彩度, 明度)- 人間が理解しやすい
Color Converter ツールで頻繁に実験していると、すぐに慣れますよ！ 🎨
色彩はWebサイトの雰囲気を決定する重要な要素です。様々な色彩を試してみてください！