紺色カラーコード完全網羅！ネイビー・藍色の違いとHEX数値を徹底解説

Webサイトのデザインやブランド制作、あるいはDTP印刷の現場で「紺色を指定してください」と依頼された際、どの数値を入力すべきか迷った経験はないでしょうか。実は、画面表示用のHEXやRGB、印刷用のCMYK、さらにはCSS標準のカラーネームごとに定義が異なり、思わぬ発色のズレを引き起こす要因になっています。

一口に紺色と言っても、日本の伝統色紺色からJIS規格の数値、グローバルスタンダードなネイビーまで幅広く存在します。デザイナーやエンジニアが実務で迷わずコピペして使える正確なコード一覧から、藍色・ネイビーとの明確な見分け方、洗練された配色パレットまで分かりやすく解説します。

📌 【この記事の重要ポイントまとめ】

• 要点1：日本の伝統色・JIS規格における「紺色」の代表値はHEX「#223a70」（RGB: 34, 58, 112）。
• 要点2：CSSの「navy（#000080）」や「藍色（#165e83）」とは色相・彩度・明度が異なり、混同すると意図しない印象になる。
• 要点3：WebセーフカラーやCMYK印刷時のくすみ対策、実務で重宝する濃紺・ダークネイビーのCSS指定まで網羅。

【一覧表】紺色のカラーコード（HEX・RGB・CMYK・JIS規格）

デザイン制作ツールやコードエディタですぐに扱えるよう、基準となる紺色カラーコードHEXおよび各種カラーモデルの数値を整理しました。

規格・名称	HEX（カラーコード）	RGB値	CMYK値（印刷目安）
JIS慣用色名「紺色」	#223a70	rgb(34, 58, 112)	C:95% M:80% Y:25% K:15%
日本の伝統色「本紺」	#182a4d	rgb(24, 42, 77)	C:100% M:85% Y:40% K:45%
濃紺（ダークネイビー）	#0f1c3f	rgb(15, 28, 63)	C:100% M:90% Y:40% K:60%
CSS標準「Navy」	#000080	rgb(0, 0, 128)	C:100% M:100% Y:0% K:50%

日本産業規格（JIS Z 8102）で定められているJIS慣用色名紺色は、マンセル値「5PB 2.5/4」と定義されています。画面上で再現する際の紺色RGB値は「R:34, G:58, B:112」、HEX値では「#223a70」が最も標準的な表現です。深みがありながらもかすかに紫みを含んだ、落ち着きと気品を兼ね備えた色調が特徴です。

「ネイビーや藍色と何が違う？」Webデザイナー必見の定義比較

デザインの現場でクライアントから「落ち着いた紺色で」と指示を受けた際、デザイナーがネイビーを適用して「イメージより青すぎる」「もっと和風の深みがほしい」と戻されてしまうケースは少なくありません。この原因は、紺色ネイビー違いと紺色藍色違いを混同している点にあります。

まず「藍色（あい色）」は、タデ科の植物である藍から抽出された染料の色で、マンセル値は「2PB 3/7」、HEXコードでは#165e83付近の少し緑みを帯びた明るい深青色を指します。藍染めの染め重ね段階によって名前が変わり、浅葱色から藍色、そして最も濃く染め上げた状態が「紺色」です。

一方、英語圏の「ネイビー（Navy Blue）」はイギリス海軍の制服に由来する色名で、CSSのキーワード指定では#000080と定義されています。純粋な青（Blue: #0000FF）の明度を単純に半分落としたデジタル処理的な青であり、日本の伝統色紺色（#223a70）と並べると、ネイビーの方が原色の青みが強く人工的な印象を与えます。日本の伝統的な色彩感覚を取り入れた上質なUIを設計するなら、CSSの「navy」を直接書くのではなく、カスタムHEXコードで指定するのが安全です。

印刷とWebで色化けさせない！紺色CMYK印刷とWebセーフカラーの注意点

ポスターやパンフレット、名刺などグラフィックデザインを伴う制作では、紺色CMYK印刷におけるインキの掛け合わせに細心の注意が必要です。RGB画面上の鮮やかな深い紺色は、CMYK変換時に「くすんだ濁った黒」や「赤みの強い紫色」に転びやすい傾向があります。

印刷で美しい紺色を再現するための黄金比率は「C:95〜100% / M:80〜85% / Y:20〜30% / K:10〜20%」です。マゼンタ（M）が高すぎると紫がかって見え、イエロー（Y）が抜けすぎると青みが冷たくなりすぎます。総インキ量（TAC値）が300%を超えると印刷現場で裏移りや乾きムラの原因になるため、K（ブラック）の数値をコントロールして深みを出すのがプロの技術です。

また、古いシステムや特殊な表示環境に対応する紺色Webセーフカラーとしては「#003366」や「#333366」が近似色として機能します。ディスプレイ環境の進化によって216色のセーフカラーに縛られる必要はなくなりましたが、コーポレートカラーの策定など厳格な視認性が求められるプロジェクトでは、どのデバイスでも崩れないコントラスト比（WCAG 2.2基準）の確保が不可欠です。

