青鈍

あおにび|Aonibi

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

広色域(Display P3)比較

sRGB(従来のWeb標準)

#6B7B6E

Display P3(広色域)

color(display-p3 0.4316 0.4804 0.4351)

意味と歴史

由来

青みの暗い灰色である。『鈍色』の派生色で、別に「あおにぶ」とも読まれる。古くからの色名で、青系の灰色を表現している。

出典(1件)

歴史

平安時代の衣服令では凶時の服色(凶色)として、僧尼の衣に用いる色とされた。古来より定められた公式な色として、身分や宗教的地位を示す重要な色であった。江戸時代まで継続して使用された。

出典(1件)

心理的効果

青みを帯びた暗い灰色は、深い沈静さと厳粛さをもたらす。寂寥感を表現する色として、日本美学の中で重視されてきた。

出典(1件)

伝統的な用途

平安時代の僧侶の衣装に用いられた凶色として、宗教的な厳粛さを表現する。現代でも着物や装飾品において、沈着さと深みを表現する色として活用されている。

出典(1件)

CSSコード

HEX

#6B7B6E

RGB

rgb(107, 123, 110)

CMYK

cmyk(13%, 0%, 10.6%, 51.8%)

HSV

hsv(131.2, 13%, 48.2%)

OKLCH

oklch(56.58% 0.0273 150.93)

Display P3

color(display-p3 0.4316 0.4804 0.4351)

Munsell

CIE XYZ

XYZ(0.1596, 0.18417, 0.17463)

CIE L*a*b*

Lab(49.998316, -8.627312, 5.127214)

CIE LCH(ab)

LCH(49.998316, 10.035877, 149.276972°)

CIE L*u*v*

Luv(49.998316, -8.178673, 8.229291)

Hunter Lab

Hunter Lab(42.915314, -6.525473, 3.725322)

xyY

xyY(0.307873, 0.355269, 0.18417)

JzAzBz

JzAzBz(0.013131, -0.001278, 0.0009)

JzCzHz

JzCzHz(0.013131, 0.001563, 144.845822°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #6B7B6E;
  background-color: oklch(56.58% 0.0273 150.93);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.4316 0.4804 0.4351);
  }
}

コントラストチェッカー

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

白背景

4.48:1

AA FailAAA Fail
AA大文字 Pass

黒背景

4.68:1

AA PassAAA Fail
AA大文字 Pass

白文字

4.48:1

AA FailAAA Fail
AA大文字 Pass

黒文字

4.68:1

AA PassAAA Fail
AA大文字 Pass

配色シミュレーター

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

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

色覚シミュレーション

P型(1型)

赤色の感度が低下

#7B786D

D型(2型)

緑色の感度が低下

#78766F

T型(3型)

青色の感度が低下

#697A77

配色提案

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

補色

Complementary

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

#6B7B6E
#80717E

類似色

Analogous

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

#6B7B6E
#747967
#657C77

トライアド

Triadic

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

#6B7B6E
#707687
#86716C

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

Split-complementary

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

#6B7B6E
#797384
#857075

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

Tetradic (Square)

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

#6B7B6E
#687985
#80717E
#837366

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

Tetradic (Rectangle)

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

#6B7B6E
#647B7F
#80717E
#86716C

モノクロマティック

Monochromatic

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

#6B7B6E
#ADB5AE
#3F5143
#8B988D

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

Double Complementary

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

#6B7B6E
#657C77
#80717E
#857075

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #6B7B6E, #FFFFFF);
#6B7B6E
#89958B
#A6B0A8
#C4CAC5
#E1E5E2
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #6B7B6E, #000000);
#6B7B6E
#566258
#404A42
#2B312C
#151916
#000000

透明へ

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

エクスポート

CSS変数
--color-aonibi: #6B7B6E;
--color-aonibi-rgb: 107, 123, 110;
--color-aonibi-oklch: 56.58% 0.0273 150.93;
Sass変数
$color-aonibi: #6B7B6E;
$color-aonibi-rgb: rgb(107, 123, 110);
$color-aonibi-oklch: oklch(56.58% 0.0273 150.93);
Tailwind Config
'aonibi': '#6B7B6E',
SwiftUI
Color(red: 0.420, green: 0.482, blue: 0.431)
JSON
{
  "name": {
    "ja": "青鈍",
    "en": "Aonibi",
    "reading": "あおにび"
  },
  "hex": "#6B7B6E",
  "rgb": {
    "r": 107,
    "g": 123,
    "b": 110
  },
  "cmyk": {
    "c": 13,
    "m": 0,
    "y": 10.6,
    "k": 51.8
  },
  "oklch": {
    "l": 56.58,
    "c": 0.0273,
    "h": 150.93
  },
  "displayP3": {
    "r": 0.4316,
    "g": 0.4804,
    "b": 0.4351
  },
  "hsv": {
    "h": 131.2,
    "s": 13,
    "v": 48.2
  },
  "munsell": ""
}