紺青

こんじょう | Prussian Blue

日本の伝統色 青系 日本の伝統色

広色域(Display P3)比較

sRGB(従来のWeb標準)

#003171

Display P3(広色域)

color(display-p3 0.07 0.19 0.43)

意味と歴史

由来

岩絵具の紺青(群青に近い濃い青)に由来する色名。天然の藍銅鉱(アズライト)を砕いて精製した鉱物顔料で、粒子の大きさによって色の濃淡が変わる。最も細かく砕いたものは淡く、粗いものほど濃い青となる独特の性質を持つ。

歴史

浮世絵において葛飾北斎や歌川広重が多用した深い青で、「北斎ブルー」として世界的に知られる。特に北斎の「富嶽三十六景・神奈川沖浪裏」の波の青はベロ藍(プルシアンブルー)とともに印象派のモネやゴッホにも影響を与えた。

心理的効果

深淵と荘厳、無限の広がりを感じさせる色で、夜空の深みや海底の静寂を連想させる。意識を内面に向けさせ、深い思索や瞑想を促す効果がある。崇高な精神世界への扉を開くような厳かさと、知的な気品を兼ね備えた色合いである。

伝統的な用途

浮世絵や日本画の岩絵具として障壁画や屏風に、陶磁器の呉須絵付けとして有田焼や九谷焼に用いられた。現代でも日本画家の必須顔料であり、藍染めの最も深い段階の色として武道の剣道着や柔道着にもこの紺青の深みが活きている。

CSSコード

HEX

#003171

RGB

rgb(0, 49, 113)

CMYK

cmyk(100%, 57%, 0%, 56%)

HSV

hsv(214, 100%, 44%)

OKLCH

oklch(0.328 0.121 257.9)

Display P3

color(display-p3 0.07 0.19 0.43)

Munsell

5PB 2.2/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #003171;
  background-color: oklch(0.328 0.121 257.9);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.07 0.19 0.43);
  }
}

コントラストチェッカー

WCAG 2.1 基準に基づくコントラスト比を表示します。

サンプル

白背景

12.52:1

AA Pass AAA Pass
AA大文字 Pass
サンプル

黒背景

1.68:1

AA Fail AAA Fail
AA大文字 Fail
サンプル

白文字

12.52:1

AA Pass AAA Pass
AA大文字 Pass
サンプル

黒文字

1.68:1

AA Fail AAA Fail
AA大文字 Fail

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — The quick brown fox

黒テキスト — The quick brown fox

色の上にテキストを配置した場合の可読性を確認できます。見出し・本文・リンクなど、さまざまなサイズで試してみてください。

テキスト色として使用

白背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

黒背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

UIコンポーネントでの使用例
バッジ

色覚シミュレーション

P型(1型)

赤色の感度が低下

#003973

D型(2型)

緑色の感度が低下

#002F70

T型(3型)

青色の感度が低下

#00414C

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

スプリットコンプリメンタリー

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #003171, #FFFFFF);
#003171
#335A8D
#6683AA
#99ADC6
#CCD6E3
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #003171, #000000);
#003171
#00275A
#001D44
#00142D
#000A17
#000000

透明へ

background: linear-gradient(to right, #003171, transparent);

エクスポート

CSS変数
--color-konjou: #003171;
--color-konjou-rgb: 0, 49, 113;
--color-konjou-oklch: 0.328 0.121 257.9;
Sass変数
$color-konjou: #003171;
$color-konjou-rgb: rgb(0, 49, 113);
$color-konjou-oklch: oklch(0.328 0.121 257.9);
Tailwind Config
'konjou': '#003171',
SwiftUI
Color(red: 0.000, green: 0.192, blue: 0.443)
JSON
{
  "name": {
    "ja": "紺青",
    "en": "Prussian Blue",
    "reading": "こんじょう"
  },
  "hex": "#003171",
  "rgb": {
    "r": 0,
    "g": 49,
    "b": 113
  },
  "cmyk": {
    "c": 100,
    "m": 57,
    "y": 0,
    "k": 56
  },
  "oklch": {
    "l": 0.328,
    "c": 0.121,
    "h": 257.9
  },
  "displayP3": {
    "r": 0.07,
    "g": 0.19,
    "b": 0.43
  },
  "hsv": {
    "h": 214,
    "s": 100,
    "v": 44
  },
  "munsell": "5PB 2.2/8"
}

関連する色

他の文化圏の類似色