紺色のカラーコード完全ガイド！ネイビーや藍色との違いと配色見本

Web制作やグラフィックデザイン、プレゼン資料作成の現場で頻繁に求められる「紺色」。知性や誠実さ、洗練された品格を直感的に伝える万能カラーとして定番の地位を確立しています。しかし、ひとくちに紺色と言っても、日本の伝統的な色合いから欧米発祥のネイビー、画面用のRGB値や印刷用のCMYK値まで、媒体や文脈によって定義が微妙に揺らぐケースが少なくありません。

「コード指定で思っていたより暗すぎた」「ネイビーや藍色と何が違うのか整理したい」という実務上の悩みを抱えるクリエイターやビジネスパーソンに向けて、代表的なカラーコードの数値一覧をはじめ、類義色との明確な差異、アクセシビリティを考慮した配色テクニックまで徹底取材しました。

【即コピー可能】紺色・濃紺・関連カラーのコード（HEX・RGB・CMYK）一覧

実務ですぐにペーストして使える主要な紺色系のカラーコードを整理しました。日本の伝統色としての紺色から、Webセーフカラー寄りのネイビー、引き締まったダークトーンまで、用途に合わせて最適な数値を選択できます。

色名	カラー見本	HEX（16進数）	RGB	CMYK
紺色（こんいろ）	Sample	#223a70	rgb(34, 58, 112)	C95 M80 Y25 K10
濃紺（のうこん）	Sample	#0f2350	rgb(15, 35, 80)	C100 M90 Y35 K30
藍色（あいいろ）	Sample	#165e83	rgb(22, 94, 131)	C90 M55 Y25 K10
ネイビー（Navy）	Sample	#000080	rgb(0, 0, 128)	C100 M100 Y0 K50
ダークネイビー	Sample	#0b162c	rgb(11, 22, 44)	C90 M80 Y50 K70

Web標準のカラーネームとして定義されている「navy」は#000080ですが、彩度が高すぎてディスプレイ上では少し青紫色がきつく感じられるケースがあります。現代のUIデザインでは、ややグレースケールを混ぜた#1e293bや#0f172aといったスレート系ダークネイビーの採用が主流です。

【比較検証】ネイビー・藍色・青との決定的な違いと由来の真相

似通った印象を持つ青系統の色名ですが、その出自と色相・明度のバランスには明確な違いがあります。

日本の伝統色としての紺色の由来は、タデ藍を用いた藍染めの工程にあります。藍染めを何度も繰り返し重ねて染め上げた「最も深い青」が「紺」と呼ばれ、平安時代には貴族の装束や武士の鎧の威糸（おどしいと）としても尊ばれました。紫みを帯びた深みのある暗い青が特徴です。

一方、藍色は紺色よりも染めの回数が少なく、わずかに緑みや明るさが残る色相（JIS慣用色名では「濃い青緑」寄り）を指します。海外で「ジャパン・ブルー」と称賛された色合いは、この藍色が原点です。

また、ネイビー（Navy Blue）は18世紀半ばにイギリス海軍の制服色に採用されたことが語源です。厳格な規律と権威を象徴する濃紺であり、現代でもスーツやフォーマルウェアの基本色として世界中で認知されています。

【印刷・DTP必須】紺色のDIC・PANTONE指定番号

紙媒体のポスターやパンフレット、企業のCI（コーポレート・アイデンティティ）マニュアル策定では、モニタ上の発色（RGB）とインクの混色（CMYK）のズレを防ぐために特色指定（スポットカラー）が欠かせません。

日本の商業印刷で広く使われるDICカラーガイドにおける紺色の代表的な指定番号はDIC 182やDIC 183です。より深みを出したい濃紺にはDIC 220が選ばれる傾向にあります。

国際標準規格であるPANTONE（パントン）では、PANTONE 281 CやPANTONE 282 Cが王道のクラシックな紺色として世界基準で流通しています。プロダクトデザインや多言語展開するブランド制作では、このPANTONE数値を指定することで国境を越えた色ブレを確実に防ぐことが可能です。

Webデザインで失敗しない！紺色のおすすめ配色パレット

紺色はベースカラー、メインカラー、アクセントカラーのいずれに配置しても全体のトーンを破綻させない極めて優秀な色彩です。UIデザインやLP（ランディングページ）で高い成約率と洗練さを生み出す3つの王道パレットを紹介します。