【コピペで使える】濃紺・ダークネイビーのカラーコードとCSS指定テクニック

近年、ヘッダーナビゲーションやフッター、背景色としてブラックの代わりに濃紺カラーコードやダークネイビーHEXを採用するUI設計が定番化しています。真っ黒（#000000）に比べてコントラストが和らぎ、知性的でプレミアムな質感を演出できます。

/* 2026年モダンUI向け 濃紺・ダークネイビーのCSS指定 / :root { --color-primary-navy: #182a4d; / 本紺（クラシック） / --color-dark-navy: #0b1528; / ダークネイビー（背景向け） / --color-deep-blue: #0f1c3f; / 濃紺（ボタン・アクセント） / --color-text-on-navy: #f4f6fa; / 視認性を確保する白文字 / } / ヘッダーへの適用例 */ .site-header { background-color: var(--color-dark-navy); color: var(--color-text-on-navy); border-bottom: 2px solid #223a70; } 

モダンな紺色CSS指定では、デザインシステムやデザイントークンを意識してCSSカスタムプロパティ（CSS変数）で管理するのが基本です。特にダークネイビー（#0b1528）をダークモードのベース背景に敷く場合、文字色は完全な純白（#ffffff）よりもわずかに青みを含んだオフホワイト（#f4f6fa）を組み合わせることで、目への刺激を抑えた洗練されたコントラストを実現できます。

洗練されたデザインを作る「紺色配色パレット」と実践実例

紺色は信頼・誠実・知性を象徴し、金融機関や医療、士業、BtoBエンタープライズのWebサイトで圧倒的な支持を集めています。デザインのクオリティを一段引き上げる紺色配色パレットの鉄板パターンを紹介します。

1. クラシック・プレミアム（紺 × ゴールド・ベージュ）
ベースに深みのある紺色（#182a4d）、アクセントにシャンパンゴールド（#c5a059）や淡いエクリュベージュ（#f7f5f0）を合わせる構成です。高級ホテルやハイエンドブランド、資産運用サービスのWebサイトに最適で、重厚感と優雅さを両立させます。

2. クリーン・テック（濃紺 × アイスブルー × ホワイト）
ダークネイビー（#0b1528）を背景に据え、アクションボタンに彩度の高いアイスブルー（#00a3ff）やミント系アクセントを配置します。SaaSプロダクトやテック系企業のLPで採用が多く、視線誘導の明瞭さと先進的なスピード感を表現できます。

3. ジャパニーズ・モダン（紺色 × 朱色 × 生成り）
JIS規格の紺色（#223a70）に、日本の伝統色である朱色（#eb6101）や生成り色（#fbfaf5）をマッチングさせます。伝統工芸品ECや和風旅館、地域創生プロジェクトのサイトで、現代的な読みやすさを保ちながら情緒豊かな和の世界観を演出できます。

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

Q1：Webサイトの文字色として紺色を使う場合、視認性に問題はありませんか？
A1：白背景（#FFFFFF）の上に濃紺（#182a4d や #0f1c3f）を文字色として使用する場合、コントラスト比は12:1以上となり、WCAG AA基準（4.5:1以上）を余裕でクリアします。真っ黒よりも柔らかく知的な印象を与えるため、長文メディアの本文テキストとしても非常に適しています。

Q2：CSSで「color: navy;」と記述すると、日本の紺色と同じ色になりますか？
A2：同じ色にはなりません。CSSキーワードの「navy」はHEX「#000080」に固定されており、JIS規格の紺色（#223a70）よりも鮮やかで青みが強い原色に近い発色になります。意図した落ち着いた紺色を表現したい場合は、キーワードではなくHEXコード「#223a70」やRGB値で直接指定してください。

Q3：IllustratorやPhotoshopで紺色をCMYK変換すると紫っぽくなるのはなぜですか？
A3：RGBからCMYKへの自動変換時にマゼンタ（M）の数値が高く設定されてしまうことが主な原因です。印刷用の紺色を作成する際は、自動変換に頼らずCMYKスライダーで「Mの値をCの値より15〜20%低く設定」し、「少量のイエロー（20%前後）とブラック（10〜15%）」を加えることで、紫かぶりのない美しい深紺色に調整できます。

まとめ：正確なカラーコード把握でブレないデザイン設計を

紺色は、画面表示と印刷、伝統色とデジタル規格の間で微妙な数値のズレが生じやすい色です。基準となるJIS規格の紺色コード#223a70をベースに、Web用途ならダークネイビー（#0b1528）、印刷ならCMYKの適正配分といった使い分けを押さえておくことで、媒体をまたいでもブランドイメージの一貫性を保てます。

色彩がユーザーに与える心理的影響は極めて大きく、わずか数パーセントの色相・彩度の違いがプロダクトの信頼感を大きく左右します。本記事で紹介したHEXコードや配色パレットを活用し、プロジェクトの目的に応じた最適な紺色をデザインに取り入れてみてください。 （出典: 紺色 カラー コード（Yahoo!ニュース））