カラーコードとパレット
ブルー系の色一覧
ブルーは明快さ、信頼、落ち着きを伝える汎用性の高い色系統です。スカイ、ロイヤル、ネイビーのバリエーションで、リンク、プロダクト UI、信頼感のあるブランドパレットに必要な幅をカバーします。
ブルー
#3B82F6
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Alice Blue | #EFF6FF | 239, 246, 255 | 214, 100%, 97% | ||
| Ice Blue | #DBEAFE | 219, 234, 254 | 214, 95%, 93% | ||
| Baby Blue | #BFDBFE | 191, 219, 254 | 213, 97%, 87% | ||
| Sky Blue | #93C5FD | 147, 197, 253 | 212, 96%, 78% | ||
| Cornflower | #60A5FA | 96, 165, 250 | 213, 94%, 68% | ||
| Blue | #3B82F6 | 59, 130, 246 | 217, 91%, 60% | ||
| Royal Blue | #2563EB | 37, 99, 235 | 221, 83%, 53% | ||
| Cobalt | #1D4ED8 | 29, 78, 216 | 224, 76%, 48% | ||
| Navy | #1E40AF | 30, 64, 175 | 226, 71%, 40% | ||
| Dark Blue | #1E3A8A | 30, 58, 138 | 224, 64%, 33% | ||
| Cyan Light | #ECFEFF | 236, 254, 255 | 183, 100%, 96% | ||
| Cyan Pale | #CFFAFE | 207, 250, 254 | 185, 96%, 90% | ||
| Cyan | #A5F3FC | 165, 243, 252 | 186, 94%, 82% | ||
| Turquoise | #67E8F9 | 103, 232, 249 | 187, 92%, 69% | ||
| Aqua | #22D3EE | 34, 211, 238 | 188, 86%, 53% | ||
| Cerulean | #06B6D4 | 6, 182, 212 | 189, 94%, 43% | ||
| Ocean | #0891B2 | 8, 145, 178 | 192, 91%, 36% | ||
| Teal Blue | #0E7490 | 14, 116, 144 | 193, 82%, 31% | ||
| Deep Cyan | #155E75 | 21, 94, 117 | 194, 70%, 27% | ||
| Dark Cyan | #164E63 | 22, 78, 99 | 196, 64%, 24% |
CSS キーワード: blue
CSS ではキーワード blue で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 3.68:1
AA · 大きなテキスト
Aa 黒い文字 5.71:1
AA
ブルーの使い方
リンクと主要な UI アクション
テクノロジー・金融のブランド
落ち着いた背景と情報パネル
ブルー と相性のよい色
#3B82F6 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。