ロイヤルブルーの意味と使い方｜HEXコード・配色例
鮮やかでありながら気品にあふれた青、ロイヤルブルー。その名が示すとおり「王室の青」と呼ばれるこの色は、高貴さ・信頼性・誠実さを象徴する西洋の代表的な色名です。ブランドカラーやWebデザイン、ファッションなど幅広いシーンで使われるロイヤルブルーについて、正確な色コードから歴史、類似色との違い、デザインでの活用法まで詳しく解説します。
ロイヤルブルーの基本情報
ロイヤルブルーは、中程度の明るさを持つ鮮やかな青です。紺色ほど暗くなく、水色ほど明るくもない、バランスの取れた青色です。
| 項目 | 内容 |
|---|---|
| 色名 | ロイヤルブルー |
| 英語名 | Royal Blue |
| HEXコード | #4169E1 |
| RGB | R:65 G:105 B:225 |
| HSL | H:225 S:73% L:57% |
| CMYK | C:71 M:53 Y:0 K:12 |
| マンセル値 | 7.5PB 4.5/12 |
| 系統 | 青系（鮮やかな中明度の青） |
| 由来 | イギリス王室に由来 |
Web標準のロイヤルブルー
CSSでは royalblue というキーワードで直接指定でき、HEXコードは #4169E1 です。この値はX11カラーに由来しており、Webデザインにおけるロイヤルブルーの標準的な値として広く認知されています。
| 指定方法 | 値 |
|---|---|
| CSSキーワード | royalblue |
| HEX | #4169E1 |
| RGB | rgb(65, 105, 225) |
| HSL | hsl(225, 73%, 57%) |
ロイヤルブルーの歴史と由来
名前の起源
ロイヤルブルーの名前の由来は、19世紀初頭のイギリスにさかのぼります。通説では、イギリス国王ジョージ3世またはその後のシャーロット王妃のためのドレスに使用された鮮やかな青い染料に「ロイヤルブルー」の名が付けられたとされています。王室御用達の色として選ばれたことが、この色名の格式の高さにつながっています。
色味の変遷
興味深いことに、ロイヤルブルーは時代とともに指す色が変化してきました。初期のロイヤルブルーは暗く深い青（現在のネイビーに近い色）を指していましたが、20世紀に入り、より明るく鮮やかな青へと変わっていきました。現在のWeb標準 #4169E1 は、この「新しいロイヤルブルー」に該当します。
| 時代 | ロイヤルブルーの傾向 | 近い色 |
|---|---|---|
| 19世紀初頭 | 暗く深い青 | ネイビーブルー ( #000080) |
| 19世紀後半 | やや明るめの青 | コバルトブルー ( #0047AB) |
| 20世紀以降 | 鮮やかで中明度の青 | 現在のロイヤルブルー ( #4169E1) |
王室と青の関係
青は西洋文化において古くから高貴さの象徴でした。中世ヨーロッパでは、ラピスラズリから作られるウルトラマリンブルーが金と同じほど高価な顔料であり、王族や聖母マリアの衣に用いられました。ロイヤルブルーは、この「青＝高貴」という西洋の伝統を色名に凝縮した存在です。
類似色・関連色との比較
ロイヤルブルーと混同しやすい青系の色を比較します。
| 色名 | HEX | RGB | 特徴・違い |
|---|---|---|---|
| ロイヤルブルー | #4169E1 | 65,105,225 | 鮮やかで中明度。Web標準色 |
| ネイビーブルー | #000080 | 0,0,128 | 非常に暗い青。海軍の制服に由来 |
| コバルトブルー | #0047AB | 0,71,171 | 顔料由来。ロイヤルブルーより暗い |
| ウルトラマリン | #3F00FF | 63,0,255 | 紫寄りの強い青。ラピスラズリ由来 |
| コーンフラワーブルー | #6495ED | 100,149,237 | ロイヤルブルーより淡く柔らかい |
| ドジャーブルー | #1E90FF | 30,144,255 | ロイヤルブルーより明るく緑寄り |
| スチールブルー | #4682B4 | 70,130,180 | グレーがかった落ち着いた青 |
| サファイアブルー | #0F52BA | 15,82,186 | 宝石のサファイアに由来する深い青 |
| セルリアンブルー | #2A52BE | 42,82,190 | 空の色。ロイヤルブルーに近い色相 |
ロイヤルブルーとネイビーの使い分け
| 観点 | ロイヤルブルー (#4169E1) | ネイビー (#000080) |
|---|---|---|
| 明るさ | 中明度（明るい印象） | 低明度（暗い印象） |
| 鮮やかさ | 高彩度（目を引く） | 低彩度（控えめ） |
| 印象 | 華やか、若々しい、先進的 | 落ち着き、格式、保守的 |
| 適した用途 | CTAボタン、アクセント、スポーツ | 背景、テキスト、フォーマル |
| フォーマル度 | セミフォーマル | フォーマル |
デザインでの活用例
ブランドカラーとしてのロイヤルブルー
ロイヤルブルーは多くの有名ブランドやスポーツチームに採用されている色です。信頼感と先進性を両立できるため、金融・テクノロジー・スポーツなど幅広い業界で好まれています。
| 分野 | ロイヤルブルーが与える印象 |
|---|---|
| 金融・保険 | 信頼、安定、誠実 |
| テクノロジー | 先進性、革新、知性 |
| スポーツ | 活力、チームの誇り、勝利 |
| 教育 | 知性、探究心、伝統 |
| 医療 | 清潔感、信頼、安心 |
Web配色パターン
ロイヤルブルーを軸にした配色パターンを、用途別に紹介します。
| テーマ | メインカラー | サブカラー | アクセント | 背景色 |
|---|---|---|---|---|
| 信頼のコーポレート | ロイヤルブルー #4169E1 | ライトグレー #E8E8E8 | オレンジ #E8740C | 白 #FFFFFF |
| テック系スタートアップ | ロイヤルブルー #4169E1 | ダークネイビー #1A1A3E | ライム #6BDB4E | オフホワイト #F8F9FA |
| エレガント | ロイヤルブルー #4169E1 | シルバー #C0C0C0 | ゴールド #D4A84B | アイボリー #FFFFF0 |
| スポーティ | ロイヤルブルー #4169E1 | 白 #FFFFFF | レッド #E03030 | ライトブルー #E8F0FE |
| 落ち着いた知性 | ロイヤルブルー #4169E1 | スレートグレー #708090 | ティール #2A9D8F | ホワイトスモーク #F5F5F5 |
CSSでの実装例
ロイヤルブルーをWebサイトに取り入れる際のCSS変数の設計例です。
| 用途 | CSS変数 | 値 | 説明 |
|---|---|---|---|
| プライマリカラー | —color-primary | #4169E1 | ブランドカラー、見出し |
| プライマリ（暗め） | —color-primary-dark | #2850B8 | ホバー状態、強調 |
| プライマリ（明るめ） | —color-primary-light | #7B9BF0 | 無効状態、サブ要素 |
| プライマリ（背景用） | —color-primary-bg | #EBF0FD | セクション背景、カード背景 |
ファッションでの活用
ロイヤルブルーはファッションにおいても人気の高い色です。肌の色を問わず似合いやすく、カジュアルからフォーマルまで幅広いシーンに対応できます。
| シーン | アイテム例 | 組み合わせ |
|---|---|---|
| ビジネス | ネクタイ、ブラウス | チャコールグレーのスーツに差し色 |
| カジュアル | ニット、スニーカー | 白Tシャツ + デニムにアクセント |
| パーティー | ドレス、ポケットチーフ | ゴールドのアクセサリーと好相性 |
| スポーツ | ユニフォーム、シューズ | 白との組み合わせで清潔感 |
ロイヤルブルーの色コード一覧（用途別）
デザインツールやコーディングで使いやすいよう、主要なカラーコードをまとめます。
| 形式 | 値 |
|---|---|
| CSSキーワード | royalblue |
| HEX | #4169E1 |
| RGB | rgb(65, 105, 225) |
| HSL | hsl(225, 73%, 57%) |
| CMYK | 71, 53, 0, 12 |
| CSS変数例 | —color-royal-blue: #4169E1; |
| Tailwind（カスタム） | royal-blue: ‘ #4169E1’ |
| Swift (UIColor) | UIColor(red: 0.255, green: 0.412, blue: 0.882, alpha: 1.0) |
| Kotlin (Compose) | Color(0xFF4169E1) |
まとめ
ロイヤルブルーは、イギリス王室に由来する格調高い青であり、HEXコード #4169E1 で表される鮮やかな中明度の色です。CSSキーワードとしても標準で用意されているため、Webデザインで手軽に使用できます。信頼感・知性・華やかさを兼ね備えた色であるため、コーポレートサイトからファッションまで、幅広い用途に対応可能です。ネイビーやコバルトブルーなど類似色との違いを理解し、目的に応じて最適な青を選ぶことで、デザインの完成度がさらに高まるでしょう。