群青色

ぐんじょういろ | Ultramarine Blue

日本の伝統色 青系 桃山時代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#005BAA

Display P3(広色域)

color(display-p3 0.1454 0.3511 0.6449)

意味と歴史

由来

日本画の岩絵具「群青」に由来する、紫みがかった深い青色。その名は「青が群れ集まる」という意味を持つ。本来は藍銅鉱(アズライト)を粉砕して作られた顔料の色だが、瑠璃(ラピスラズリ)を原料とする顔料の色も同様に呼ばれる。

出典(2件)

歴史

日本での使用時期は定かではないが、江戸中期の画法書『画筌』に記述があり、江戸時代には一般化していた。桃山時代の障壁画や江戸時代の琳派の屏風絵にも見られる。原料のラピスラズリは古代エジプトでも珍重され、高価だったため藍銅鉱が代替品として用いられた。1828年には合成顔料も開発された。

出典(2件)

心理的効果

興奮を抑え、気持ちを落ち着かせる鎮静効果や、集中力を高める効果がある。また、睡眠を促進するともいわれる。

出典(1件)

伝統的な用途

日本画の岩絵具として、桃山時代の障壁画や江戸時代の琳派の屏風絵などに用いられた。特に高価で貴重な顔料であったため、如来像や菩薩像の頭髪、曼荼羅の一部など、尊いものを描く際に主に使用された。

出典(1件)

CSSコード

HEX

#005BAA

RGB

rgb(0, 91, 170)

CMYK

cmyk(100%, 46.5%, 0%, 33.3%)

HSV

hsv(207.9, 100%, 66.7%)

OKLCH

oklch(47.2% 0.1461 253.11)

Display P3

color(display-p3 0.1454 0.3511 0.6449)

Munsell

3P 4/10

CIE XYZ

XYZ(0.10994, 0.10383, 0.39447)

CIE L*a*b*

Lab(38.52, 8.61, -48.57)

CIE LCH(ab)

LCH(38.52, 49.33, 280.06°)

CIE L*u*v*

Luv(38.52, -21.82, -70.38)

Hunter Lab

Hunter Lab(32.22, 0.63, -5.38)

xyY

xyY(0.18075, 0.1707, 0.10383)

JzAzBz

JzAzBz(0.009576, -0.0024, -0.010795)

JzCzHz

JzCzHz(0.009576, 0.011058, 257.47°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #005BAA;
  background-color: oklch(47.2% 0.1461 253.11);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.1454 0.3511 0.6449);
  }
}

コントラストチェッカー

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

サンプル

白背景

6.83:1

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

黒背景

3.08:1

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

白文字

6.83:1

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

黒文字

3.08: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型)

赤色の感度が低下

#2E62AD

D型(2型)

緑色の感度が低下

#0054A8

T型(3型)

青色の感度が低下

#006E7A

配色提案

この色の配色提案は、日本の伝統的な「かさねの色目」や「しきたり」の美意識に基づき、同じ文化圏の伝統色から最も近い調和色を選出しています。

補色

Complementary

色相環の反対側に位置する色。最も強いコントラストを生む

#005BAA
#FFFFFF

類似色

Analogous

色相が近い色の組み合わせ。自然で調和的な印象を与える

#005BAA
#FFFFFF
#FFFFFF

トライアド

Triadic

色相環を三等分する配色。活力がありバランスの良い組み合わせ

#005BAA
#FFFFFF
#FFFFFF

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

Split-complementary

補色の両隣を使う配色。補色より柔らかいコントラスト

#005BAA
#FFFFFF
#FFFFFF

テトラディック(正方形)

Tetradic (Square)

色相環を四等分する配色。豊かな色彩で華やかな印象

#005BAA
#FFFFFF
#FFFFFF
#FFFFFF

テトラディック(長方形)

Tetradic (Rectangle)

二対の補色を組み合わせた配色。多彩ながらまとまりのある配色

#005BAA
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

同じ色相で明度・彩度を変えた配色。統一感のある上品な印象

#005BAA
#CDF2FF
#FFFFFF
#B6F3FF

ダブルコンプリメンタリー

Double Complementary

隣り合う二色とその補色による四色配色。複雑で魅力的な配色

#005BAA
#FFFFFF
#FFFFFF
#FFFFFF

伝統的な配色の提案

同じ文化圏の伝統色から、色彩理論的に調和する色を選出しました。

グラデーション

ティント(明るく)

background: linear-gradient(to right, #005BAA, #FFFFFF);
#005BAA
#337CBB
#669DCC
#99BDDD
#CCDEEE
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #005BAA, #000000);
#005BAA
#004988
#003766
#002444
#001222
#000000

透明へ

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

エクスポート

CSS変数
--color-gunjouiro: #005BAA;
--color-gunjouiro-rgb: 0, 91, 170;
--color-gunjouiro-oklch: 47.2% 0.1461 253.11;
Sass変数
$color-gunjouiro: #005BAA;
$color-gunjouiro-rgb: rgb(0, 91, 170);
$color-gunjouiro-oklch: oklch(47.2% 0.1461 253.11);
Tailwind Config
'gunjouiro': '#005BAA',
SwiftUI
Color(red: 0.000, green: 0.357, blue: 0.667)
JSON
{
  "name": {
    "ja": "群青色",
    "en": "Ultramarine Blue",
    "reading": "ぐんじょういろ"
  },
  "hex": "#005BAA",
  "rgb": {
    "r": 0,
    "g": 91,
    "b": 170
  },
  "cmyk": {
    "c": 100,
    "m": 46.5,
    "y": 0,
    "k": 33.3
  },
  "oklch": {
    "l": 47.2,
    "c": 0.1461,
    "h": 253.11
  },
  "displayP3": {
    "r": 0.1454,
    "g": 0.3511,
    "b": 0.6449
  },
  "hsv": {
    "h": 207.9,
    "s": 100,
    "v": 66.7
  },
  "munsell": "3P 4/10"
}