向日葵色
ひまわりいろ | Sunflower
広色域（Display P3）比較
sRGB（従来のWeb標準）
#FFC20E
Display P3（広色域）
color(display-p3 0.96 0.77 0.27)
意味と歴史
由来
向日葵の花の鮮やかな黄色に由来する色名。太陽に向かって咲く向日葵の大輪の花弁の、力強く輝くような黄色を指す。江戸時代に観賞植物として伝来した向日葵から名付けられた色である
歴史
向日葵は江戸時代に中国を経て日本に伝来し、観賞用として広まった。明治以降はゴッホの向日葵の絵画の影響もあり、芸術の色としても認識されるようになり、夏を象徴する色として定着した
心理的効果
活力と明るさを象徴する色であり、太陽の光を一身に受けて咲く向日葵のような力強い生命力と楽観的な精神を感じさせる。鮮やかな黄色は心を弾ませ、夏の喜びと開放感を呼び起こす
伝統的な用途
絵画や夏の装飾、和菓子の色付けに使用される。現代では夏季のイベントポスターやファッションアイテム、ひまわり畑の観光プロモーションなど、夏の明るさを表現する場面で広く活用される
CSSコード
HEX
#FFC20E RGB
rgb(255, 194, 14) CMYK
cmyk(0%, 24%, 95%, 0%) HSV
hsv(45, 95%, 100%) OKLCH
oklch(0.846 0.172 85.3) Display P3
color(display-p3 0.96 0.77 0.27) Munsell
5Y 8.2/14 フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #FFC20E;
background-color: oklch(0.846 0.172 85.3);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.96 0.77 0.27);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
1.62:1
黒背景
12.98:1
白文字
1.62:1
黒文字
12.98: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型）
赤色の感度が低下
#DCC200
D型（2型）
緑色の感度が低下
#EBD222
T型（3型）
青色の感度が低下
#FFAEA6
配色提案
補色
色相環の反対側
類似色
色相が近い色
トライアド
三角形の配色
スプリットコンプリメンタリー
補色の両隣
グラデーション
ティント（明るく）
background: linear-gradient(to right, #FFC20E, #FFFFFF); シェード（暗く）
background: linear-gradient(to right, #FFC20E, #000000); 透明へ
background: linear-gradient(to right, #FFC20E, transparent); エクスポート
--color-himawariiro: #FFC20E;
--color-himawariiro-rgb: 255, 194, 14;
--color-himawariiro-oklch: 0.846 0.172 85.3;$color-himawariiro: #FFC20E;
$color-himawariiro-rgb: rgb(255, 194, 14);
$color-himawariiro-oklch: oklch(0.846 0.172 85.3);'himawariiro': '#FFC20E',Color(red: 1.000, green: 0.761, blue: 0.055){
"name": {
"ja": "向日葵色",
"en": "Sunflower",
"reading": "ひまわりいろ"
},
"hex": "#FFC20E",
"rgb": {
"r": 255,
"g": 194,
"b": 14
},
"cmyk": {
"c": 0,
"m": 24,
"y": 95,
"k": 0
},
"oklch": {
"l": 0.846,
"c": 0.172,
"h": 85.3
},
"displayP3": {
"r": 0.96,
"g": 0.77,
"b": 0.27
},
"hsv": {
"h": 45,
"s": 95,
"v": 100
},
"munsell": "5Y 8.2/14"
}