ネイビーカラーコード一覧：HEX・RGB・CMYKと配色例
ネイビーの代表的なカラーコードは HEX #000080、RGB 0, 0, 128 です。ただし実務では、黒に近い濃紺、少し明るいクラシックネイビー、紫みを含むインディゴ、鮮やかなロイヤルブルーを使い分けると、Webサイト、資料、ロゴ周り、印刷物の印象を整えやすくなります。この記事では、ネイビー系カラーのHEX・RGB・CMYK一覧、似た青との違い、背景色や文字色の組み合わせ、印刷時の注意点をまとめます。
まず使いやすいネイビーはこの5色
最初に選ぶなら、定番のネイビーは #000080、黒に近い落ち着いた濃紺は #0D1B2A、Web背景で扱いやすいミッドナイトネイビーは #1B263B、少し青みを見せたいクラシックネイビーは #1F3A5F、明るいアクセントには #203864 が使いやすいです。ネイビーは黒より柔らかく、青より引き締まるため、企業サイト、資料、ファッション、教育、金融系のデザインで安定感を出しやすい色です。
注意したいのは、暗いネイビーを本文背景に使うときの文字色です。白文字は見やすい一方、細いグレー文字や彩度の低い青文字を重ねると読みにくくなります。淡い背景にネイビー文字を置く場合は、白、アイボリー、ライトグレー、淡いベージュと組み合わせると、硬すぎない印象にできます。
濃紺
ネイビー
ミッドナイト
クラシック
明るめ
ネイビーカラーコード一覧表
下の表は、Web制作、資料作成、SNS画像、印刷物で使いやすいネイビー系カラーをまとめたものです。HEXとRGBは画面表示用、CMYKは一般的な変換式による近似値です。濃い青は印刷で沈みやすいため、CMYK値は入稿前の目安として扱い、重要な案件では校正で確認してください。
| 色名 | 色見本 | HEX | RGB | CMYK目安 | 向いている用途 |
|---|---|---|---|---|---|
| ネイビー | #000080 | 0, 0, 128 | C100 M100 Y0 K50 | 定番の見出し、ロゴ周り、締め色 | |
| 濃紺 | #0D1B2A | 13, 27, 42 | C69 M36 Y0 K84 | フッター、ヒーロー背景、高級感 | |
| ミッドナイトネイビー | #1B263B | 27, 38, 59 | C54 M36 Y0 K77 | Web背景、カード見出し、資料表紙 | |
| クラシックネイビー | #1F3A5F | 31, 58, 95 | C67 M39 Y0 K63 | 企業サイト、教育、BtoB資料 | |
| オックスフォードネイビー | #1F2A44 | 31, 42, 68 | C54 M38 Y0 K73 | 落ち着いたブランドカラー | |
| インディゴネイビー | #203864 | 32, 56, 100 | C68 M44 Y0 K61 | 少し青みを出すアクセント | |
| スレートネイビー | #2F4057 | 47, 64, 87 | C46 M26 Y0 K66 | 落ち着いたUI、背景、表見出し | |
| ダスティネイビー | #3C4A5F | 60, 74, 95 | C37 M22 Y0 K63 | 柔らかい本文周り、くすみ配色 | |
| ブルーネイビー | #0A3D62 | 10, 61, 98 | C90 M38 Y0 K62 | リンク、アクセント、清潔感 | |
| ロイヤルネイビー | #1D4E89 | 29, 78, 137 | C79 M43 Y0 K46 | CTA周辺、強めの青アクセント |
ネイビー・濃紺・インディゴ・ロイヤルブルーの違い
ネイビーは「黒に近い青」の代表色ですが、似た青をすべて同じ名前で扱うと、画面や印刷で印象がずれます。濃紺はネイビーよりさらに黒に近く、落ち着きや重厚感を出しやすい色です。インディゴはやや紫みを含む青で、デニムやクラフト感のある表現に向いています。ロイヤルブルーはネイビーより明るく鮮やかで、リンクやボタンなど小さなアクセントに使うと視線を集めやすくなります。
落ち着いたトーンでまとめたい場合は、ネイビーに近い くすみカラーやスレート系の青を組み合わせると、画面全体が硬くなりすぎません。逆に、明るい印象を作りたい場合は、ネイビーを文字や見出しに使い、背景には白、ライトグレー、ベージュ系カラーを合わせると読みやすくなります。
| 色タイプ | 代表コード | 印象 | 向いている場面 |
|---|---|---|---|
| 濃紺 | #0D1B2A | 重厚、静か、高級感 | フッター、表紙、落ち着いた背景 |
| ネイビー | #000080 | 信頼、安定、引き締め | 見出し、ロゴ周り、文字色 |
| インディゴ | #203864 | 知的、クラフト、少し紫み | デニム、教育、編集系デザイン |
| ロイヤルブルー | #1D4E89 | 鮮やか、活動的、視線誘導 | リンク、CTA、小さなアクセント |
配色パターンと文字色
ネイビーを背景にする場合、本文は白またはごく淡いグレーにすると読みやすくなります。逆に、白やアイボリー背景にネイビー文字を使う場合は、黒ほど強くならず、上品で信頼感のある印象を作れます。淡い背景に薄い青やグレーを重ねるとコントラスト不足になりやすいため、通常テキストでは WCAGのコントラスト基準を目安に確認してください。
| 目的 | 背景 | アクセント | 文字色 | 使い方 |
|---|---|---|---|---|
| 信頼感のある資料 | #F7F8FA | #1F3A5F | #0D1B2A | 白に近い背景へネイビー見出しを置く |
| 高級感のあるLP | #0D1B2A | #D6CEC2 | #FFFFFF | 濃紺背景にグレージュを小さく使う |
| 教育・BtoBサイト | #FFFFFF | #203864 | #1B263B | 本文は暗いネイビー、リンクは少し明るい青にする |
| ファッション・編集 | #EEE8DF | #3C4A5F | #243047 | ベージュ系背景にダスティネイビーを合わせる |
CMYK・印刷で使うときの注意点
ネイビーはRGBでは鮮やかに見えても、CMYKに変換すると黒みが強くなり、細かい文字や罫線がつぶれて見えることがあります。特に #0D1B2A のような濃紺は、画面では深みのある青に見えても、紙では黒に近く沈む場合があります。印刷物で青みを残したいときは、少し明るい #1F3A5F や #203864 を検討してください。
目安のCMYK値は RGB⇔CMYK変換ツールで確認できます。ただし、ネイビーのような暗色は用紙、インキ、印刷方式、ICCプロファイルの影響を受けます。名刺、ブランドカード、パッケージなど色の印象が重要な制作では、画面上のHEX値だけで確定せず、印刷会社の指定条件と校正を優先してください。
よくある質問
#000080 です。RGBでは 0, 0, 128、CMYKの目安は C100 M100 Y0 K50 です。
#FFFFFF、アイボリー #FAF6ED、淡いグレー #F7F8FA が合わせやすいです。薄い青や中間グレーは読みにくくなることがあります。