プロ直伝ネイビーのカラーコード一覧！Webと印刷の配色黄金比

ネイビー カラー コードを画面上でただ「それらしい濃紺」として選ぶだけで、プロジェクトの信頼性を損ねていないだろうか。デジタルプロダクトからブランドアイデンティティの刷新まで、知的で落ち着いた印象を与えるこの色は、ほんのわずかな明度や彩度の狂いで野暮ったい黒ずみにも、安っぽい青にも転んでしまう。画面越しに伝わる微細なニュアンスの差をどう捉え、どう制御するかが、現代のクリエイターに突きつけられた命題だ。

現場で飛び交うデザイナーとエンジニアのコミュニケーションエラーも、突き詰めれば色定義の曖昧さに起因することが少なくない。誰もが一度は扱うネイビー カラー コードだが、ディスプレイごとの発色特性やメディアの境界線を意識した精緻な指定術を知る者は意外なほど限られている。信頼を勝ち取るプロダクト作りの現場で、今どのような色彩設計が求められているのかを探った。

主要規格を網羅するネイビーのカラーコード一覧（HEX・RGB・CMYK）

一口にネイビーと言っても、その定義は歴史的背景や用途によって枝分かれしている。まずはデジタル画面で使われる16進数カラーコード（HEX）およびRGBカラーモデル、そして印刷用のCMYKカラーモデルまで、現場で即戦力となる主要な数値を押さえておく必要がある。

■ スタンダード・ウェブネイビー（Classic Navy）
・16進数カラーコード（HEX）：#000080
・RGBカラーモデル：R:0 / G:0 / B:128
・CMYKカラーモデル：C:100% / M:95% / Y:20% / K:40%
・特徴：伝統的なウェブカラー（Web colors）の原点。混じり気のない純粋な濃紺だが、現代の高輝度ディスプレイでは青みが強く出すぎる傾向がある。

■ モダン・ディープネイビー（Modern Tech Navy）
・16進数カラーコード（HEX）：#0F172A（Slate系） / #0A192F（Midnight系）
・RGBカラーモデル：R:15 / G:23 / B:42
・CMYKカラーモデル：C:90% / M:80% / Y:60% / K:70%
・特徴：欧米の先端SaaSやテック企業のUI/UXデザインで主役を張るダークトーン。黒に近い深みを持ちながら、冷たすぎない洗練を醸し出す。

■ 和名・濃紺／ネイビーブルー（JIS規格）
・16進数カラーコード（HEX）：#202F55
・RGBカラーモデル：R:32 / G:47 / B:85
・CMYKカラーモデル：C:90% / M:80% / Y:40% / K:30%
・特徴：JIS慣用色名に定められたネイビーブルー。赤みと黄みのバランスが良く、日本の伝統的な染め色にも通じる落ち着いた品格を誇る。

■ ロイヤルネイビー（High-End Navy）
・16進数カラーコード（HEX）：#1B365D
・RGBカラーモデル：R:27 / G:54 / B:93
・CMYKカラーモデル：C:95% / M:75% / Y:35% / K:35%
・特徴：英国海軍の制服を思わせるクラシックで知的な青。高級ホテルのブランディングや金融系コーポレートサイトで絶大な支持を集める。

なぜ「#000080」は時代遅れに見えるのか？ウェブカラーの変遷と現在地

インターネットの黎明期、W3C（World Wide Web Consortium）が基本16色の一つとして定義したのが#000080だった。しかし、現在のWebデザインにおいてこの原始的なネイビーをそのまま背景やタイポグラフィに敷くと、どこか2000年代初頭の古めかしい質感が漂ってしまう。これには明確な視覚工学的理由がある。

かつてのCRTモニターと異なり、広色域・高コントラスト化した現代の有機ELやRetinaディスプレイでは、青（B）の値だけを極端に残したカラーが「蛍光がかった不自然な青」としてギラついて見えてしまうのだ。現在フロントエンドで多用されるCSS（Cascading Style Sheets）の現場では、わずかに赤（R）や緑（G）をブレンドし、黒（K）のニュアンスを含ませた低彩度・中明度のネイビーが標準となっている。

単一の絶対値にすがる時代は終わった。ディスプレイの進化に合わせて色をチューニングすることこそが、古臭さを払拭する唯一のアプローチだ。

