コバルトブルー
こばるとぶるー | Cobalt Blue
広色域(Display P3)比較
sRGB(従来のWeb標準)
#0047AB
Display P3(広色域)
color(display-p3 0.1073 0.2738 0.6463)
意味と歴史
由来
コバルトブルーは酸化コバルト(II)と酸化アルミニウム(アルミナ)を1200℃で焼結して製造される青色顔料である。化学式はCoAl₂O₄(コバルト(II)アルミネート)で表される。プルシアンブルーより明るく穏やかな青色を示す。
出典(1件)
歴史
コバルト鉱石は古来より陶磁器やガラスに青色を与える顔料として使用されてきた。1735年頃、スウェーデンの化学者ゲオルク・ブラントがこの青色の原因がコバルトという新しい金属元素であることを示した。英語で「コバルトブルー」という色名が初めて記録されたのは1777年である。1802年にフランスの化学者ルイ・ジャック・テナールがアルミナベースの顔料として独自に発見し、1807年にフランスで商業生産が開始された。
出典(1件)
伝統的な用途
コバルトブルーは中国の青花磁器(染付)において8世紀末から9世紀初頭以来、主要な青色顔料として使用されてきた。イスラム陶器、特に15世紀以降のイズニク陶器にも広く使用された。テナールによる発見以降、J・M・W・ターナー、ピエール=オーギュスト・ルノワール、クロード・モネ、フィンセント・ファン・ゴッホなどの画家が使用した。マックスフィールド・パリッシュは頻繁に使用したため、コバルトブルーは「パリッシュブルー」とも呼ばれることがある。
出典(1件)
CSSコード
HEX
#0047AB RGB
rgb(0, 71, 171) CMYK
cmyk(100%, 58.5%, 0%, 32.9%) HSV
hsv(215.1, 100%, 67.1%) OKLCH
oklch(42.84% 0.172 259.7) Display P3
color(display-p3 0.1073 0.2738 0.6463) Munsell
5PB 3.3/13 CIE XYZ
XYZ(0.09601, 0.07445, 0.39451) CIE L*a*b*
Lab(32.8, 22.52, -58.44) CIE LCH(ab)
LCH(32.8, 62.63, 291.07°) CIE L*u*v*
Luv(32.8, -16.02, -80.47) Hunter Lab
Hunter Lab(27.29, 16.78, -70.73) xyY
xyY(0.16994, 0.13178, 0.07445) JzAzBz
JzAzBz(0.0036, -0.001578, -0.01234) JzCzHz
JzCzHz(0.0036, 0.01244, 262.71°) フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #0047AB;
background-color: oklch(42.84% 0.172 259.7);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.1073 0.2738 0.6463);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
8.44:1
黒背景
2.49:1
白文字
8.44:1
黒文字
2.49:1
配色シミュレーター
この色を背景やテキストに使用した場合のプレビューです。
白テキスト — 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.
色覚シミュレーション
P型(1型)
赤色の感度が低下
#0055AE
D型(2型)
緑色の感度が低下
#0046A9
T型(3型)
青色の感度が低下
#006172
配色提案
この配色はルネサンス以降の西洋色彩理論と、イッテン・マンセルの色彩調和論に基づく古典的な配色原理を適用しています。
補色
Complementary色相環の反対側に位置する色。最も強いコントラストを生む
類似色
Analogous色相が近い色の組み合わせ。自然で調和的な印象を与える
トライアド
Triadic色相環を三等分する配色。活力がありバランスの良い組み合わせ
スプリットコンプリメンタリー
Split-complementary補色の両隣を使う配色。補色より柔らかいコントラスト
テトラディック(正方形)
Tetradic (Square)色相環を四等分する配色。豊かな色彩で華やかな印象
テトラディック(長方形)
Tetradic (Rectangle)二対の補色を組み合わせた配色。多彩ながらまとまりのある配色
モノクロマティック
Monochromatic同じ色相で明度・彩度を変えた配色。統一感のある上品な印象
ダブルコンプリメンタリー
Double Complementary隣り合う二色とその補色による四色配色。複雑で魅力的な配色
グラデーション
ティント(明るく)
background: linear-gradient(to right, #0047AB, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #0047AB, #000000); 透明へ
background: linear-gradient(to right, #0047AB, transparent); エクスポート
--color-cobalt_blue: #0047AB;
--color-cobalt_blue-rgb: 0, 71, 171;
--color-cobalt_blue-oklch: 42.84% 0.172 259.7; $color-cobalt_blue: #0047AB;
$color-cobalt_blue-rgb: rgb(0, 71, 171);
$color-cobalt_blue-oklch: oklch(42.84% 0.172 259.7); 'cobalt_blue': '#0047AB', Color(red: 0.000, green: 0.278, blue: 0.671) {
"name": {
"ja": "コバルトブルー",
"en": "Cobalt Blue",
"reading": "こばるとぶるー"
},
"hex": "#0047AB",
"rgb": {
"r": 0,
"g": 71,
"b": 171
},
"cmyk": {
"c": 100,
"m": 58.5,
"y": 0,
"k": 32.9
},
"oklch": {
"l": 42.84,
"c": 0.172,
"h": 259.7
},
"displayP3": {
"r": 0.1073,
"g": 0.2738,
"b": 0.6463
},
"hsv": {
"h": 215.1,
"s": 100,
"v": 67.1
},
"munsell": "5PB 3.3/13"
}