青白橡

あおしろつるばみ|Aoshirotsurubami

色コードの出典:青白橡 - 和色大辞典

広色域(Display P3)比較

sRGB(従来のWeb標準)

#9BA88D

Display P3(広色域)

color(display-p3 0.6173 0.6572 0.5624)

意味と歴史

由来

灰みのあるくすんだ黄緑色である。宮中の年中行事の作法書『西宮記』に「麹塵」と同じ色とされており、禁色の「青」をあらわす色である。

出典(1件)

歴史

平安時代の『西宮記』に「麹塵与青白橡一物」と記されており、同じ色とされている。平安文学『栄花物語』には「青き白橡」と記されている。宮中の礼装において一般には「青色」と呼ばれていた。

出典(1件)

心理的効果

くすんだ黄緑色は、落ち着きと自然の温かみを表現する。灰みを含むため、洗練された深みのある印象を与える。

出典(1件)

伝統的な用途

平安貴族の正装や宮中の儀式の衣装に使用された禁色である。現代では着物の裂地や工芸品に伝統色として継承されている。

出典(1件)

CSSコード

HEX

#9BA88D

RGB

rgb(155, 168, 141)

CMYK

cmyk(7.7%, 0%, 16.1%, 34.1%)

HSV

hsv(88.9, 16.1%, 65.9%)

OKLCH

oklch(71.38% 0.0409 128.47)

Display P3

color(display-p3 0.6173 0.6572 0.5624)

Munsell

CIE XYZ

XYZ(0.32327, 0.36897, 0.30613)

CIE L*a*b*

Lab(67.199507, -9.601698, 12.425346)

CIE LCH(ab)

LCH(67.199507, 15.702924, 127.695089°)

CIE L*u*v*

Luv(67.199507, -6.125043, 18.974879)

Hunter Lab

Hunter Lab(60.742708, -8.183446, 9.71493)

xyY

xyY(0.3238, 0.369571, 0.36897)

JzAzBz

JzAzBz(0.020854, -0.001447, 0.002777)

JzCzHz

JzCzHz(0.020854, 0.003131, 117.522483°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #9BA88D;
  background-color: oklch(71.38% 0.0409 128.47);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.6173 0.6572 0.5624);
  }
}

コントラストチェッカー

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

白背景

2.51:1

AA FailAAA Fail
AA大文字 Fail

黒背景

8.38:1

AA PassAAA Pass
AA大文字 Pass

白文字

2.51:1

AA FailAAA Fail
AA大文字 Fail

黒文字

8.38:1

AA PassAAA Pass
AA大文字 Pass

配色シミュレーター

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

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

色覚シミュレーション

P型(1型)

赤色の感度が低下

#ABA48B

D型(2型)

緑色の感度が低下

#A9A38E

T型(3型)

青色の感度が低下

#9CA5A0

配色提案

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

補色

Complementary

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

#9BA88D
#AA9CB7

類似色

Analogous

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

#9BA88D
#A9A386
#8EAB99

トライアド

Triadic

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

#9BA88D
#8FA5BC
#BA999D

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

Split-complementary

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

#9BA88D
#9CA1BD
#B599AB

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

Tetradic (Square)

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

#9BA88D
#87A9B4
#AA9CB7
#BA9A90

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

Tetradic (Rectangle)

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

#9BA88D
#86ABA7
#AA9CB7
#BA999D

モノクロマティック

Monochromatic

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

#9BA88D
#DEE5D7
#6D7B5D
#BCC7B0

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

Double Complementary

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

#9BA88D
#8EAB99
#AA9CB7
#B599AB

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #9BA88D, #FFFFFF);
#9BA88D
#AFB9A4
#C3CBBB
#D7DCD1
#EBEEE8
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #9BA88D, #000000);
#9BA88D
#7C8671
#5D6555
#3E4338
#1F221C
#000000

透明へ

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

エクスポート

CSS変数
--color-aoshirotsurubami: #9BA88D;
--color-aoshirotsurubami-rgb: 155, 168, 141;
--color-aoshirotsurubami-oklch: 71.38% 0.0409 128.47;
Sass変数
$color-aoshirotsurubami: #9BA88D;
$color-aoshirotsurubami-rgb: rgb(155, 168, 141);
$color-aoshirotsurubami-oklch: oklch(71.38% 0.0409 128.47);
Tailwind Config
'aoshirotsurubami': '#9BA88D',
SwiftUI
Color(red: 0.608, green: 0.659, blue: 0.553)
JSON
{
  "name": {
    "ja": "青白橡",
    "en": "Aoshirotsurubami",
    "reading": "あおしろつるばみ"
  },
  "hex": "#9BA88D",
  "rgb": {
    "r": 155,
    "g": 168,
    "b": 141
  },
  "cmyk": {
    "c": 7.7,
    "m": 0,
    "y": 16.1,
    "k": 34.1
  },
  "oklch": {
    "l": 71.38,
    "c": 0.0409,
    "h": 128.47
  },
  "displayP3": {
    "r": 0.6173,
    "g": 0.6572,
    "b": 0.5624
  },
  "hsv": {
    "h": 88.9,
    "s": 16.1,
    "v": 65.9
  },
  "munsell": ""
}