桃色

ももいろ | Peach Pink

日本の伝統色 赤系 奈良時代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#F58F98

Display P3(広色域)

color(display-p3 0.9063 0.5802 0.6024)

意味と歴史

由来

桃の花の色に似た明るく淡い紅色に由来する色名。別名「桃花色(ももはないろ)」とも呼ばれる。基本的に紅花で淡く染められた色であり、桃の花で染めたものではない。桃の花を使っても色が綺麗に出ることはなく、桃色の鮮やかさは紅花による染色技法の賜物である。

出典(1件)

歴史

桃を冠する色の起源は古く、日本書紀の天智天皇六年(667年)の条に「桃染布(つきそめのぬの)」の記述がある。万葉集にも「桃花褐(つきそめ)の浅らの衣」の記述が見られる。「桃色」として文献に登場するのは室町末期で、能の謡曲「草子洗小町」に「もも色の衣や、かさぬらん」という記述がある。江戸時代の「装束色彙」(1778年)では、桃染は今日の桃色のことであると記されている。

出典(2件)

心理的効果

柔らかい優しい印象を持ち、幸せな気持ちや優しい気持ちになる心理効果がある。心や体に満ち足りた気分をもたらし、安らぎに満ちた感覚を与える。緊張をやわらげ、攻撃的な感情を鎮めて心の動きを安定させる効果も報告されている。

出典(1件)

伝統的な用途

古来より衣服の色として親しまれ、井原西鶴の「好色五人女」(1686年)にも「帷子は広袖に桃色のうら付を取出せ」と記されている。桃は古くから邪気を払う力があるとされ、三月三日の「桃の節句」では女の子の健やかな成長を祈る風習が現代にも続いている。

出典(2件)

CSSコード

HEX

#F58F98

RGB

rgb(245, 143, 152)

CMYK

cmyk(0%, 41.6%, 38%, 3.9%)

HSV

hsv(354.7, 41.6%, 96.1%)

OKLCH

oklch(76.01% 0.1237 14.78)

Display P3

color(display-p3 0.9063 0.5802 0.6024)

Munsell

0.2R 7/10

CIE XYZ

XYZ(0.5315, 0.4133, 0.3488)

CIE L*a*b*

Lab(70.41, 39.49, 12.13)

CIE LCH(ab)

LCH(70.41, 41.31, 17.08°)

CIE L*u*v*

Luv(70.41, 69.12, 9.09)

Hunter Lab

Hunter Lab(64.29, 39.71, 10.12)

xyY

xyY(0.4109, 0.3195, 0.4133)

JzAzBz

JzAzBz(0.308017, 0.059265, 0.028055)

JzCzHz

JzCzHz(0.308017, 0.06557, 25.3°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #F58F98;
  background-color: oklch(76.01% 0.1237 14.78);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.9063 0.5802 0.6024);
  }
}

コントラストチェッカー

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

サンプル

白背景

2.27:1

AA Fail AAA Fail
AA大文字 Fail
サンプル

黒背景

9.26:1

AA Pass AAA Pass
AA大文字 Pass
サンプル

白文字

2.27:1

AA Fail AAA Fail
AA大文字 Fail
サンプル

黒文字

9.26:1

AA Pass AAA Pass
AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — 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.

UIコンポーネントでの使用例
バッジ

色覚シミュレーション

P型(1型)

赤色の感度が低下

#A3A098

D型(2型)

緑色の感度が低下

#BCB496

T型(3型)

青色の感度が低下

#FF8493

配色提案

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

補色

Complementary

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

#F58F98
#FFFFFF

類似色

Analogous

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

#F58F98
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#F58F98
#FFFFFF
#FFFFFF

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

Split-complementary

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

#F58F98
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#F58F98
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#F58F98
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#F58F98
#FFDEE1
#FFFFFF
#FFD4D9

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

Double Complementary

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

#F58F98
#FFFFFF
#FFFFFF
#FFFFFF

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #F58F98, #FFFFFF);
#F58F98
#F7A5AD
#F9BCC1
#FBD2D6
#FDE9EA
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #F58F98, #000000);
#F58F98
#C4727A
#93565B
#62393D
#311D1E
#000000

透明へ

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

エクスポート

CSS変数
--color-momoiro: #F58F98;
--color-momoiro-rgb: 245, 143, 152;
--color-momoiro-oklch: 76.01% 0.1237 14.78;
Sass変数
$color-momoiro: #F58F98;
$color-momoiro-rgb: rgb(245, 143, 152);
$color-momoiro-oklch: oklch(76.01% 0.1237 14.78);
Tailwind Config
'momoiro': '#F58F98',
SwiftUI
Color(red: 0.961, green: 0.561, blue: 0.596)
JSON
{
  "name": {
    "ja": "桃色",
    "en": "Peach Pink",
    "reading": "ももいろ"
  },
  "hex": "#F58F98",
  "rgb": {
    "r": 245,
    "g": 143,
    "b": 152
  },
  "cmyk": {
    "c": 0,
    "m": 41.6,
    "y": 38,
    "k": 3.9
  },
  "oklch": {
    "l": 76.01,
    "c": 0.1237,
    "h": 14.78
  },
  "displayP3": {
    "r": 0.9063,
    "g": 0.5802,
    "b": 0.6024
  },
  "hsv": {
    "h": 354.7,
    "s": 41.6,
    "v": 96.1
  },
  "munsell": "0.2R 7/10"
}