杏色

あんずいろ | Apricot

日本の伝統色 橙系 奈良時代(710-794)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#F7B977

Display P3(広色域)

color(display-p3 0.93 0.74 0.51)

意味と歴史

由来

杏(あんず)の実が熟した時の淡く柔らかな橙色に由来する色名。バラ科の落葉小高木で、中国原産の果実が奈良時代に渡来した。完熟した杏の果皮に見られる白みを帯びた優しい橙色が、この風雅な色名を生んだ。

歴史

杏は中国原産で奈良時代に日本に伝わり、「杏林」は名医の代名詞として知られる。董奉という医師が治療の礼に杏の木を植えさせた故事に由来し、医学・薬学と深い縁を持つ。信州の杏の里は花の名所として今も人々を魅了している。

心理的効果

優しさと柔らかな温もり、穏やかな喜びを感じさせる色で、春の陽だまりのような安らぎを与える。肌に近い色調は母性的な包容力を連想させ、見る者の心を和ませて緊張を解きほぐす癒しの効果を静かにもたらしてくれる。

伝統的な用途

和菓子の練り切りや干菓子の着色、着物の染め色として春の装いに好まれる。化粧品のファンデーションや頬紅にも取り入れられ、現代のインテリアデザインでは温かみのあるナチュラルな空間づくりに愛用される人気色である。

CSSコード

HEX

#F7B977

RGB

rgb(247, 185, 119)

CMYK

cmyk(0%, 25%, 52%, 3%)

HSV

hsv(31, 52%, 97%)

OKLCH

oklch(0.829 0.11 67.1)

Display P3

color(display-p3 0.93 0.74 0.51)

Munsell

2.5Y 8/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #F7B977;
  background-color: oklch(0.829 0.11 67.1);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.93 0.74 0.51);
  }
}

コントラストチェッカー

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

サンプル

白背景

1.73:1

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

黒背景

12.16:1

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

白文字

1.73:1

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

黒文字

12.16: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型)

赤色の感度が低下

#CEBD72

D型(2型)

緑色の感度が低下

#DCCB78

T型(3型)

青色の感度が低下

#FFABA9

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #F7B977, #FFFFFF);
#F7B977
#F9C792
#FAD5AD
#FCE3C9
#FDF1E4
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #F7B977, #000000);
#F7B977
#C6945F
#946F47
#634A30
#312518
#000000

透明へ

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

エクスポート

CSS変数
--color-anzu: #F7B977;
--color-anzu-rgb: 247, 185, 119;
--color-anzu-oklch: 0.829 0.11 67.1;
Sass変数
$color-anzu: #F7B977;
$color-anzu-rgb: rgb(247, 185, 119);
$color-anzu-oklch: oklch(0.829 0.11 67.1);
Tailwind Config
'anzu': '#F7B977',
SwiftUI
Color(red: 0.969, green: 0.725, blue: 0.467)
JSON
{
  "name": {
    "ja": "杏色",
    "en": "Apricot",
    "reading": "あんずいろ"
  },
  "hex": "#F7B977",
  "rgb": {
    "r": 247,
    "g": 185,
    "b": 119
  },
  "cmyk": {
    "c": 0,
    "m": 25,
    "y": 52,
    "k": 3
  },
  "oklch": {
    "l": 0.829,
    "c": 0.11,
    "h": 67.1
  },
  "displayP3": {
    "r": 0.93,
    "g": 0.74,
    "b": 0.51
  },
  "hsv": {
    "h": 31,
    "s": 52,
    "v": 97
  },
  "munsell": "2.5Y 8/8"
}

関連する色

他の文化圏の類似色