Navy カラー

ネイビー — 権威と伝統の色

#000080Navy

カラー値

HEX#000080

RGBrgb(0, 0, 128)

HSLhsl(240°, 100%, 25%)

CSSnavy

シェードパレット

#E8EAFF

100

#C5C9FF

300

#7B82E8

500

#3F51B5

700

#1A237E

900

#0D0D4D

補色

↔

#808000

Olive

類似色

#000090

Dark Navy

#1A1A80

Midnight Blue

CSS使用例

CSS

/* By name */
color: navy;
background-color: navy;

/* By HEX */
color: #000080;
background-color: #000080;

/* By RGB */
color: rgb(0, 0, 128);

/* By HSL */
color: hsl(240deg, 100%, 25%);

/* With opacity */
color: rgba(0, 0, 128, 0.8);
color: hsl(240deg 100% 25% / 80%);

ネイビー(#000080)は非常に暗いため、テキスト色として使う場合は十分な背景コントラストが必要です。暗い背景では#1E3A8Aや#1D4ED8のような明るい青を使用してください。

ネイビー(#000080)は海軍の制服に由来する深く濃い青色で、権威・伝統・信頼性・専門性を表現します。金融機関、法律事務所、教育機関、政府機関のUIでよく使われます。白や金との組み合わせでクラシックでプレミアムな印象を与えます。ダークナビゲーションバー、ヘッダー、重厚感が求められる背景に適しています。

主な使用例

▸金融・銀行UI — 信頼と安定感(JPモルガン、ドイツ銀行)
▸教育プラットフォーム — 学術的権威と伝統の表現
▸フォーマルファッションブランド — エレガントでプロフェッショナルなイメージ
▸ナビゲーションバーの背景 — 高級感のあるプロフェッショナルなヘッダー
▸データチャート — 金色・白との組み合わせによる高品質な可視化
▸公的機関・政府ウェブサイト — 公式性と信頼感

Navy カラー

CSS使用例

主な使用例

関連カラー