インディゴ(アフリカ)

いんでぃご | Indigo Dye (Africa)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#1B3F6B

Display P3(広色域)

color(display-p3 0.1421 0.2438 0.4067)

意味と歴史

由来

インディゴ染料は藍植物(Indigofera tinctoria)から抽出される深い青色の天然染料である。

出典(1件)

歴史

西アフリカにおけるインディゴ栽培は古代にまで遡る。現在のマリ、ギニア、コートジボワール、セネガル、ナイジェリアにあたる地域で広く栽培され、奴隷化された西アフリカ人がアメリカ大陸にインディゴ栽培の高度な知識を持ち込んだことで、植民地時代の主要輸出品となった。

出典(1件)

伝統的な用途

西アフリカではインディゴは精神的な信念において重要な役割を果たしてきた。

出典(1件)

CSSコード

HEX

#1B3F6B

RGB

rgb(27, 63, 107)

CMYK

cmyk(75%, 41%, 0%, 58%)

HSV

hsv(213, 74.8%, 42%)

OKLCH

oklch(36.54% 0.0868 254.93)

Display P3

color(display-p3 0.1421 0.2438 0.4067)

Munsell

7.5PB 2.6/5.8

CIE XYZ

XYZ(0.04882, 0.04849, 0.14586)

CIE L*a*b*

Lab(26.3, 3.54, -29.4)

CIE LCH(ab)

LCH(26.3, 29.61, 276.86°)

CIE L*u*v*

Luv(26.3, -12.63, -37.19)

Hunter Lab

Hunter Lab(22.02, 0.23, -2.6)

xyY

xyY(0.200779, 0.199408, 0.04849)

JzAzBz

JzAzBz(0.125153, -0.02836, -0.032146)

JzCzHz

JzCzHz(0.125153, 0.042868, 228.580524°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #1B3F6B;
  background-color: oklch(36.54% 0.0868 254.93);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.1421 0.2438 0.4067);
  }
}

コントラストチェッカー

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

サンプル

白背景

10.66:1

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

黒背景

1.97:1

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

白文字

10.66:1

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

黒文字

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

赤色の感度が低下

#2B426D

D型(2型)

緑色の感度が低下

#1E3B6A

T型(3型)

青色の感度が低下

#00494F

配色提案

この配色はケンテ布の象徴的色彩組み合わせと、アフリカ各地の伝統的な色彩の意味体系に基づいています。

補色

Complementary

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

#1B3F6B
#FFFFFF

類似色

Analogous

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

#1B3F6B
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#1B3F6B
#FFFFFF
#FFFFFF

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

Split-complementary

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

#1B3F6B
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#1B3F6B
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#1B3F6B
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#1B3F6B
#DCF1FF
#FFFFFF
#D0F2FF

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

Double Complementary

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

#1B3F6B
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #1B3F6B, #FFFFFF);
#1B3F6B
#496589
#768CA6
#A4B2C4
#D1D9E1
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #1B3F6B, #000000);
#1B3F6B
#163256
#102640
#0B192B
#050D15
#000000

透明へ

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

エクスポート

CSS変数
--color-indigo_dye_africa: #1B3F6B;
--color-indigo_dye_africa-rgb: 27, 63, 107;
--color-indigo_dye_africa-oklch: 36.54% 0.0868 254.93;
Sass変数
$color-indigo_dye_africa: #1B3F6B;
$color-indigo_dye_africa-rgb: rgb(27, 63, 107);
$color-indigo_dye_africa-oklch: oklch(36.54% 0.0868 254.93);
Tailwind Config
'indigo_dye_africa': '#1B3F6B',
SwiftUI
Color(red: 0.106, green: 0.247, blue: 0.420)
JSON
{
  "name": {
    "ja": "インディゴ(アフリカ)",
    "en": "Indigo Dye (Africa)",
    "reading": "いんでぃご"
  },
  "hex": "#1B3F6B",
  "rgb": {
    "r": 27,
    "g": 63,
    "b": 107
  },
  "cmyk": {
    "c": 75,
    "m": 41,
    "y": 0,
    "k": 58
  },
  "oklch": {
    "l": 36.54,
    "c": 0.0868,
    "h": 254.93
  },
  "displayP3": {
    "r": 0.1421,
    "g": 0.2438,
    "b": 0.4067
  },
  "hsv": {
    "h": 213,
    "s": 74.8,
    "v": 42
  },
  "munsell": "7.5PB 2.6/5.8"
}

他の文化圏の類似色