フタロシアニンブルー

ふたろしあにんぶるー | Phthalo Blue

近代・産業色 青系 1930年代〜

広色域(Display P3)比較

sRGB(従来のWeb標準)

#000F89

Display P3(広色域)

color(display-p3 0.011 0.0572 0.5149)

意味と歴史

由来

フタロシアニンブルーは、銅フタロシアニンを主成分とする合成有機顔料である。この深い青色の化合物は、フタル酸無水物、尿素、銅、アンモニアの反応によって生成される。モナストラルブルーやウィンザーブルーなどの商品名でも知られている。

出典(1件)

歴史

1907年に青色副産物が報告されたが、その意義は理解されなかった。1927年にスイスの研究者de DiesbachとVon der Weidが銅フタロシアニンを初めて合成し、1928年にScottish Dyes社の工場でも偶然発見された。1935年に「モナストラルブルー」の商品名でICI社(英国)から初めて市販された。信頼性の低いプルシアンブルーの代替品として開発され、1938年にはウィンザー&ニュートン社からも発売された。その発見は、1826年の合成ウルトラマリン以来の重要な進歩と見なされた。

出典(2件)

伝統的な用途

強い着色力、優れた耐光性、透明性を持ち、画家の絵具、染料、工業用、印刷用インクとして広く使用される。無毒で扱いやすく、他の色との混色にも適している。薄めてグレーズ技法に用いることもできる。安定性が高く、硫酸以外のほとんどの溶剤に不溶である。

出典(1件)

CSSコード

HEX

#000F89

RGB

rgb(0, 15, 137)

CMYK

cmyk(100%, 89.1%, 0%, 46.3%)

HSV

hsv(233.4, 100%, 53.7%)

OKLCH

oklch(29.71% 0.189 264.21)

Display P3

color(display-p3 0.011 0.0572 0.5149)

Munsell

CIE XYZ

XYZ(0.04685, 0.02147, 0.2383)

CIE L*a*b*

Lab(16.24, 44.35, -64.94)

CIE LCH(ab)

LCH(16.24, 78.64, 304.33°)

CIE L*u*v*

Luv(16.24, -5.27, -61.24)

Hunter Lab

Hunter Lab(14.65, 32.71, -90.52)

xyY

xyY(0.15279, 0.07003, 0.02147)

JzAzBz

JzAzBz(0.051828, -0.022828, -0.125026)

JzCzHz

JzCzHz(0.051828, 0.127093, 259.65°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #000F89;
  background-color: oklch(29.71% 0.189 264.21);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.011 0.0572 0.5149);
  }
}

コントラストチェッカー

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

サンプル

白背景

14.69:1

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

黒背景

1.43:1

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

白文字

14.69:1

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

黒文字

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

赤色の感度が低下

#002F8C

D型(2型)

緑色の感度が低下

#002187

T型(3型)

青色の感度が低下

#003950

配色提案

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

補色

Complementary

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

#000F89
#FFFFFF

類似色

Analogous

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

#000F89
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#000F89
#FFFFFF
#FFFFFF

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

Split-complementary

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

#000F89
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#000F89
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#000F89
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#000F89
#CFEFFF
#FFFFFF
#BBEDFF

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

Double Complementary

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

#000F89
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #000F89, #FFFFFF);
#000F89
#333FA1
#666FB8
#999FD0
#CCCFE7
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #000F89, #000000);
#000F89
#000C6E
#000952
#000637
#00031B
#000000

透明へ

background: linear-gradient(to right, #000F89, transparent);

エクスポート

CSS変数
--color-phthalo_blue: #000F89;
--color-phthalo_blue-rgb: 0, 15, 137;
--color-phthalo_blue-oklch: 29.71% 0.189 264.21;
Sass変数
$color-phthalo_blue: #000F89;
$color-phthalo_blue-rgb: rgb(0, 15, 137);
$color-phthalo_blue-oklch: oklch(29.71% 0.189 264.21);
Tailwind Config
'phthalo_blue': '#000F89',
SwiftUI
Color(red: 0.000, green: 0.059, blue: 0.537)
JSON
{
  "name": {
    "ja": "フタロシアニンブルー",
    "en": "Phthalo Blue",
    "reading": "ふたろしあにんぶるー"
  },
  "hex": "#000F89",
  "rgb": {
    "r": 0,
    "g": 15,
    "b": 137
  },
  "cmyk": {
    "c": 100,
    "m": 89.1,
    "y": 0,
    "k": 46.3
  },
  "oklch": {
    "l": 29.71,
    "c": 0.189,
    "h": 264.21
  },
  "displayP3": {
    "r": 0.011,
    "g": 0.0572,
    "b": 0.5149
  },
  "hsv": {
    "h": 233.4,
    "s": 100,
    "v": 53.7
  },
  "munsell": ""
}