ウルトラマリン
Ultramarine
広色域(Display P3)比較
sRGB(従来のWeb標準)
#120A8F
Display P3(広色域)
color(display-p3 0.07 0.04 0.54)
意味と歴史
由来
ラピスラズリから精製される最高級の青色顔料に由来する。ラテン語のultra marinus(海の向こうの)が語源であり、アフガニスタン産の鉱石が海路で運ばれたことに由来する。
歴史
中世ヨーロッパでは金より高価な顔料であり、聖母マリアのマントを描く際にのみ使用が許された。1826年にフランスのギメが合成ウルトラマリンを開発し顔料が民主化された。
心理的効果
人類が作り出した最も崇高な青であり、宗教的な神聖さと芸術的な至高を象徴する。聖母マリアの青として天上界への憧れを体現する、精神性の極致の色である。
伝統的な用途
中世〜ルネサンスの聖母マリア像のマントの色、フェルメール「真珠の耳飾りの少女」のターバン、イヴ・クラインのインターナショナル・クライン・ブルーとして使用される。
CSSコード
HEX
#120A8F RGB
rgb(18, 10, 143) CMYK
cmyk(87%, 93%, 0%, 44%) HSV
hsv(244, 93%, 56%) OKLCH
oklch(0.307 0.194 268.5) Display P3
color(display-p3 0.07 0.04 0.54) Munsell
2.5P 1.7/14 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #120A8F;
background-color: oklch(0.307 0.194 268.5);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.07 0.04 0.54);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
14.33:1
黒背景
1.47:1
白文字
14.33:1
黒文字
1.47: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型)
赤色の感度が低下
#003192
D型(2型)
緑色の感度が低下
#00238D
T型(3型)
青色の感度が低下
#003A53
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント(明るく)
background: linear-gradient(to right, #120A8F, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #120A8F, #000000); 透明へ
background: linear-gradient(to right, #120A8F, transparent); エクスポート
--color-ultramarine: #120A8F;
--color-ultramarine-rgb: 18, 10, 143;
--color-ultramarine-oklch: 0.307 0.194 268.5; $color-ultramarine: #120A8F;
$color-ultramarine-rgb: rgb(18, 10, 143);
$color-ultramarine-oklch: oklch(0.307 0.194 268.5); 'ultramarine': '#120A8F', Color(red: 0.071, green: 0.039, blue: 0.561) {
"name": {
"ja": "ウルトラマリン",
"en": "Ultramarine"
},
"hex": "#120A8F",
"rgb": {
"r": 18,
"g": 10,
"b": 143
},
"cmyk": {
"c": 87,
"m": 93,
"y": 0,
"k": 44
},
"oklch": {
"l": 0.307,
"c": 0.194,
"h": 268.5
},
"displayP3": {
"r": 0.07,
"g": 0.04,
"b": 0.54
},
"hsv": {
"h": 244,
"s": 93,
"v": 56
},
"munsell": "2.5P 1.7/14"
}