羊羹色
ようかんいろ | Yokan Brown
広色域（Display P3）比較
sRGB（従来のWeb標準）
#383C3C
Display P3（広色域）
color(display-p3 0.22 0.23 0.24)
意味と歴史
由来
和菓子の羊羹（ようかん）の、艶やかで透明感のある暗い小豆色に由来する。煉り羊羹特有の美しい光沢と深い褐色は、和菓子の中でも最も格式の高い棹物菓子の色として、日本の食文化と美意識を凝縮した色名である。
歴史
羊羹は室町時代に中国から伝わった点心が和菓子に発展したもので、江戸時代には虎屋をはじめとする老舗の煉り羊羹が将軍家への献上品として珍重された。その艶やかな色は和菓子の最高峰としての格式を今に伝えている。
心理的効果
上質な甘み、格式、和の伝統美を感じさせる。羊羹の滑らかな切り口の深い褐色は、職人の丹精込めた技と長い歴史の重みを象徴し、日本の食文化の奥深さと、甘味を味わう静かな至福の時間を連想させる色である。
伝統的な用途
和菓子の色を表す代表的な色名で、茶席の棹物菓子や手土産の定番として広く親しまれた。現代では和菓子のパッケージデザインや、和のテイストを活かしたスイーツのビジュアルに、伝統的な上品さを演出する色として使われている。
CSSコード
HEX
#383C3C RGB
rgb(56, 60, 60) CMYK
cmyk(7%, 0%, 0%, 76%) HSV
hsv(180, 7%, 24%) OKLCH
oklch(0.352 0.005 197.2) Display P3
color(display-p3 0.22 0.23 0.24) Munsell
N 2.5 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #383C3C;
background-color: oklch(0.352 0.005 197.2);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.22 0.23 0.24);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
11.17:1
黒背景
1.88:1
白文字
11.17:1
黒文字
1.88: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型）
赤色の感度が低下
#3B3C3C
D型（2型）
緑色の感度が低下
#3B3B3C
T型（3型）
青色の感度が低下
#373C3C
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント（明るく）
background: linear-gradient(to right, #383C3C, #FFFFFF); シェード（暗く）
background: linear-gradient(to right, #383C3C, #000000); 透明へ
background: linear-gradient(to right, #383C3C, transparent); エクスポート
--color-youkan: #383C3C;
--color-youkan-rgb: 56, 60, 60;
--color-youkan-oklch: 0.352 0.005 197.2;$color-youkan: #383C3C;
$color-youkan-rgb: rgb(56, 60, 60);
$color-youkan-oklch: oklch(0.352 0.005 197.2);'youkan': '#383C3C',Color(red: 0.220, green: 0.235, blue: 0.235){
"name": {
"ja": "羊羹色",
"en": "Yokan Brown",
"reading": "ようかんいろ"
},
"hex": "#383C3C",
"rgb": {
"r": 56,
"g": 60,
"b": 60
},
"cmyk": {
"c": 7,
"m": 0,
"y": 0,
"k": 76
},
"oklch": {
"l": 0.352,
"c": 0.005,
"h": 197.2
},
"displayP3": {
"r": 0.22,
"g": 0.23,
"b": 0.24
},
"hsv": {
"h": 180,
"s": 7,
"v": 24
},
"munsell": "N 2.5"
}