青系の色の名前とHEX一覧｜和名からWEB配色・心理効果まで徹底解説
ビジネスの信頼性を象徴するコーポレートカラーから、洗練されたWEBデザイン、日本の伝統美を宿す着物の色彩まで、世界で最も人々に愛されている系統色が「青」です。しかし一口に青といっても、透明感あふれる空色から、重厚な深海を思わせる濃紺、絶妙なニュアンスを醸し出すくすみブルーまで、その表情は千差万別。選択する色番号ひとつで、ユーザーに与える心理的印象やブランドイメージは180度変化します。
デジタルデバイスの進化により、WEBやグラフィック制作におけるカラー設計の重要性は急速に高まっています。色の正確なHEXコードやRGB値、伝統的な和名の由来や色彩心理効果を正しく把握していなければ、意図したデザインの意図が伝わらないばかりか、コントラスト比の不足による視認性の低下を招きかねません。本稿では、デザイン現場で即戦力となる青系の色の名前一覧とHEXカラーコード、日本の伝統色から最新のWEB配色パレットまでをプロの視点から徹底的に体系化しました。
📌 【この記事の重要ポイントまとめ】
- 要点1：水色から濃紺、くすみブルーまで、WEBデザインで失敗しない代表的な青系24色の正確なHEXコードとRGB比率を一覧化。
- 要点2：混同されがちな「紺色と藍色」「瑠璃色と群青色」の決定的な違いと歴史的背景・顔料のルーツを解き明かす。
- 要点3：色彩心理効果（信頼・沈静・知性）を活かしたWEBデザイン配色見本と、アクセシビリティ（視認性）をクリアする実践手法を提示。
【決定版】青系の色の名前一覧とカラーコードHEX｜和名・洋名24選
デジタルデザインやイラスト制作、プロダクト企画において直感的にカラーピッカーへ入力できるよう、主要な青系の色をカテゴリ別に分類しました。日本の情緒が宿る「和名」と、国際的に通用する「洋名」の双軸から厳選しています。
| 色名（和名／洋名） | HEXコード / RGB値 | 色彩の系統・明度 | 編集部の見解・おすすめ用途 |
|---|---|---|---|
| 甕覗（かめのぞき） | #A2D7DD (162, 215, 221) | 淡青色（高明度・中彩度） | 藍染めで最も薄い色。WEBデザインの背景や透明感を演出したいLPに最適。 |
| 水色（みずいろ） | #BCE2E8 (188, 226, 232) | 明清色（高明度・低彩度） | 清潔感・初夏・清涼飲料水のプロモーションに不動の支持を集める定番色。 |
| 空色（そらいろ / Sky Blue） | #87CEEB (135, 206, 235) | 純色系（中明度・中彩度） | 澄み切った昼の空。教育サービスやオープンなコミュニティのUIに好相性。 |
| 浅葱色（あさぎいろ） | #00A3AF (0, 163, 175) | 緑青系（中明度・高彩度） | 新選組の羽織で有名。わずかに黄みを含む鮮やかな青緑で、視線を惹くアクセントに。 |
| ターコイズブルー（Turquoise Blue） | #00AFCC (0, 175, 204) | 青緑系（中明度・高彩度） | 南国の海や宝石を想起させる。リゾート関連やクリエイティブツールのメインカラー。 |
| シアン（Cyan） | #00FFFF (0, 255, 255) | 原色（高明度・最高彩度） | 印刷の基本4原色。デジタル感を強調するサイバーパンク調のキービジュアル向け。 |
| 勿忘草色（わすれなぐさいろ） | #70A9A1 (112, 169, 161) | くすみ青（中明度・低彩度） | ノスタルジックで優しいニュアンスブルー。女性向けメディアやコスメUIで人気。 |
| 露草色（つゆくさいろ） | #2EA9DF (46, 169, 223) | 中青色（中明度・高彩度） | 朝露を浴びた花の鮮烈な青。明るくポジティブなテック系スタートアップに合致。 |
| セルリアンブルー（Cerulean Blue） | #007BBB (0, 123, 187) | 純青（中明度・高彩度） | 絵の具の定番。空の広大さを象徴し、UIの主要アクションボタンで高いクリック率を記録。 |
| コバルトブルー（Cobalt Blue） | #0047AB (0, 71, 171) | 鮮青（中明度・高彩度） | 無機質で力強い青。工業デザイン、精密機械、AIソリューションのブランディングに。 |
| 瑠璃色（るりいろ / Lapis Lazuli） | #1E50A2 (30, 80, 162) | 深紫青（中明度・中彩度） | ラピスラズリ由来の神秘的な青。高級感と知的権威を同時に担保できる万能カラー。 |
| 群青色（ぐんじょういろ / Ultramarine） | #4C6CB3 (76, 108, 179) | 紫青（中明度・中彩度） | アズライトから採れる重厚な青。伝統芸能や和モダンなブランディングの主軸。 |
| ロイヤルブルー（Royal Blue） | #002F87 (0, 47, 135) | 濃青（低明度・高彩度） | 英国王室御用達の格式高い青。金融、高級車、士業サイトの信頼獲得に絶大な効果。 |
| 藍色（あいいろ / Indigo） | #165E83 (22, 94, 131) | 深暗青（低明度・中彩度） | タデアイの染料が生む「ジャパンブルー」。職人技や伝統工芸の訴求に欠かせない。 |
| 紺色（こんいろ / Navy） | #111E38 (17, 30, 56) | 極暗青（極低明度・中彩度） | ビジネススーツの基本色。テキストの可読性を極限まで高める代替ブラックとして重宝。 |
| 勝色（かちいろ） | #181B26 (24, 27, 38) | 漆黒青（極低明度・低彩度） | 武士が縁起を担いだ「勝ち色」。サッカー日本代表ユニフォームの象徴的カラー。 |
これらの中でも、WEBアクセシビリティ（WCAG 2.2）の観点において、白背景（#FFFFFF）に対して4.5:1以上のコントラスト比を確保できるのは、輝度値の低い#0047AB（コバルトブルー）や#002F87（ロイヤルブルー）以降のダークトーンです。淡い水色系を文字色として使用すると可読性が著しく損なわれるため、背景やカードUIの境界線として活用するのが鉄則です。
紺色と藍色の違いとは？歴史と染料から紐解く決定的な境界線
日常生活やビジネスシーンで混同されやすいのが「紺色」と「藍色」の差異です。どちらも深い青を指す言葉として使われますが、色彩学および染織の歴史において明確な構造的違いが存在します。
藍色は、植物の「タデアイ」を発酵させてつくる蒅（すくも）を用いて染め上げた色全般を指します。藍染めは染める回数によって「甕覗」から「浅葱」「藍」「留紺」へと濃さが変化し、その中核にあるやや緑みを帯びた深い青が藍色（インディゴ）です。一方、紺色は藍染めの工程を極限まで繰り返し、紫がかった最も濃い段階に達した色（濃藍）を指し、平安時代には貴族の位階を表す深位の禁色としても扱われました。
現代のデジタル定義で言えば、藍色（#165E83付近）は彩度がやや高く青緑のニュアンスを含むのに対し、紺色（#111E38や#000080）は明度・彩度ともに極限まで抑えられた純粋な暗青色という住み分けがなされています。
また、同様に比較される「瑠璃色」と「群青色」の由来にも触れておく必要があります。瑠璃色は仏教の七宝の一つである鉱石「ラピスラズリ」の粉末に由来し、わずかに紫を感じさせる透明感ある深い青です。対して群青色は、藍銅鉱（アズライト）という鉱石の粒子を細かく砕いて「群がり集めた」ことから名付けられ、マットで重厚な深みを持っています。このルーツを知ることで、デザインのコンセプト設定時に最適な色名を語彙として選定できるようになります。
青の色彩心理効果とUIデザイン現場が直面する「青のパラドックス」
青が持つ色彩心理効果は、心理学およびマーケティング調査で最も強固に実証されている領域です。青は副交感神経を刺激し、心拍数や血圧を落ち着かせる「沈静効果」、集中力を高める「生産性向上効果」、そして不正やエラーを感じさせない「誠実・信頼・安全」の象徴として作用します。
世界的なメガテック企業（Meta、Xの旧Twitter、PayPal、IBM、Intelなど）のロゴが圧倒的に青を採用しているのは、ユーザーの個人情報や決済データを預かるプラットフォームとして無意識の安心感（Psychological Safety）を植え付けるためです。
しかし、デザイン現場では「青のパラドックス」と呼ばれる落とし穴が存在します。青は冷徹さ、孤独感、食欲減退を引き起こす波長（450〜495nm）を持つため、用途を誤ると致命的な離脱を生む点です。
- 食品・フードデリバリー分野での禁忌：自然界に青い食材がほとんど存在しないため、青は本能的に「毒」や「腐敗」を想起させます。飲食系ECで青を主色にすると購買転換率（CVR）が低下する傾向が顕著です。
- 過度な無機質化：医療やSaaSのUIで彩度の低い青ばかりを敷き詰めると、ユーザーは「冷たい」「事務的で使いにくい」という圧迫感を覚えます。
【WEBデザイン実例】即戦力になる青系配色見本とグラデーションパレット
単色の青を使うだけでなく、近年のWEBデザイントレンドである「くすみブルー」や「流体グラデーション」を組み合わせた高品位な配色パレットを3パターン提案します。
① 洗練された知性を漂わせる「和モダン・ミニマルパレット」
ベース：#F4F7F6（微青オフホワイト）
メイン：#1E50A2（瑠璃色）
アクセント：#E08A3C（琥珀色・補色）
深みのある瑠璃色に対し、対角線にある温かみのあるアンバーを少量差し込むことで、信頼感の中に人間味を感じさせる黄金比が完成します。
② Z世代・ライフスタイルメディア向け「くすみブルー（ニュアンス）パレット」
ベース：#FAFAFA（クリーンホワイト）
メイン：#70889B（スレートブルー）
サブ：#B8C9D3（フォグブルー）
アクセント：#D9A5B3（ダスティピンク）
彩度を抑えたグレイッシュな青は、北欧家具のような落ち着きとエモーショナルな世界観を構築するのに最適です。
③ 次世代SaaS・AIプロダクト向け「ネオングラデーションパレット」
グラデーション始点：#0052D4（ハイパーディープブルー）
中間点：#4364F7（エレクトリックロイヤル）
グラデーション終点：#6FB1FC（シアンライト）
CSSのlinear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%)で実装することで、画面上に圧倒的な奥行きと先進性を付与できます。
現場検証｜WEB・印刷現場でデザイナーが陥る「青の落とし穴」と誤解
制作会社やインハウスデザイナーの現場において、青系の色を扱う際に最もトラブルが頻発するのが「色空間のミスマッチ」と「広色域ディスプレイでの発色ギャップ」です。
多くのデザイナーが画面上で指定した鮮烈なロイヤルブルー（#002F87）やシアン寄りの鮮青をそのままパンフレット等の印刷物に回した際、「インクが濁って黒ずんだ紫になってしまった」というトラブルを経験します。RGBの色域（特にDisplay P3対応の最新モニター）で発色する鮮やかな青は、印刷用のCMYK色域では物理的に再現不可能な領域（ガマット外）に位置しているためです。印刷を伴う案件では、初期段階からCMYKのインキ配合（C100% + M80% + K10%など）を意識したカラー設計が不可欠です。
さらにネット上で散見される「青は万人受けするから誰にでも見やすい」という言説も危険な誤解です。加齢黄斑変性や白内障を患う高齢者の視覚では、水晶体が黄色く濁るため、青系の光波長が遮断され、「青と黒」「青と濃紺」の境界が判別できなくなる現象が生じます。高齢者向け行政サービスや医療系WEBサイトでは、青の明度差を通常以上に大きく設計する配慮が求められます。
【プロの結論】青系デザインを採用すべきケース・避けるべきシーン
✅ 積極的に採用すべきケース：
- 金融機関、保険、不動産、法律事務所など「資産」と「規律」を扱うWEBサイト
- 企業のコーポレートサイト全般（安定した事業基盤と透明性をアピール）
- 業務効率化SaaS、クラウド管理画面（長時間の注視でも眼精疲労が少ない）
- 水回り設備、空気清浄機、夏期限定商材のランディングページ
❌ 慎重になるべき・避けるべきシーン：
- 温もりや手作り感を最優先するベーカリー・温冷食品EC（購買意欲を阻害）
- 緊急性や情熱を瞬発力で伝えたいセール告知（青は心理的に衝動買いを抑制する）
- ターゲット層の平均年齢が70歳以上のシニア特化型プラットフォーム（文字色としての青）
【青系の色】に関するよくある質問（FAQ）
Q1：水色の種類一覧の中で、ビジネスサイトのアクセントに使いやすい色はどれですか？
A1：ビジネスのトーンを崩さずに清涼感を加えるなら「浅葱色（#00A3AF）」や「セルリアンブルー（#007BBB）」が適しています。パステル調の水色（#BCE2E8）は背景やカードの塗りつぶしには適していますが、文字やアイコンに使用するとコントラストが不足するため注意してください。
Q2：ロイヤルブルーの特徴と、ダークネイビーとの使い分けの基準は何ですか？
A2：ロイヤルブルー（#002F87）は高い彩度を維持したまま明度を落とした「気品と華やかさ」を持つ色です。一方、ダークネイビーは黒に極めて近い実用色です。ブランドの象徴的なキービジュアルにはロイヤルブルーを用い、ヘッダー背景や本文テキストにはネイビーを用いることで、洗練された階層構造が構築できます。
Q3：トレンドの「くすみブルー」に合わせる失敗しないサブカラーは？
A3：同系色の淡いグレー（#E5E9EC）をベースに据えつつ、アクセントとして「グレージュ（#C8C2BC）」や「スモーキーテラコッタ（#C87D65）」を合わせるのが王道の配色です。無機質な青に有機的なアースカラーが加わることで、現代的で心地よい空間性が生まれます。
まとめ：失敗しない青の選択がデザインの価値を劇的に変える
青系の色は、人類の歴史の中で最も多くの文化圏から愛され、デジタル社会となった現在でもインターフェースの根幹を支え続ける万能の色です。しかし、そのバリエーションは「甕覗」の儚い透明感から「勝色」の峻烈な深淵まで極めて広大であり、RGB値やHEXコードのわずかな違いがデザイン全体の品格やユーザビリティを左右します。
単に「無難だから」「好まれるから」という理由で青を選ぶのではなく、色彩のルーツ、心理効果、そしてデバイスごとのコントラスト比を論理的に計算した上でカラーパレットを組み立てることが重要です。本稿で紹介したカラーコード一覧と実践的な配色セオリーを活用し、ユーザーの心を捉えて離さない洗練されたクリエイティブを実現してください。 （出典: 青 系 の 色（Yahoo!ニュース））
Webメディアの編集およびコンテンツ作成に従事。正確で質の高い情報発信を心掛けています。