黒橡
くろつるばみ | Dark Acorn
広色域（Display P3）比較
sRGB（従来のWeb標準）
#302833
Display P3（広色域）
color(display-p3 0.18 0.16 0.2)
意味と歴史
由来
橡（つるばみ・クヌギ）の実で染めた色をさらに鉄媒染で暗くした、黒に近い褐色に由来する。「黒橡」は橡染めの最も暗い段階を指し、律令制度では身分の低い者の衣服の色として定められた、庶民に最も身近な暗色であった。
歴史
律令制度の位階色として最下位に位置づけられた色だが、実際にはクヌギの実と鉄媒染で手軽に得られる堅牢な暗色として庶民に広く普及した。身分制度では低い位置づけでも、実用面では最も信頼される染め色のひとつであった。
心理的効果
質実、堅牢、飾らない力強さを感じさせる。黒に近い暗い褐色は華やかさとは無縁だが、厳しい労働にも耐える堅牢さと、見栄を張らない実直な生き方を象徴する。庶民の暮らしを支えた労働の色としての誇りを秘めた色である。
伝統的な用途
律令時代の庶民の日常着として最も広く使われた染め色で、堅牢度が高く実用的であった。現代では草木染めの暗色系の基本として工芸家に用いられ、ダークブラウンとして木工品やレザー製品の色にも通じる、実用的な暗色である。
CSSコード
HEX
#302833 RGB
rgb(48, 40, 51) CMYK
cmyk(6%, 22%, 0%, 80%) HSV
hsv(284, 22%, 20%) OKLCH
oklch(0.29 0.023 316.7) Display P3
color(display-p3 0.18 0.16 0.2) Munsell
2.5P 1.7/2 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #302833;
background-color: oklch(0.29 0.023 316.7);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.18 0.16 0.2);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
14.22:1
黒背景
1.48:1
白文字
14.22:1
黒文字
1.48: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型）
赤色の感度が低下
#272A33
D型（2型）
緑色の感度が低下
#282B33
T型（3型）
青色の感度が低下
#30292C
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント（明るく）
background: linear-gradient(to right, #302833, #FFFFFF); シェード（暗く）
background: linear-gradient(to right, #302833, #000000); 透明へ
background: linear-gradient(to right, #302833, transparent); エクスポート
--color-kurotsurubami: #302833;
--color-kurotsurubami-rgb: 48, 40, 51;
--color-kurotsurubami-oklch: 0.29 0.023 316.7;$color-kurotsurubami: #302833;
$color-kurotsurubami-rgb: rgb(48, 40, 51);
$color-kurotsurubami-oklch: oklch(0.29 0.023 316.7);'kurotsurubami': '#302833',Color(red: 0.188, green: 0.157, blue: 0.200){
"name": {
"ja": "黒橡",
"en": "Dark Acorn",
"reading": "くろつるばみ"
},
"hex": "#302833",
"rgb": {
"r": 48,
"g": 40,
"b": 51
},
"cmyk": {
"c": 6,
"m": 22,
"y": 0,
"k": 80
},
"oklch": {
"l": 0.29,
"c": 0.023,
"h": 316.7
},
"displayP3": {
"r": 0.18,
"g": 0.16,
"b": 0.2
},
"hsv": {
"h": 284,
"s": 22,
"v": 20
},
"munsell": "2.5P 1.7/2"
}