小豆色
あずきいろ | Adzuki Bean
広色域(Display P3)比較
sRGB(従来のWeb標準)
#96514D
Display P3(広色域)
color(display-p3 0.55 0.33 0.31)
意味と歴史
由来
小豆の実の赤褐色に由来する日本の伝統色名。小豆は古来より五穀の一つとして栽培され、その赤い色には邪気を払う力があるとされた。身近な食材から生まれた庶民的な色名である
歴史
古来より身近な食材の色として親しまれ、赤飯や小豆粥として祝い事や季節の行事に用いられてきた。江戸時代には染色の色名としても定着し、庶民の着物に広く使われる人気色となった
心理的効果
素朴さと温かみを感じさせる色であり、家庭的な安心感と滋味深い落ち着きを与える。小豆の赤は魔除けの力を持つとされ、厄除けや無病息災を祈る日本人の信仰心とも深く結びつく
伝統的な用途
和菓子の餡の色として最も馴染み深く、着物や帯の染色にも広く使用される。現代では和モダンなインテリアの配色やパッケージデザイン、秋冬のファッションカラーとしても重宝されている
CSSコード
HEX
#96514D RGB
rgb(150, 81, 77) CMYK
cmyk(0%, 46%, 49%, 41%) HSV
hsv(3, 49%, 59%) OKLCH
oklch(0.516 0.093 24.3) Display P3
color(display-p3 0.55 0.33 0.31) Munsell
5R 4.3/6 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #96514D;
background-color: oklch(0.516 0.093 24.3);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.55 0.33 0.31);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
5.86:1
黒背景
3.58:1
白文字
5.86:1
黒文字
3.58: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型)
赤色の感度が低下
#605C4C
D型(2型)
緑色の感度が低下
#716A4C
T型(3型)
青色の感度が低下
#A24750
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント(明るく)
background: linear-gradient(to right, #96514D, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #96514D, #000000); 透明へ
background: linear-gradient(to right, #96514D, transparent); エクスポート
--color-azukiiro: #96514D;
--color-azukiiro-rgb: 150, 81, 77;
--color-azukiiro-oklch: 0.516 0.093 24.3; $color-azukiiro: #96514D;
$color-azukiiro-rgb: rgb(150, 81, 77);
$color-azukiiro-oklch: oklch(0.516 0.093 24.3); 'azukiiro': '#96514D', Color(red: 0.588, green: 0.318, blue: 0.302) {
"name": {
"ja": "小豆色",
"en": "Adzuki Bean",
"reading": "あずきいろ"
},
"hex": "#96514D",
"rgb": {
"r": 150,
"g": 81,
"b": 77
},
"cmyk": {
"c": 0,
"m": 46,
"y": 49,
"k": 41
},
"oklch": {
"l": 0.516,
"c": 0.093,
"h": 24.3
},
"displayP3": {
"r": 0.55,
"g": 0.33,
"b": 0.31
},
"hsv": {
"h": 3,
"s": 49,
"v": 59
},
"munsell": "5R 4.3/6"
}