花紺青

はなこんじょう | Flower Ultramarine

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

広色域(Display P3)比較

sRGB(従来のWeb標準)

#3D6EBA

Display P3(広色域)

color(display-p3 0.29 0.43 0.71)

意味と歴史

由来

花のように鮮やかで華やかな紺青色を意味する。天然の藍銅鉱(アズライト)を砕いて作る岩絵具の中でも、特に鮮やかで美しい青を選んで「花」の冠を付けた、日本画の最上級の青色顔料を指す色名である。

歴史

日本画において最も美しい青を表す色名で、狩野派や琳派の絵師たちが最上級の群青として珍重した。粒子の大きさで発色が変わる岩絵具の特性を極めた色で、障壁画や屏風絵の空や水の最も鮮やかな部分に使われた。

心理的効果

鮮やかさ、深み、芸術的な感動を感じさせる。天然鉱物から得られる最上級の青は、人工顔料では再現できない複雑な輝きを持ち、日本画の長い伝統の中で磨き抜かれた美の極致を感じさせる格調高い色である。

伝統的な用途

日本画や障壁画の最も鮮やかな青色部分に用いられ、仏画の浄土の空にも使われた。現代でも日本画家が岩絵具として使い続ける伝統的な色材であり、その深い青は美術館の展示作品を通じて多くの人々を魅了し続けている。

CSSコード

HEX

#3D6EBA

RGB

rgb(61, 110, 186)

CMYK

cmyk(67%, 41%, 0%, 27%)

HSV

hsv(216, 67%, 73%)

OKLCH

oklch(0.542 0.131 258.9)

Display P3

color(display-p3 0.29 0.43 0.71)

Munsell

5PB 4.7/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #3D6EBA;
  background-color: oklch(0.542 0.131 258.9);
}

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

コントラストチェッカー

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

サンプル

白背景

5.08:1

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

黒背景

4.14:1

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

白文字

5.08:1

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

黒文字

4.14:1

AA Fail AAA Fail
AA大文字 Pass

配色シミュレーター

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

背景色として使用

白テキスト — 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型)

赤色の感度が低下

#4B75BD

D型(2型)

緑色の感度が低下

#3869B8

T型(3型)

青色の感度が低下

#007F8B

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #3D6EBA, #FFFFFF);
#3D6EBA
#648BC8
#8BA8D6
#B1C5E3
#D8E2F1
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #3D6EBA, #000000);
#3D6EBA
#315895
#254270
#182C4A
#0C1625
#000000

透明へ

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

エクスポート

CSS変数
--color-kakiiro2: #3D6EBA;
--color-kakiiro2-rgb: 61, 110, 186;
--color-kakiiro2-oklch: 0.542 0.131 258.9;
Sass変数
$color-kakiiro2: #3D6EBA;
$color-kakiiro2-rgb: rgb(61, 110, 186);
$color-kakiiro2-oklch: oklch(0.542 0.131 258.9);
Tailwind Config
'kakiiro2': '#3D6EBA',
SwiftUI
Color(red: 0.239, green: 0.431, blue: 0.729)
JSON
{
  "name": {
    "ja": "花紺青",
    "en": "Flower Ultramarine",
    "reading": "はなこんじょう"
  },
  "hex": "#3D6EBA",
  "rgb": {
    "r": 61,
    "g": 110,
    "b": 186
  },
  "cmyk": {
    "c": 67,
    "m": 41,
    "y": 0,
    "k": 27
  },
  "oklch": {
    "l": 0.542,
    "c": 0.131,
    "h": 258.9
  },
  "displayP3": {
    "r": 0.29,
    "g": 0.43,
    "b": 0.71
  },
  "hsv": {
    "h": 216,
    "s": 67,
    "v": 73
  },
  "munsell": "5PB 4.7/8"
}

関連する色

他の文化圏の類似色