画面と紙のズレを解消するプロの指定術（アドビとパントンの連携）

「モニターで確認した美しいネイビーが、印刷物に仕上がったら濁ったドブ色になっていた」——クリエイターが一度は通る悪夢の典型例だ。RGBの光の三原色（加法混色）とCMYKのインク四原色（減法混色）では、表現できる色域（ガモット）が決定的に異なる。

特にネイビーはCMYKへの変換時にシアン（C）とマゼンタ（M）が過剰に重なり、インク総量が飽和して黒く潰れやすい。アドビ（Adobe Inc.）のIllustratorやInDesignで作業する際は、単にRGBから自動変換するのではなく、CMYKの合計値（TAC値）が300%前後に収まるようマニュアル調整が欠かせない。濁りを防ぐ鉄則は「イエロー（Y）の混入を10〜20%以下に抑え、ブラック（K）で全体のトーンを引き締める」ことにある。

さらに厳密なコーポレートカラーの再現を期すなら、パントン（Pantone LLC）の特色指定（例：Pantone 289 CやPantone 534 C）をプロセスカラーと併記するのがプロの共通作法だ。紙の質感やコーティングに応じたインクの沈みを計算に入れて初めて、ブランドの顔としてのネイビーは完成する。

失敗しない黄金比と配色パターン：UI/UXデザインに効く独自データ

優れたインターフェースにおいて、ネイビーは主役にも黒幕にもなれる稀有なカラーだ。国内外のハイコンバージョンなWebサービスを分析すると、成功しているプロダクトには明確な「面積比の黄金律」が存在する。

基本となるのは【ベース 60% : メイン 30% : アクセント 10%】のバランスだ。ネイビーをどこに配置するかで、ユーザー心理への働きかけは劇的に変化する。

・コーポレート・信頼獲得型パターン
ベース：オフホワイト（#F8FAFC 60%）
メイン：ディープネイビー（#0F2350 30%）
アクセント：シャンパンゴールド（#C5A880 10%）またはバーントオレンジ（#E26A2C 10%）
視線誘導がスムーズになり、テキストの可読性と権威性を両立させる。

・モダンSaaS・ダークサーフェス型パターン
ベース：ミッドナイトネイビー（#0B132B 60%）
メイン：スレートブルー（#1C2541 30%）
アクセント：エレクトリックエメラルド（#48E5C2 10%）
完全な黒（#000000）を背景に使うよりも眼精疲労を軽減し、知的な先進感をユーザーに植え付ける。

Figmaから実装へ直結させるモダンなトークン設計とアクセシビリティ

設計思想が高度化する昨今、UI/UXデザインの現場ではFigma上で定義したデザイントークンを、そのまま開発コードへと橋渡しするワークフローが定着している。ネイビーを単発のHEXで扱うのではなく、color-navy-50からcolor-navy-900までの明度スケールとして構造化するのがデファクトスタンダードだ。

ここで絶対に妥協してはならないのが、WCAG（Web Content Accessibility Guidelines）が定めるコントラスト比の基準である。白文字との組み合わせにおいて、ネイビーは通常テキストで「4.5:1以上（AA基準）」、できれば「7:1以上（AAA基準）」を確保しなければならない。#1E3A8Aのような適度に深いネイビーであれば、視認性をクリアしつつ、デザイン全体の品格を担保できる。

CSS（Cascading Style Sheets）のカスタムプロパティ（CSS変数）としてカラーパレットを展開すれば、ライトモードとダークモードの切り替え時にも破綻のない滑らかなテーマ設計が実現する。

視覚的ノイズを削ぎ落とすネイビー活用のニュースタンダード

デジタル環境におけるネイビーの役割は、派手に自己主張することではない。情報のノイズを極限まで削ぎ落とし、本質的なコンテンツやアクションボタンを際立たせるための「盤石な土台」として機能することだ。

コードの裏にある工学的な根拠を理解し、画面と印刷の物理的な差異を見極めたうえでカラーコードを選択する。その小さなこだわりの集積が、プロダクト全体の完成度を決定づけ、利用者に無意識の安心感を与える。色を感覚ではなくロジックで制御する力こそ、これからのクリエイターが手にするべき最強の武器だ。 （出典: ネイビー カラー コード（Yahoo!ニュース））