蒲公英色

たんぽぽいろ|Tanpopo-iro

色コードの出典:蒲公英色 - 和色大辞典

広色域(Display P3)比較

sRGB(従来のWeb標準)

#FFD900

Display P3(広色域)

color(display-p3 0.9758 0.8565 0.2877)

意味と歴史

由来

春の野に咲くタンポポの花の色に由来する、鮮やかで明るい黄色。タンポポはキク科タンポポ属の植物で、日本の春を代表する草花の一つ。

出典(1件)

歴史

古い文献『本草和名』(平安初期)にも古名「ふじな」または「たな」として記載される。日本に広く自生し、古来より親しまれた植物で、その自然な黄色が色名として定着した。

出典(1件)

心理的効果

春の暖かさと新生を象徴する温かく親しみやすい色。見る者に希望と喜びの感情を与え、自然への親和感と優しさを感じさせる。

出典(1件)

伝統的な用途

春の季節感を表現する着物や帯、室内装飾に用いられ、日本の四季を表現する色として文学や美術にも登場する。現代ではポスターや広告でも人気がある。

出典(1件)

CSSコード

HEX

#FFD900

RGB

rgb(255, 217, 0)

CMYK

cmyk(0%, 14.9%, 100%, 0%)

HSV

hsv(51.1, 100%, 100%)

OKLCH

oklch(89.07% 0.1832 96.19)

Display P3

color(display-p3 0.9758 0.8565 0.2877)

Munsell

CIE XYZ

XYZ(0.66057, 0.7089, 0.10204)

CIE L*a*b*

Lab(87.431383, -2.934334, 87.485795)

CIE LCH(ab)

LCH(87.431383, 87.534991, 91.92102°)

CIE L*u*v*

Luv(87.431383, 34.029739, 92.819369)

Hunter Lab

Hunter Lab(84.19601, -2.845651, 49.100108)

xyY

xyY(0.448907, 0.48175, 0.7089)

JzAzBz

JzAzBz(0.031509, 0.000424, 0.018501)

JzCzHz

JzCzHz(0.031509, 0.018506, 88.687143°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #FFD900;
  background-color: oklch(89.07% 0.1832 96.19);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.9758 0.8565 0.2877);
  }
}

コントラストチェッカー

WCAG 2.1 基準に基づくコントラスト比を表示します。

白背景

1.38:1

AA FailAAA Fail
AA大文字 Fail

黒背景

15.18:1

AA PassAAA Pass
AA大文字 Pass

白文字

1.38:1

AA FailAAA Fail
AA大文字 Fail

黒文字

15.18:1

AA PassAAA Pass
AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。

背景色として使用
テキスト色として使用
UIコンポーネントでの使用例

色覚シミュレーション

P型(1型)

赤色の感度が低下

#F1D400

D型(2型)

緑色の感度が低下

#FBE024

T型(3型)

青色の感度が低下

#FFC6B9

配色提案

この色の配色提案は、日本の伝統的な「かさねの色目」や「しきたり」の美意識に基づき、同じ文化圏の伝統色から最も近い調和色を選出しています。

補色

Complementary

色相環の反対側に位置する色。最も強いコントラストを生む

#FFD900
#BCCEFF

類似色

Analogous

色相が近い色の組み合わせ。自然で調和的な印象を与える

#FFD900
#FFBF37
#BCF05C

トライアド

Triadic

色相環を三等分する配色。活力がありバランスの良い組み合わせ

#FFD900
#00F7FF
#FFA9FF

スプリットコンプリメンタリー

Split-complementary

補色の両隣を使う配色。補色より柔らかいコントラスト

#FFD900
#63E4FF
#F9B8FF

テトラディック(正方形)

Tetradic (Square)

色相環を四等分する配色。豊かな色彩で華やかな印象

#FFD900
#00FFED
#BCCEFF
#FFA2C8

テトラディック(長方形)

Tetradic (Rectangle)

二対の補色を組み合わせた配色。多彩ながらまとまりのある配色

#FFD900
#59FEA7
#BCCEFF
#FFA9FF

モノクロマティック

Monochromatic

同じ色相で明度・彩度を変えた配色。統一感のある上品な印象

#FFD900
#FFEFA8
#D5A600
#FFEE71

ダブルコンプリメンタリー

Double Complementary

隣り合う二色とその補色による四色配色。複雑で魅力的な配色

#FFD900
#BCF05C
#BCCEFF
#F9B8FF

伝統的な配色の提案

同じ文化圏の伝統色から、色彩理論的に調和する色を選出しました。

グラデーション

ティント(明るく)

background: linear-gradient(to right, #FFD900, #FFFFFF);
#FFD900
#FFE133
#FFE866
#FFF099
#FFF7CC
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #FFD900, #000000);
#FFD900
#CCAE00
#998200
#665700
#332B00
#000000

透明へ

background: linear-gradient(to right, #FFD900, transparent);

エクスポート

CSS変数
--color-tanpopoiro: #FFD900;
--color-tanpopoiro-rgb: 255, 217, 0;
--color-tanpopoiro-oklch: 89.07% 0.1832 96.19;
Sass変数
$color-tanpopoiro: #FFD900;
$color-tanpopoiro-rgb: rgb(255, 217, 0);
$color-tanpopoiro-oklch: oklch(89.07% 0.1832 96.19);
Tailwind Config
'tanpopoiro': '#FFD900',
SwiftUI
Color(red: 1.000, green: 0.851, blue: 0.000)
JSON
{
  "name": {
    "ja": "蒲公英色",
    "en": "Tanpopo-iro",
    "reading": "たんぽぽいろ"
  },
  "hex": "#FFD900",
  "rgb": {
    "r": 255,
    "g": 217,
    "b": 0
  },
  "cmyk": {
    "c": 0,
    "m": 14.9,
    "y": 100,
    "k": 0
  },
  "oklch": {
    "l": 89.07,
    "c": 0.1832,
    "h": 96.19
  },
  "displayP3": {
    "r": 0.9758,
    "g": 0.8565,
    "b": 0.2877
  },
  "hsv": {
    "h": 51.1,
    "s": 100,
    "v": 100
  },
  "munsell": ""
}