古代紫

こだいむらさき | Kodai-murasaki

日本の伝統色 紫系 古代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#8C6589

Display P3(広色域)

color(display-p3 0.5259 0.4023 0.5287)

意味と歴史

由来

わずかに赤みを帯びた、くすんだ紫色である。日本の伝統色の中で最も古い時代から用いられた高貴な紫で、古代の紫根染めの色を指す。

出典(1件)

歴史

古代から平安時代にかけて、皇族や高位の貴族が好んだ色である。律令制度で定められた「襲(かさね)」の配色の中でも重要な色として用いられた。

出典(1件)

心理的効果

格調高く神秘的な印象を与える。落ち着きと威厳を兼ね備えた色合いである。

出典(1件)

伝統的な用途

古代から現代まで、祭祀や正装、工芸品など高級感を必要とする場面で使用されている。

出典(1件)

CSSコード

HEX

#8C6589

RGB

rgb(140, 101, 137)

CMYK

cmyk(0%, 27.9%, 2.1%, 45.1%)

HSV

hsv(304.6, 27.9%, 54.9%)

OKLCH

oklch(55.92% 0.0718 329.06)

Display P3

color(display-p3 0.5259 0.4023 0.5287)

Munsell

CIE XYZ

XYZ(0.19984, 0.1669, 0.25831)

CIE L*a*b*

Lab(47.866548, 22.028267, -13.695318)

CIE LCH(ab)

LCH(47.866548, 25.938509, 328.130138°)

CIE L*u*v*

Luv(47.866548, 19.898942, -22.703682)

Hunter Lab

Hunter Lab(40.852928, 18.285782, -11.570121)

xyY

xyY(0.31972, 0.267016, 0.1669)

JzAzBz

JzAzBz(0.013562, 0.0032, -0.002566)

JzCzHz

JzCzHz(0.013562, 0.004102, 321.27°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #8C6589;
  background-color: oklch(55.92% 0.0718 329.06);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.5259 0.4023 0.5287);
  }
}

コントラストチェッカー

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

サンプル

白背景

4.84:1

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

黒背景

4.34:1

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

白文字

4.84:1

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

黒文字

4.34:1

AA Fail AAA Fail
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型)

赤色の感度が低下

#636E8A

D型(2型)

緑色の感度が低下

#6C7388

T型(3型)

青色の感度が低下

#8F6872

配色提案

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

補色

Complementary

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

#8C6589
#FFFFFF

類似色

Analogous

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

#8C6589
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#8C6589
#FFFFFF
#FFFFFF

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

Split-complementary

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

#8C6589
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#8C6589
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#8C6589
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#8C6589
#FDE6FB
#FFFFFF
#FFE1FF

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

Double Complementary

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

#8C6589
#FFFFFF
#FFFFFF
#FFFFFF

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #8C6589, #FFFFFF);
#8C6589
#A384A1
#BAA3B8
#D1C1D0
#E8E0E7
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #8C6589, #000000);
#8C6589
#70516E
#543D52
#382837
#1C141B
#000000

透明へ

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

エクスポート

CSS変数
--color-kodaimurasaki: #8C6589;
--color-kodaimurasaki-rgb: 140, 101, 137;
--color-kodaimurasaki-oklch: 55.92% 0.0718 329.06;
Sass変数
$color-kodaimurasaki: #8C6589;
$color-kodaimurasaki-rgb: rgb(140, 101, 137);
$color-kodaimurasaki-oklch: oklch(55.92% 0.0718 329.06);
Tailwind Config
'kodaimurasaki': '#8C6589',
SwiftUI
Color(red: 0.549, green: 0.396, blue: 0.537)
JSON
{
  "name": {
    "ja": "古代紫",
    "en": "Kodai-murasaki",
    "reading": "こだいむらさき"
  },
  "hex": "#8C6589",
  "rgb": {
    "r": 140,
    "g": 101,
    "b": 137
  },
  "cmyk": {
    "c": 0,
    "m": 27.9,
    "y": 2.1,
    "k": 45.1
  },
  "oklch": {
    "l": 55.92,
    "c": 0.0718,
    "h": 329.06
  },
  "displayP3": {
    "r": 0.5259,
    "g": 0.4023,
    "b": 0.5287
  },
  "hsv": {
    "h": 304.6,
    "s": 27.9,
    "v": 54.9
  },
  "munsell": ""
}