ジャワ・インディゴ

Java Indigo

東南アジアの伝統色 青系 13〜14世紀

広色域(Display P3)比較

sRGB(従来のWeb標準)

#1A237E

Display P3(広色域)

color(display-p3 0.109026 0.136225 0.474641)

意味と歴史

由来

「ジャワ・インディゴ」は、インドネシアのジャワ島で発展した染色技法「バティック」と、その主要な染料である「インディゴ」に由来する。インディゴは`Indigofera`属の植物の葉から得られる天然の青色染料で、「バティック」という言葉はジャワ語の`bathik`を語源とする。

出典(1件)

歴史

ジャワ島におけるバティックの起源の特定は困難だが、2022年に13〜14世紀(マジャパヒト王国初期)のものとされる現存最古の作品が確認された。これにより、当時すでに高度な技術が存在したことが示唆される。その後、イスラム王朝時代の宮廷でさらに発展を遂げた。

出典(1件)

伝統的な用途

ジャワ島では、インディゴは「バティック」と呼ばれる蝋纈染めの技法で模様付きの布地を作るために用いられた。バティックの布地は、特定の模様が象徴的な意味を持ち、特別な儀式や機会でのみ使用されることもあった。染料は主に木綿糸の染色に使われた。

出典(1件)

CSSコード

HEX

#1A237E

RGB

rgb(26, 35, 126)

CMYK

cmyk(79.37%, 72.22%, 0%, 50.59%)

HSV

hsv(234.6, 79.37%, 49.41%)

OKLCH

oklch(32.07% 0.1509 270.29)

Display P3

color(display-p3 0.109026 0.136225 0.474641)

Munsell

CIE XYZ

XYZ(0.04792, 0.02928, 0.20047)

CIE L*a*b*

Lab(19.751202, 30.607846, -52.138665)

CIE LCH(ab)

LCH(19.751202, 60.458917, 300.414936°)

CIE L*u*v*

Luv(19.751202, -5.584763, -58.099092)

Hunter Lab

Hunter Lab(17.109959, 0.212935, -0.606685)

xyY

xyY(0.17257, 0.105434, 0.02928)

JzAzBz

JzAzBz(0.001975, -0.000013, -0.00866)

JzCzHz

JzCzHz(0.001975, 0.00866, 269.914857°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #1A237E;
  background-color: oklch(32.07% 0.1509 270.29);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.109026 0.136225 0.474641);
  }
}

コントラストチェッカー

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

サンプル

白背景

13.24:1

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

黒背景

1.59:1

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

白文字

13.24:1

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

黒文字

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

赤色の感度が低下

#003581

D型(2型)

緑色の感度が低下

#002B7C

T型(3型)

青色の感度が低下

#003C4D

配色提案

この配色は東南アジアの王室文化と仏教美術における伝統的な色彩調和の原理に基づいています。

補色

Complementary

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

#1A237E
#FFFFFF

類似色

Analogous

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

#1A237E
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#1A237E
#FFFFFF
#FFFFFF

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

Split-complementary

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

#1A237E
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#1A237E
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#1A237E
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#1A237E
#DBEDFF
#FFFFFF
#CFEBFF

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

Double Complementary

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

#1A237E
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #1A237E, #FFFFFF);
#1A237E
#484F98
#767BB2
#A3A7CB
#D1D3E5
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #1A237E, #000000);
#1A237E
#151C65
#10154C
#0A0E32
#050719
#000000

透明へ

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

エクスポート

CSS変数
--color-java_indigo: #1A237E;
--color-java_indigo-rgb: 26, 35, 126;
--color-java_indigo-oklch: 32.07% 0.1509 270.29;
Sass変数
$color-java_indigo: #1A237E;
$color-java_indigo-rgb: rgb(26, 35, 126);
$color-java_indigo-oklch: oklch(32.07% 0.1509 270.29);
Tailwind Config
'java_indigo': '#1A237E',
SwiftUI
Color(red: 0.102, green: 0.137, blue: 0.494)
JSON
{
  "name": {
    "ja": "ジャワ・インディゴ",
    "en": "Java Indigo"
  },
  "hex": "#1A237E",
  "rgb": {
    "r": 26,
    "g": 35,
    "b": 126
  },
  "cmyk": {
    "c": 79.37,
    "m": 72.22,
    "y": 0,
    "k": 50.59
  },
  "oklch": {
    "l": 32.07,
    "c": 0.1509,
    "h": 270.29
  },
  "displayP3": {
    "r": 0.109026,
    "g": 0.136225,
    "b": 0.474641
  },
  "hsv": {
    "h": 234.6,
    "s": 79.37,
    "v": 49.41
  },
  "munsell": ""
}