群青色

ぐんじょういろ|Ultramarine Blue

色コードの出典:群青色 - 和色大辞典

広色域(Display P3)比較

sRGB(従来のWeb標準)

#4C6CB3

Display P3(広色域)

color(display-p3 0.3247 0.4201 0.6818)

意味と歴史

由来

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

出典(2件)

歴史

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

出典(2件)

心理的効果

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

出典(1件)

伝統的な用途

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

出典(1件)

CSSコード

HEX

#4C6CB3

RGB

rgb(76, 108, 179)

CMYK

cmyk(57.5%, 39.7%, 0%, 29.8%)

HSV

hsv(221.4, 57.5%, 70.2%)

OKLCH

oklch(54.07% 0.1176 264.49)

Display P3

color(display-p3 0.3247 0.4201 0.6818)

Munsell

3P 4/10

CIE XYZ

XYZ(0.16477, 0.15515, 0.44765)

CIE L*a*b*

Lab(46.331618, 10.122943, -41.247711)

CIE LCH(ab)

LCH(46.331618, 42.471727, 283.788909°)

CIE L*u*v*

Luv(46.331618, -15.648117, -62.777727)

Hunter Lab

Hunter Lab(39.38906, 7.963961, -43.672352)

xyY

xyY(0.214663, 0.20213, 0.15515)

JzAzBz

JzAzBz(0.012629, -0.001242, -0.009638)

JzCzHz

JzCzHz(0.012629, 0.009718, 262.657052°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #4C6CB3;
  background-color: oklch(54.07% 0.1176 264.49);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.3247 0.4201 0.6818);
  }
}

コントラストチェッカー

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

白背景

5.12:1

AA PassAAA Fail
AA大文字 Pass

黒背景

4.10:1

AA FailAAA Fail
AA大文字 Pass

白文字

5.12:1

AA PassAAA Fail
AA大文字 Pass

黒文字

4.10:1

AA FailAAA Fail
AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。

背景色として使用
テキスト色として使用
UIコンポーネントでの使用例

色覚シミュレーション

P型(1型)

赤色の感度が低下

#4E73B6

D型(2型)

緑色の感度が低下

#4169B1

T型(3型)

青色の感度が低下

#007C87

配色提案

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

補色

Complementary

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

#4C6CB3
#8E6800

類似色

Analogous

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

#4C6CB3
#0078A9
#745FAC

トライアド

Triadic

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

#4C6CB3
#A9504C
#3E8040

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

Split-complementary

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

#4C6CB3
#A25920
#6E760D

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

Tetradic (Square)

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

#4C6CB3
#A24F73
#8E6800
#00846A

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

Tetradic (Rectangle)

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

#4C6CB3
#905595
#8E6800
#3E8040

モノクロマティック

Monochromatic

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

#4C6CB3
#99ABD1
#1D3D8F
#708BC6

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

Double Complementary

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

#4C6CB3
#745FAC
#8E6800
#6E760D

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #4C6CB3, #FFFFFF);
#4C6CB3
#7089C2
#94A7D1
#B7C4E1
#DBE2F0
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #4C6CB3, #000000);
#4C6CB3
#3D568F
#2E416B
#1E2B48
#0F1624
#000000

透明へ

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

エクスポート

CSS変数
--color-gunjouiro: #4C6CB3;
--color-gunjouiro-rgb: 76, 108, 179;
--color-gunjouiro-oklch: 54.07% 0.1176 264.49;
Sass変数
$color-gunjouiro: #4C6CB3;
$color-gunjouiro-rgb: rgb(76, 108, 179);
$color-gunjouiro-oklch: oklch(54.07% 0.1176 264.49);
Tailwind Config
'gunjouiro': '#4C6CB3',
SwiftUI
Color(red: 0.298, green: 0.424, blue: 0.702)
JSON
{
  "name": {
    "ja": "群青色",
    "en": "Ultramarine Blue",
    "reading": "ぐんじょういろ"
  },
  "hex": "#4C6CB3",
  "rgb": {
    "r": 76,
    "g": 108,
    "b": 179
  },
  "cmyk": {
    "c": 57.5,
    "m": 39.7,
    "y": 0,
    "k": 29.8
  },
  "oklch": {
    "l": 54.07,
    "c": 0.1176,
    "h": 264.49
  },
  "displayP3": {
    "r": 0.3247,
    "g": 0.4201,
    "b": 0.6818
  },
  "hsv": {
    "h": 221.4,
    "s": 57.5,
    "v": 70.2
  },
  "munsell": "3P 4/10"
}