ペインズグレー
Payne's Grey
広色域（Display P3）比較
sRGB（従来のWeb標準）
#536878
Display P3（広色域）
color(display-p3 0.34 0.41 0.46)
意味と歴史
由来
18世紀の英国の水彩画家ウィリアム・ペインが混色で作り出した暗い青灰色に由来する。ウルトラマリン、オーカー、ブラックの混色による独特の暗色である。
歴史
1770年代にウィリアム・ペインが風景画の陰影表現のために開発した混色であり、純粋な黒より色彩的な深みを持つ暗色として水彩画家に広く採用された。
心理的効果
純粋な黒の冷たさを避けた温かみのある暗色が、芸術的な繊細さと自然な陰影の美しさを体現する。画家の洞察力が生んだ、最も知的な暗色の一つである。
伝統的な用途
水彩画・油彩画の基本色として黒の代わりに使用される画家の必需品、建築のレンダリング、イラストレーションの陰影表現に使用される。
CSSコード
HEX
#536878 RGB
rgb(83, 104, 120) CMYK
cmyk(31%, 13%, 0%, 53%) HSV
hsv(206, 31%, 47%) OKLCH
oklch(0.506 0.036 241.2) Display P3
color(display-p3 0.34 0.41 0.46) Munsell
7.5B 4.3/2 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #536878;
background-color: oklch(0.506 0.036 241.2);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.34 0.41 0.46);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
5.80:1
黒背景
3.62:1
白文字
5.80:1
黒文字
3.62: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型）
赤色の感度が低下
#616879
D型（2型）
緑色の感度が低下
#5C6478
T型（3型）
青色の感度が低下
#486C6D
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント（明るく）
background: linear-gradient(to right, #536878, #FFFFFF); シェード（暗く）
background: linear-gradient(to right, #536878, #000000); 透明へ
background: linear-gradient(to right, #536878, transparent); エクスポート
--color-payne_grey: #536878;
--color-payne_grey-rgb: 83, 104, 120;
--color-payne_grey-oklch: 0.506 0.036 241.2;$color-payne_grey: #536878;
$color-payne_grey-rgb: rgb(83, 104, 120);
$color-payne_grey-oklch: oklch(0.506 0.036 241.2);'payne_grey': '#536878',Color(red: 0.325, green: 0.408, blue: 0.471){
"name": {
"ja": "ペインズグレー",
"en": "Payne's Grey"
},
"hex": "#536878",
"rgb": {
"r": 83,
"g": 104,
"b": 120
},
"cmyk": {
"c": 31,
"m": 13,
"y": 0,
"k": 53
},
"oklch": {
"l": 0.506,
"c": 0.036,
"h": 241.2
},
"displayP3": {
"r": 0.34,
"g": 0.41,
"b": 0.46
},
"hsv": {
"h": 206,
"s": 31,
"v": 47
},
"munsell": "7.5B 4.3/2"
}