萌木色
もえきいろ | Sprouting Green
広色域(Display P3)比較
sRGB(従来のWeb標準)
#AAB300
Display P3(広色域)
color(display-p3 0.67 0.7 0.22)
意味と歴史
由来
萌え出る若芽の色に由来する色名。早春に木々が芽吹く際の淡い黄緑色を指し、「萌え」は草木が芽を出す意で、生命の始まりを色で表現した日本人の自然観が反映された繊細な色名である
歴史
平安時代から春の到来を象徴する色として愛用され、襲の色目では萌木色は春の装いに欠かせない配色であった。枕草子にも春の草木の萌え出る様子が生き生きと描かれ、季節感溢れる色である
心理的効果
生命力と新たな始まりを象徴する色であり、冬を越えて芽吹く自然の力強さと、新生活への期待を感じさせる。淡い黄緑色は心を軽やかにし、希望と成長への前向きな気持ちを呼び起こす色である
伝統的な用途
春の装束や書画の色に使用されたほか、若芽の意匠は着物の文様としても好まれた。現代では新年度や新生活のプロモーションカラーとして広く活用され、エコロジー関連の製品にも取り入れられる
CSSコード
HEX
#AAB300 RGB
rgb(170, 179, 0) CMYK
cmyk(5%, 0%, 100%, 30%) HSV
hsv(63, 100%, 70%) OKLCH
oklch(0.735 0.164 113.4) Display P3
color(display-p3 0.67 0.7 0.22) Munsell
2.5GY 7/14 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #AAB300;
background-color: oklch(0.735 0.164 113.4);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.67 0.7 0.22);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
2.29:1
黒背景
9.16:1
白文字
2.29:1
黒文字
9.16: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型)
赤色の感度が低下
#C1AA00
D型(2型)
緑色の感度が低下
#C1AD20
T型(3型)
青色の感度が低下
#B6A798
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント(明るく)
background: linear-gradient(to right, #AAB300, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #AAB300, #000000); 透明へ
background: linear-gradient(to right, #AAB300, transparent); エクスポート
--color-moekiiro: #AAB300;
--color-moekiiro-rgb: 170, 179, 0;
--color-moekiiro-oklch: 0.735 0.164 113.4; $color-moekiiro: #AAB300;
$color-moekiiro-rgb: rgb(170, 179, 0);
$color-moekiiro-oklch: oklch(0.735 0.164 113.4); 'moekiiro': '#AAB300', Color(red: 0.667, green: 0.702, blue: 0.000) {
"name": {
"ja": "萌木色",
"en": "Sprouting Green",
"reading": "もえきいろ"
},
"hex": "#AAB300",
"rgb": {
"r": 170,
"g": 179,
"b": 0
},
"cmyk": {
"c": 5,
"m": 0,
"y": 100,
"k": 30
},
"oklch": {
"l": 0.735,
"c": 0.164,
"h": 113.4
},
"displayP3": {
"r": 0.67,
"g": 0.7,
"b": 0.22
},
"hsv": {
"h": 63,
"s": 100,
"v": 70
},
"munsell": "2.5GY 7/14"
}