インターナショナル・クライン・ブルー

いんたーなしょなるくらいんぶるー | International Klein Blue

近代・産業色 青系 1960年

広色域(Display P3)比較

sRGB(従来のWeb標準)

#002FA7

Display P3(広色域)

color(display-p3 0.0615 0.181 0.6293)

意味と歴史

由来

インターナショナル・クライン・ブルー(IKB)はフランスの芸術家イヴ・クラインが1950年代後半に開発した深い群青色である。パリの画材店主エドゥアール・アダムとの共同開発で、ウルトラマリン顔料をRhodopas M(ポリ酢酸ビニル系合成樹脂)で結合することにより、乾燥後も顔料の鮮やかさが失われない特性を実現した。

出典(1件)

歴史

1957年1月、イヴ・クラインはミラノのアポリネール画廊で「Proposte monocrome, epoca blu」展を開催し、同一サイズのウルトラマリン・ブルーのカンヴァス11枚を壁から約20cm離して展示した。1960年5月19日にIKBの処方がソロー封筒(no. 63471)としてフランスの国立産業所有権研究所(INPI)に登録された。クラインは1962年に心臓発作で34歳にして早逝したが、IKBは20世紀美術を代表する色として定着した。

出典(2件)

心理的効果

クラインにとって青は独自の感性を持ち、物質から非物質への通路であった。クラインは「青には次元がない。次元の彼方にある」と宣言し、IKBの深く鮮烈な群青色を無限性と非物質性の象徴とした。

出典(1件)

伝統的な用途

IKBはクラインのモノクローム絵画シリーズや、裸体モデルを「生きた絵筆」としてカンヴァスに身体の痕跡を残す人体測定(アントロポメトリー)作品に使用された。IKBは現在もデザインやファッションの分野で参照される象徴的な色である。

出典(2件)

CSSコード

HEX

#002FA7

RGB

rgb(0, 47, 167)

CMYK

cmyk(100%, 71.9%, 0%, 34.5%)

HSV

hsv(223.1, 100%, 65.5%)

OKLCH

oklch(37.85% 0.1954 263.23)

Display P3

color(display-p3 0.0615 0.181 0.6293)

Munsell

4PB 2.6/15

CIE XYZ

XYZ(0.07989, 0.04822, 0.37061)

CIE L*a*b*

Lab(26.22, 37.03, -66.85)

CIE LCH(ab)

LCH(26.22, 76.42, 298.99°)

CIE L*u*v*

Luv(26.22, -10.56, -82.4)

Hunter Lab

Hunter Lab(21.96, 28.13, -89.19)

xyY

xyY(0.16019, 0.09669, 0.04822)

JzAzBz

JzAzBz(0.002919, -0.000853, -0.013167)

JzCzHz

JzCzHz(0.002919, 0.013195, 266.29°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #002FA7;
  background-color: oklch(37.85% 0.1954 263.23);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.0615 0.181 0.6293);
  }
}

コントラストチェッカー

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

サンプル

白背景

10.69:1

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

黒背景

1.96:1

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

白文字

10.69:1

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

黒文字

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

赤色の感度が低下

#0046AB

D型(2型)

緑色の感度が低下

#0036A5

T型(3型)

青色の感度が低下

#005268

配色提案

この配色は現代のデザインシステムにおける色彩理論と、ユニバーサルデザインのアクセシビリティ原則に基づいています。

補色

Complementary

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

#002FA7
#FFFFFF

類似色

Analogous

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

#002FA7
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#002FA7
#FFFFFF
#FFFFFF

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

Split-complementary

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

#002FA7
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#002FA7
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#002FA7
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#002FA7
#CCEFFF
#FFFFFF
#B7EDFF

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

Double Complementary

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

#002FA7
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #002FA7, #FFFFFF);
#002FA7
#3359B9
#6682CA
#99ACDC
#CCD5ED
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #002FA7, #000000);
#002FA7
#002686
#001C64
#001343
#000921
#000000

透明へ

background: linear-gradient(to right, #002FA7, transparent);

エクスポート

CSS変数
--color-international_klein_blue: #002FA7;
--color-international_klein_blue-rgb: 0, 47, 167;
--color-international_klein_blue-oklch: 37.85% 0.1954 263.23;
Sass変数
$color-international_klein_blue: #002FA7;
$color-international_klein_blue-rgb: rgb(0, 47, 167);
$color-international_klein_blue-oklch: oklch(37.85% 0.1954 263.23);
Tailwind Config
'international_klein_blue': '#002FA7',
SwiftUI
Color(red: 0.000, green: 0.184, blue: 0.655)
JSON
{
  "name": {
    "ja": "インターナショナル・クライン・ブルー",
    "en": "International Klein Blue",
    "reading": "いんたーなしょなるくらいんぶるー"
  },
  "hex": "#002FA7",
  "rgb": {
    "r": 0,
    "g": 47,
    "b": 167
  },
  "cmyk": {
    "c": 100,
    "m": 71.9,
    "y": 0,
    "k": 34.5
  },
  "oklch": {
    "l": 37.85,
    "c": 0.1954,
    "h": 263.23
  },
  "displayP3": {
    "r": 0.0615,
    "g": 0.181,
    "b": 0.6293
  },
  "hsv": {
    "h": 223.1,
    "s": 100,
    "v": 65.5
  },
  "munsell": "4PB 2.6/15"
}