深紫

こきむらさき | Kokimurasaki

日本の伝統色 紫系 飛鳥時代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#493759

Display P3(広色域)

color(display-p3 0.2753 0.2185 0.3404)

意味と歴史

由来

黒みがかった深い紫色で、紫草の根を用いて濃く染めた色である。「深」は色の濃さを示し、最も濃い紫を表す色名である。

出典(1件)

歴史

紫色は古代から最も高貴な色とされ、深紫は冠位十二階で最高位の色に位置づけられた。紫草の栽培が困難で染色にも手間がかかることから、極めて高価な色であった。

出典(1件)

心理的効果

深く暗い紫色は、高貴さと神秘性を感じさせる。最も格式の高い色として、崇高さと威厳を象徴する色である。

出典(1件)

伝統的な用途

冠位十二階において最高位の色とされ、天皇や高位の者のみが着用を許された。禁色の一つとして厳格に管理された。

出典(1件)

CSSコード

HEX

#493759

RGB

rgb(73, 55, 89)

CMYK

cmyk(18%, 38.2%, 0%, 65.1%)

HSV

hsv(271.8, 38.2%, 34.9%)

OKLCH

oklch(37.14% 0.061 307.94)

Display P3

color(display-p3 0.2753 0.2185 0.3404)

Munsell

CIE XYZ

XYZ(0.05917, 0.0487, 0.10078)

CIE L*a*b*

Lab(26.361622, 15.566993, -17.430852)

CIE LCH(ab)

LCH(26.361622, 23.370193, 311.767125°)

CIE L*u*v*

Luv(26.361622, 6.471664, -22.945952)

Hunter Lab

Hunter Lab(22.068453, 10.581275, -13.321404)

xyY

xyY(0.283577, 0.233419, 0.0487)

JzAzBz

JzAzBz(0.063616, 0.016, -0.03354)

JzCzHz

JzCzHz(0.063616, 0.037161, 295.5°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #493759;
  background-color: oklch(37.14% 0.061 307.94);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.2753 0.2185 0.3404);
  }
}

コントラストチェッカー

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

サンプル

白背景

10.64:1

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

黒背景

1.97:1

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

白文字

10.64:1

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

黒文字

1.97:1

AA Fail AAA Fail
AA大文字 Fail

配色シミュレーター

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

背景色として使用

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

赤色の感度が低下

#303E5A

D型(2型)

緑色の感度が低下

#343F58

T型(3型)

青色の感度が低下

#473C44

配色提案

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

補色

Complementary

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

#493759
#FFFFFF

類似色

Analogous

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

#493759
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#493759
#FFFFFF
#FFFFFF

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

Split-complementary

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

#493759
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#493759
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#493759
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#493759
#F4E9FF
#FFFFFF
#F7E6FF

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

Double Complementary

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

#493759
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #493759, #FFFFFF);
#493759
#6D5F7A
#92879B
#B6AFBD
#DBD7DE
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #493759, #000000);
#493759
#3A2C47
#2C2135
#1D1624
#0F0B12
#000000

透明へ

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

エクスポート

CSS変数
--color-kokimurasaki: #493759;
--color-kokimurasaki-rgb: 73, 55, 89;
--color-kokimurasaki-oklch: 37.14% 0.061 307.94;
Sass変数
$color-kokimurasaki: #493759;
$color-kokimurasaki-rgb: rgb(73, 55, 89);
$color-kokimurasaki-oklch: oklch(37.14% 0.061 307.94);
Tailwind Config
'kokimurasaki': '#493759',
SwiftUI
Color(red: 0.286, green: 0.216, blue: 0.349)
JSON
{
  "name": {
    "ja": "深紫",
    "en": "Kokimurasaki",
    "reading": "こきむらさき"
  },
  "hex": "#493759",
  "rgb": {
    "r": 73,
    "g": 55,
    "b": 89
  },
  "cmyk": {
    "c": 18,
    "m": 38.2,
    "y": 0,
    "k": 65.1
  },
  "oklch": {
    "l": 37.14,
    "c": 0.061,
    "h": 307.94
  },
  "displayP3": {
    "r": 0.2753,
    "g": 0.2185,
    "b": 0.3404
  },
  "hsv": {
    "h": 271.8,
    "s": 38.2,
    "v": 34.9
  },
  "munsell": ""
}