玉子色

たまごいろ|Tamago-iro

色コードの出典:卵色 - 和色大辞典

広色域(Display P3)比較

sRGB(従来のWeb標準)

#FCD575

Display P3(広色域)

color(display-p3 0.9635 0.841 0.5135)

意味と歴史

由来

卵の黄身を模した、明るく温かみのある黄色。平安時代から存在する『鳥の子色』(卵殻色)とは異なり、より黄みが強い色。

出典(1件)

歴史

江戸時代前期から見られる染め色で、寛政年間の流行歌『はたおり唄』や井原西鶴の『好色一代女』などに記述が見られ、当時の流行色だったことが明らかになっている。

出典(1件)

心理的効果

温かさと親しみやすさを感じさせる色。卵という生命の象徴から、希望と新しい命の誕生を連想させ、見る者に安心感と幸福感をもたらす。

出典(1件)

伝統的な用途

江戸時代から明治時代にかけて、女性の帯や着物、特に若い女性の装いに好まれた。現代でも卵料理やパッケージデザイン、子ども関連の製品で活用されている。

出典(1件)

CSSコード

HEX

#FCD575

RGB

rgb(252, 213, 117)

CMYK

cmyk(0%, 15.5%, 53.6%, 1.2%)

HSV

hsv(42.7, 53.6%, 98.8%)

OKLCH

oklch(88.7% 0.123 87.71)

Display P3

color(display-p3 0.9635 0.841 0.5135)

Munsell

CIE XYZ

XYZ(0.67153, 0.69572, 0.26718)

CIE L*a*b*

Lab(86.786405, 2.281703, 52.006727)

CIE LCH(ab)

LCH(86.786405, 52.056755, 87.48786°)

CIE L*u*v*

Luv(86.786405, 31.270518, 64.812808)

Hunter Lab

Hunter Lab(83.409695, 2.231872, 36.281963)

xyY

xyY(0.410865, 0.425666, 0.69572)

JzAzBz

JzAzBz(0.031515, 0.001698, 0.01275)

JzCzHz

JzCzHz(0.031515, 0.012863, 82.414187°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #FCD575;
  background-color: oklch(88.7% 0.123 87.71);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.9635 0.841 0.5135);
  }
}

コントラストチェッカー

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

白背景

1.41:1

AA FailAAA Fail
AA大文字 Fail

黒背景

14.91:1

AA PassAAA Pass
AA大文字 Pass

白文字

1.41:1

AA FailAAA Fail
AA大文字 Fail

黒文字

14.91:1

AA PassAAA Pass
AA大文字 Pass

配色シミュレーター

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

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

色覚シミュレーション

P型(1型)

赤色の感度が低下

#E9D36C

D型(2型)

緑色の感度が低下

#F2DE78

T型(3型)

青色の感度が低下

#FFC7BF

配色提案

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

補色

Complementary

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

#FCD575
#B6D7FF

類似色

Analogous

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

#FCD575
#FFC586
#D3E584

トライアド

Triadic

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

#FCD575
#64F0FF
#FFBDFF

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

Split-complementary

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

#FCD575
#86E6FF
#E3C8FF

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

Tetradic (Square)

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

#FCD575
#71F4D9
#B6D7FF
#FFB7DA

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

Tetradic (Rectangle)

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

#FCD575
#A1F0AB
#B6D7FF
#FFBDFF

モノクロマティック

Monochromatic

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

#FCD575
#FFEDC0
#D1A311
#FFEBA1

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

Double Complementary

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

#FCD575
#D3E584
#B6D7FF
#E3C8FF

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #FCD575, #FFFFFF);
#FCD575
#FDDD91
#FDE6AC
#FEEEC8
#FEF7E3
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #FCD575, #000000);
#FCD575
#CAAA5E
#978046
#65552F
#322B17
#000000

透明へ

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

エクスポート

CSS変数
--color-tamagoiro: #FCD575;
--color-tamagoiro-rgb: 252, 213, 117;
--color-tamagoiro-oklch: 88.7% 0.123 87.71;
Sass変数
$color-tamagoiro: #FCD575;
$color-tamagoiro-rgb: rgb(252, 213, 117);
$color-tamagoiro-oklch: oklch(88.7% 0.123 87.71);
Tailwind Config
'tamagoiro': '#FCD575',
SwiftUI
Color(red: 0.988, green: 0.835, blue: 0.459)
JSON
{
  "name": {
    "ja": "玉子色",
    "en": "Tamago-iro",
    "reading": "たまごいろ"
  },
  "hex": "#FCD575",
  "rgb": {
    "r": 252,
    "g": 213,
    "b": 117
  },
  "cmyk": {
    "c": 0,
    "m": 15.5,
    "y": 53.6,
    "k": 1.2
  },
  "oklch": {
    "l": 88.7,
    "c": 0.123,
    "h": 87.71
  },
  "displayP3": {
    "r": 0.9635,
    "g": 0.841,
    "b": 0.5135
  },
  "hsv": {
    "h": 42.7,
    "s": 53.6,
    "v": 98.8
  },
  "munsell": ""
}