ビストル
Bistre
広色域(Display P3)比較
sRGB(従来のWeb標準)
#3D2B1F
Display P3(広色域)
color(display-p3 0.23 0.17 0.13)
意味と歴史
由来
樺の木の煤(すす)を水で溶いて作る暗い黄褐色のインク・顔料ビストルに由来する。中世から近世にかけてヨーロッパのペン画や水彩画で広く使われた画材の色である。
歴史
レオナルド・ダ・ヴィンチやレンブラントが素描に使用した古典的なインクであり、17〜18世紀のセピア画の基本色として欧州の素描芸術を支えた。近代にはセピアに置き換えられた。
心理的効果
古い素描やスケッチを連想させる暗い黄褐色が、芸術の歴史と創造のプロセスを感じさせる。完成作品ではなく構想段階の生々しい創造力を体現する色である。
伝統的な用途
レンブラントやダ・ヴィンチの素描に使用された歴史的インク、古典的なペン画技法、セピアトーンの写真表現、ヴィンテージデザインの参考色として使用される。
CSSコード
HEX
#3D2B1F RGB
rgb(61, 43, 31) CMYK
cmyk(0%, 30%, 49%, 76%) HSV
hsv(24, 49%, 24%) OKLCH
oklch(0.307 0.034 54.8) Display P3
color(display-p3 0.23 0.17 0.13) Munsell
7.5YR 1.9/2 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #3D2B1F;
background-color: oklch(0.307 0.034 54.8);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.23 0.17 0.13);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
13.43:1
黒背景
1.56:1
白文字
13.43:1
黒文字
1.56: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型)
赤色の感度が低下
#302C1E
D型(2型)
緑色の感度が低下
#34301F
T型(3型)
青色の感度が低下
#422828
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント(明るく)
background: linear-gradient(to right, #3D2B1F, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #3D2B1F, #000000); 透明へ
background: linear-gradient(to right, #3D2B1F, transparent); エクスポート
--color-bistre: #3D2B1F;
--color-bistre-rgb: 61, 43, 31;
--color-bistre-oklch: 0.307 0.034 54.8; $color-bistre: #3D2B1F;
$color-bistre-rgb: rgb(61, 43, 31);
$color-bistre-oklch: oklch(0.307 0.034 54.8); 'bistre': '#3D2B1F', Color(red: 0.239, green: 0.169, blue: 0.122) {
"name": {
"ja": "ビストル",
"en": "Bistre"
},
"hex": "#3D2B1F",
"rgb": {
"r": 61,
"g": 43,
"b": 31
},
"cmyk": {
"c": 0,
"m": 30,
"y": 49,
"k": 76
},
"oklch": {
"l": 0.307,
"c": 0.034,
"h": 54.8
},
"displayP3": {
"r": 0.23,
"g": 0.17,
"b": 0.13
},
"hsv": {
"h": 24,
"s": 49,
"v": 24
},
"munsell": "7.5YR 1.9/2"
}