【冬の寒色系配色】月白・鉄紺・留紺でつくる洗練「青・ブルーパレット」5色｜青が好きだけど野暮ったくしたくない人のためのRGB・HEXコード付

2026年11月14日

冬といえば、澄み渡った美しい「空の色」や降り積もる「雪の白さ」に、凛とした空気を思い浮かべます。

ホームページのデザインでは、「会社のイメージカラーは青（ネイビー）がいい」「誠実な印象がいい」というリクエストを多くいただきます。ですが、実際に青や紺色で、「塗りつぶすと重くなった」「なんだかダサいイメージに見える」と感じたりしませんか？

「青・ブルー系」は、会社のホームページで最も多く使われる色なので、ありきたりな色を選ぶと他社と似た印象になりやすく、個性が出にくいと思います。
そこで今回は、日本の伝統色をベースに少し個性的な配色を作ってみました。

あえて「濃い色」だけでなく、雪のような白を残すことで重たくならず、清潔感と品の良さを感じる色だと思います。季節感を出したいときはもちろんですが、一年を通して使える色だと思います。

※はじめにお伝えしておくと、私たちは伝統色の専門家ではございません。
色名の由来には諸説ありますので、そちらは専門家の方の本を見てください。

⇒冬のイメージ配色は2つあります。暖色系は後日、公開します。

冬の寒色系イメージ配色（5色）の意味とRGB／HTMLカラーコード

今回のパレットは、「白に近い雪色（月白）」と「深い紺色（鉄紺）」の2つをメインに置いています。
どちらを主役にするかは作り手の感覚なので、同じ5色でもまったく違うものが作れると思います。楽しみですね。

月の光を含んだような、ほんのり青みを帯びた淡い白色です。
通常の配色では濃い色をメインに置くことが多いですが、このパレットでは「余白」を主役にするため、あえて月白をメイン1に設定しました。

真っ白よりも目に優しく、静かで清潔感のある空気を作ります。暖かさを感じるのは私だけでしょうか。

わずかに緑みやグレーを含んだ、深みのある落ち着いた紺色です。
原色の青のような派手さや軽さがなく、誠実さ・知性・技術力の高さを静かに伝えてくれます。
見出しやメインビジュアルのベースとして、信頼感を感じさせる色です。

霞（かすみ）がかかったように柔らかく、くすみを含んだ上品な水色です。
紺色と白だけのデザインに、心地よい抜け感と親しみやすさをプラスします。図解のパーツやアイコン、強調したいテキストの装飾に使うと、画面が硬くなりすぎません。

絹織物のような、ほんのり温かみを感じさせるライトグレーです。
寒色系だけでまとめるとどうしても「冷たい・無機質」な印象になりがちですが、この絹鼠を枠線やカードの背景に挟むことで、人の手触りや安心感が加わります。

これ以上濃く染められないほど深い紺色です。
別名「搗色（かちいろ）」とも呼ばれ、古くから「勝ち色」として縁起を担がれてきた色でもあります。

真っ黒の代わりに文字色やお問い合わせボタンに使うことで、画面全体をきりっと引き締めつつ、気品ある印象に仕上げます。

「青系のサイトを作りたいのに、なぜメイン1が白に近い色なの？」と疑問に思われるかもしれませんね。

ですが、ネイビーや濃紺は非常に強い色のため、画面の広い面積に塗りつぶしてしまうと、圧迫感があったり、気分が少し沈んでしまうことがあります。
また、文字が読みにくくなる場合もあります。

そこで今回は、「月白という余白をたっぷり入れて、その上に鉄紺と留紺を効かせる」という比率で作ってみました。

余白を広く取ることで、言葉や写真が引き立ち、落ち着きを感じさせる配色になると思います。
いつもの「真っ青」に疑問を感じていた方は、ぜひトライしていただきたいです。

この寒色系パレットは、媒体によって得意・不得意がはっきり分かれます。

一番相性が良いのは、ホームページ（企業サイト・士業・医療・BtoBサービス・男性向けサロンなど）や、書籍・会社案内パンフレットのような「じっくり読ませたい媒体」です。
目が疲れにくく、誠実さやプロフェッショナルな雰囲気になります。

逆に、チラシやプレゼン資料（パワーポイント）のように「反応してもらわないと意味がない」媒体だと、静かな色合いが少し沈んで（地味に）見えやすくなります。

※もし全体的に弱い、インパクトがないと感じたら、強調したい枠や数字に、差し色としてオレンジ系（黄金色や蜜柑色など）を使うと画面が沈まずにメリハリが出ます。青系とオレンジの配色はかっこいいです。
もちろん渋めの赤もお勧めです。

文字色には「黒」ではなく「留紺」を使う
月白などの白っぽい背景に、文字をのせるときは、真っ黒ではなく深い紺色の「留紺」を使ってください。
パッと見は「黒」のようにくっきり読めて、全体の青のトーンと調和するので上品にまとまります。
強調やリンクは「鉄紺」と「朧花色」で強弱をつける
テキストリンクや小見出しには「鉄紺」を、アイコンの背景には「朧花色」などもいいと思います。
同じ青系の濃淡でメリハリをつけると、品よく仕上がります。
色数を増やさずに、情報の優先順位が分かりやすくなるように配置してください。
もっとしっかりコントラストをつけたいときは、迷わずに「オレンジ系、濃いめの赤系」などを使いましょう。

誠実な企業サイト・LP向け（王道バランス）：
背景：月白（#F3F6F8）／文字・見出し：留紺（#0C1633）／ボタン・帯：鉄紺（#294669）
※ブルーが並ぶと弱いと感じるときは、オレンジ、赤もお勧めです。
柔らかさと清潔感を出したい場合（医療・サロン・冊子向け）
背景：白（または月白）／枠・背景：絹鼠（#DCDCD9）／見出し：鉄紺（#294669）／アクセント：朧花色（#89B6D3）