ネイビーのカラーコード完全版！HEX一覧や紺色との決定的な違いを解説
Webデザインやグラフィック制作、資料作成の現場で「ネイビー」を指定しようとした際、どのコードを使えばよいか迷った経験を持つクリエイターは少なくありません。一口にネイビーと言っても、CSSで定義された基本色から、日本の伝統色である「紺色」、深みのある「濃紺」、トレンドのニュアンスカラーまで、その数値指定は多岐にわたります。
目的や媒体に合わないカラーコードを選んでしまうと、「画面で見ると紫っぽく沈んで見える」「印刷したら黒く潰れてしまった」といったトラブルの原因にもなりかねません。本稿では、主要なネイビー系カラーのHEX値・RGB・CMYKデータを網羅するとともに、混同されがちな紺色との厳密な差異や、洗練された配色パレットの実践テクニックを詳しく紐解きます。
📌 【この記事の重要ポイントまとめ】
- 要点1：CSS標準の「navy」は#000080だが、現代のWeb UIではより彩度を抑えたダークネイビー（#0f172aなど）が主流。
- 要点2：「ネイビー」はイギリス海軍の軍服に由来し、「紺色（#223a70）」は藍染めの伝統色という出自の違いがあり、色相・明度も異なる。
- 要点3：印刷媒体ではRGBからCMYKへの変換時に濁りやすいため、シアンとマゼンタの比率調整（例：C100% M80% Y20% K50%）が仕上がりを左右する。
【早見表】ネイビーの主要カラーコード一覧｜HEX・RGB・CMYK数値を即チェック
デザイン制作ですぐに活用できるよう、ネイビーおよび関連する代表的な青系カラーの数値を一覧化しました。用途や目指すトーンに合わせて最適なコードを選択してください。
■ 代表的なネイビー・青系統のカラーコード一覧
| 色名称 | カラープレビュー | HEX値 | RGB値 | CMYK比率（目安） |
|---|---|---|---|---|
| CSS標準 navy | #000080 | #000080 | 0, 0, 128 | C100 M100 Y0 K50 |
| ネイビーブルー（JIS慣用色） | #202f55 | #202f55 | 32, 47, 85 | C90 M75 Y35 K40 |
| 紺色（こんいろ） | #223a70 | #223a70 | 34, 58, 112 | C90 M75 Y20 K20 |
| 濃紺（のうこん） | #0f1a30 | #0f1a30 | 15, 26, 48 | C95 M85 Y50 K70 |
| ダークネイビー（モダンUI） | #0f172a | #0f172a | 15, 23, 42 | C90 M80 Y45 K75 |
| くすみネイビー | #3a4b60 | #3a4b60 | 58, 75, 96 | C75 M55 Y40 K25 |
画面表示の基本となるネイビー HEX値やネイビー RGB値に加え、DTP印刷の際にはインクの掛け合わせを示すネイビー CMYK比率の把握が欠かせません。Webセーフカラー規格の純粋なネイビーから、自然な陰影を持つ現代的なトーンまで、目的別の使い分けがデザイン品質を大きく引き上げます。
【真相検証】ネイビーと紺色・濃紺は何が違う？色味のルーツと数値比較
日本語では同義語として扱われがちな「ネイビー」「紺色」「濃紺」ですが、色彩規格や歴史的背景を掘り下げると明確な違いが存在します。
ネイビーと紺色の違いを決定づけているのは、その発祥と色相の傾きです。ネイビー（ネイビーブルー）は、18世紀中頃にイギリス海軍（Royal Navy）の制服カラーとして採用された深い青に由来します。JIS規格におけるネイビーブルー カラーコード（#202f55）は、わずかに黒みを帯びた重厚な暗い青を指します。
対する日本の伝統色「紺色」は、藍染め（インディゴ）を幾重にも重ねて染め上げた深青色です。紺色 カラーコード（#223a70）の数値を分析すると、西洋のネイビーブルーに比べて青みの彩度がやや高く、澄んだ鮮やかさを残していることが分かります。
さらに「濃紺」は、紺色を極限まで深く染め上げた黒に近い藍色を指します。濃紺 カラーコード（#0f1a30）は明度が極めて低く、フォーマルスーツや礼服に用いられる「黒の代わりとなる最上級の品格色」として位置づけられています。
【Web・UIデザイン】CSSカラー「navy（#000080）」の落とし穴と今風ダークネイビーの選び方
HTML/CSSのコーディングにおいて、カラーネームで直接指定できるCSSカラー navy #000080は、初期のインターネット黎明期から存在するWEBセーフカラー ネイビーの代表格です。
しかし、現代のデジタルプロダクトにおいて「color: navy;」や「#000080」をそのままベタ塗りで使用することは、プロの現場では推奨されません。RGB（0, 0, 128）という数値は、青のチャンネルのみを半分にした極端なデータであり、高精細ディスプレイ上では青紫色が強く出すぎてしまい、どこかクラシックで無機質な印象を与えてしまうためです。
現在のUI/UXデザインでは、彩度をわずかに落としつつ黒に近づけたダークネイビー カラーコード（Tailwind CSSのSlate 900に相当する#0f172aや、深い夜空を思わせる#0b132bなど）が主流となっています。背景やヘッダーにこれらの微細調整されたダークネイビーを配置することで、コントラストを保ちながら目に優しい上質なインターフェースを実現できます。
【トレンド】絶妙な抜け感を演出する「くすみネイビー」のHEX値と活用術
ミニマルデザインや北欧系ビジュアル、アパレルECサイトなどを中心に支持を集めているのが、グレーを混ぜ合わせたような「くすみネイビー（スモーキーネイビー）」です。
彩度の高い原色系ネイビーに比べ、ニュアンス感のあるくすみネイビー HEX（#3a4b60や#4a5b73）は、画面全体を穏やかで洗練された雰囲気に整えます。過度な主張を抑えつつ、白やライトグレーとの境界線を上品に際立たせることが可能です。
■ くすみネイビーの代表的なHEXコード
- スモーキーディープネイビー：
#2c3a4a（硬質感のあるシックなトーン） - フォグネイビー：
#3a4b60（汎用性の高い標準的なくすみネイビー） - ブルーグレーネイビー：
#4a5b73（明るめの抜け感を持ち、背景やカードUIに最適）
これらのくすみカラーは、テキストリンクやバッジ、アイコンなどのアクセント要素にも馴染みやすく、洗練されたフラットデザインを構築する際の切り札となります。
【プロ直伝】失敗しないネイビーの配色パレット｜相性抜群の組み合わせ4選
ネイビーは「信頼」「誠実」「知性」を象徴する万能色ですが、組み合わせるサブカラーによって印象が劇的に変化します。実務で即戦力となるネイビー 配色パレットを4パターン厳選しました。
1. ネイビー × ゴールド / マスタード（高級感・権威性）
ベース：#0f172a（ダークネイビー） / アクセント：#d4af37（メタリックゴールド）または#e5a823（マスタード）
金融機関、高級ブランド、コーポレートサイトの重要ボタンなど、確固たる信頼とプレミアム感を訴求する際に絶大な効果を発揮します。
2. ネイビー × サーモンピンク / コーラル（現代的・親しみやすさ）
ベース：#1e293b（ディープスレート） / アクセント：#f87171（コーラルピンク）
硬くなり配色のトーンが重くなりがちなネイビーに、温かみのあるコーラルを差し込むことで、BtoCサービスやヘルスケアアプリに最適な親しみやすさを生み出します。
3. ネイビー × アイスブルー × オフホワイト（クリーン・知性）
ベース：#1b315e（トラディショナルネイビー） / サブ：#e0f2fe（アイスブルー） / 背景：#f8fafc（オフホワイト）
IT・SaaS企業のランディングページや医療系サイトの定番構成。透明感と論理的な清潔感をユーザーに印象づけます。
4. ネイビー × グレージュ / サンドベージュ（上質・オーガニック）
ベース：#202f55（ネイビーブルー） / サブ：#d8cfc4（グレージュ）
コントラストを和らげ、落ち着いた大人のライフスタイル系メディアやインテリアブランドの世界観を構築します。
【印刷・Webの注意点】CMYK変換で濁らせないネイビーの発色管理
グラフィックデザイナーが最も直面しやすいトラブルが、「IllustratorやPhotoshop上で設定したRGBのネイビーを印刷用CMYKに変換した途端、くすんだ紫色や濁った黒に変色してしまう」という現象です。
画面表示のRGB空間における純粋な青（B: 128以上）は、印刷インクのCMYK色域（ガマット）の外側に位置することが多く、単純な自動変換を行うとマゼンタ（M）成分が過剰に配合されて紫かぶりに陥ります。
商業印刷で澄んだ深いネイビーを表現するための黄金比率は以下の設定が目安です。
- 標準的なネイビー印刷推奨値：C 100% / M 80% / Y 20% / K 40%〜50%
- 青みを際立たせたい場合：C 100% / M 70% / Y 10% / K 30%
ブラック（K）を適度に入れることで色の引き締まりが生まれ、マゼンタが暴れて赤紫に転ぶのを防ぐことができます。入稿前には必ずCMYKプレビューを確認し、インク総量（TAC値）が過多にならないよう管理することが成功への鉄則です。
【ネイビー カラー コード】に関するよくある質問（FAQ）
Q1：CSSで指定できる「navy」と「darkblue」の具体的な違いは何ですか？
A1：どちらもCSS定義の標準カラーですが、数値が異なります。「navy」は#000080（RGB: 0, 0, 128）で明るさが抑えられた暗い純青です。一方「darkblue」は#00008b（RGB: 0, 0, 139）となっており、navyよりもわずかに青の輝度が高い設定になっています。ただし画面上での差は極めて僅差です。
Q2：ビジネス資料（PowerPoint等）で一番見やすいネイビーのコードは？
A2：プロジェクター投影や液晶モニターの両方で視認性を保つには、#1f497d（RGB: 31, 73, 125）や#1e3a8a（RGB: 30, 58, 138）が適しています。黒文字との区別が明瞭につき、白背景に対するコントラスト比も十分に確保できます。
Q3：ダークモードUIの背景色にネイビーを使う場合のおすすめコードは？
A3：完全な漆黒（#000000）ではなく、深いネイビーを含んだ#0a0f1dや#0f172aが推奨されます。有機ELディスプレイでの発光負担を抑えつつ、画面全体に奥行きと洗練された印象を与えることができます。
まとめ：目的に合わせたネイビーのカラーコード選定で洗練されたデザインへ
ネイビーは、知的で誠実なトーンから最先端のデジタルインターフェースまで、幅広い世界観を形作ることができる極めて優秀な基幹色です。
CSS標準の「#000080」だけに頼るのではなく、歴史的な文脈を持つ紺色（#223a70）や、現代のUIに最適化されたダークネイビー（#0f172a）、表情豊かなニュアンスカラー（#3a4b60）などを用途に応じて使い分けることが、デザインの完成度を高める鍵となります。媒体特性やターゲット層に合わせた最適なカラーコードを選定し、クオリティの高いクリエイティブワークに役立ててください。 （出典: ネイビー カラー コード（Yahoo!ニュース））
SEOライティングとマーケティング戦略の専門家。分かりやすい解説記事で定評があります。