1. 金融・士業・コーポレート向け（信頼×清潔感パレット）
・メイン：#0f2350（濃紺）
・サブ：#4f86c6（スチールブルー）
・ベース：#f8fafc（オフホワイト）
・アクセント：#d97706（アンバーゴールド）
堅実な印象を与えつつ、CTAボタンに落ち着いたゴールドを配置することでクリック誘導力を高めます。

2. 高級感・ラグジュアリー向け（モダンエレガンスパレット）
・メイン：#0b162c（ダークネイビー）
・サブ：#94a3b8（クールグレー）
・アクセント：#c5a059（シャンパンゴールド）
ダークトーンで画面を引き締め、フォントや装飾枠に繊細なゴールドを差すことで上質感を演出できます。

3. テック・SaaS・デジタルサービス向け（先進性パレット）
・メイン：#1e1e38（ディープナイトブルー）
・サブ：#3b82f6（ビビッドブルー）
・アクセント：#10b981（エメラルドグリーン）
知的でサイバーな雰囲気を醸成し、アクティブ状態を示すUIパーツを美しく際立たせます。

UI/UX視点で検証する紺色背景と文字色のコントラスト比

Webアクセシビリティの国際基準「WCAG 2.2」において、通常のテキストは4.5:1以上、大きなテキスト（18pt以上または太字14pt以上）は3:1以上のコントラスト比が推奨されています。

紺色（#223a70）や濃紺（#0f2350）を背景に敷く場合、純白（#ffffff）とのコントラスト比は10:1〜15:1以上に達し、視認性（可読性）は極めて良好です。しかし、薄いグレー（#9ca3af）や彩度の低い水色を文字色に重ねると途端に基準を下回り、屋外や暗所での可読性が著しく低下します。

文字情報が多いWebサイトでは、単なる真っ黒（#000000）の文字よりも、紺色寄りのダークグレー（#1e293b）を本文フォントカラーに設定することで、純白背景との強いコントラストによる目の疲れを和らげる効果が得られます。

実務で役立つ！紺色を取り入れたCSSデザインサンプル

コピー＆ペーストで実装可能な、紺色を活用した実用的なCSSコンポーネントコードです。

/* 信頼感を与えるリッチな紺色グラデーションカード /
.navy-card {
  background: linear-gradient(135deg, #0f2350 0%, #223a70 100%);
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 35, 80, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/ 視認性の高いアクセント付きボタン */
.navy-button {
  background-color: #223a70;
  color: #ffffff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  border: none;
  transition: all 0.2s ease-in-out;
}

.navy-button:hover {
  background-color: #0f2350;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 58, 112, 0.3);
}

単色のベタ塗りだけでなく、同系色によるわずかな線形グラデーション（Linear Gradient）を加えることで、画面に奥行きと洗練されたプロの質感が生まれます。

【紺色カラーコード】に関するよくある質問（FAQ）

Q1：HTML/CSSで「color: kon;」と書いても紺色は反映されますか？
A1：反映されません。日本語のローマ字表記はCSS標準のカラーネームとして認識されないため、HEX値「#223a70」やRGB値「rgb(34, 58, 112)」、あるいはキーワードなら「navy」と記述してください。

Q2：印刷したときに紺色が紫っぽく濁ってしまう原因は何ですか？
A2：CMYK変換時のマゼンタ（M）成分が多すぎることが主な原因です。シアン（C）を100%近く維持しつつ、Mを70〜80%程度に抑え、イエロー（Y）やブラック（K）を微量ブレンドして調色すると澄んだ濃紺を刷り出せます。

Q3：スマホ画面で紺色が黒に見えてしまう時の対策は？
A3：有機ELディスプレイ（OLED）は黒の沈み込みが深いため、極端に明度が低い濃紺は黒と識別しづらくなります。スマホ向けUIでは明度を5〜8%ほど上げた「#1e3a8a」などの明るめなネイビーを採用すると輪郭がはっきりします。

紺色は、流行に左右されることなく普遍的な安心感とプロフェッショナリズムを届ける強力なデザインアセットです。WebのHEXコードから印刷のDIC・PANTONE指定まで、各媒体に応じた特性を理解して使いこなすことで、ブランド価値を一段引き上げることができます。

配色に迷った際は、基本コード「#223a70」を軸に、明度やアクセントカラーのバランスを調整しながら最適なビジュアル設計を追求してみてください。