蘇芳

すおう | Sappanwood Red

日本の伝統色 赤系 日本の伝統色

広色域(Display P3)比較

sRGB(従来のWeb標準)

#9E3D3F

Display P3(広色域)

color(display-p3 0.57 0.26 0.26)

意味と歴史

由来

蘇芳(すおう)の樹木の芯材から得られる赤色染料に由来する色名。マメ科の熱帯樹木であり、芯材を煮出して明礬や鉄で媒染することで赤紫から暗赤色まで多様な色合いが生まれる貴重な植物染料である。

歴史

正倉院の染織品にも見られる古代からの色で、仏教の伝来とともにインドから渡来した。僧侶の袈裟や法衣の染めに重用され、平安時代の延喜式では位階に応じた衣装色として規定された。紫に代わる代用色としても広く用いられた。

心理的効果

荘厳さと落ち着き、精神的な深みを感じさせる色で、仏教的な悟りの境地や内省の時間を連想させる。赤みを帯びた暗い色調は秋の深まりや人生の円熟を象徴し、見る者に静かな安らぎと精神的な充足感を与える。

伝統的な用途

僧侶の袈裟や法衣、経典の表紙装飾、十二単の重ね色目に用いられた。茶道では蘇芳染めの帛紗が珍重され、現代でも草木染めの工房で伝統的な技法が受け継がれ、和装小物や帯揚げの染色に活用されている。

CSSコード

HEX

#9E3D3F

RGB

rgb(158, 61, 63)

CMYK

cmyk(0%, 61%, 60%, 38%)

HSV

hsv(359, 61%, 62%)

OKLCH

oklch(0.494 0.13 21.9)

Display P3

color(display-p3 0.57 0.26 0.26)

Munsell

5R 4/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #9E3D3F;
  background-color: oklch(0.494 0.13 21.9);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.57 0.26 0.26);
  }
}

コントラストチェッカー

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

サンプル

白背景

6.58:1

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

黒背景

3.19:1

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

白文字

6.58:1

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

黒文字

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

赤色の感度が低下

#55503E

D型(2型)

緑色の感度が低下

#6E653D

T型(3型)

青色の感度が低下

#AD2B3F

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #9E3D3F, #FFFFFF);
#9E3D3F
#B16465
#C58B8C
#D8B1B2
#ECD8D9
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #9E3D3F, #000000);
#9E3D3F
#7E3132
#5F2526
#3F1819
#200C0D
#000000

透明へ

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

エクスポート

CSS変数
--color-suou: #9E3D3F;
--color-suou-rgb: 158, 61, 63;
--color-suou-oklch: 0.494 0.13 21.9;
Sass変数
$color-suou: #9E3D3F;
$color-suou-rgb: rgb(158, 61, 63);
$color-suou-oklch: oklch(0.494 0.13 21.9);
Tailwind Config
'suou': '#9E3D3F',
SwiftUI
Color(red: 0.620, green: 0.239, blue: 0.247)
JSON
{
  "name": {
    "ja": "蘇芳",
    "en": "Sappanwood Red",
    "reading": "すおう"
  },
  "hex": "#9E3D3F",
  "rgb": {
    "r": 158,
    "g": 61,
    "b": 63
  },
  "cmyk": {
    "c": 0,
    "m": 61,
    "y": 60,
    "k": 38
  },
  "oklch": {
    "l": 0.494,
    "c": 0.13,
    "h": 21.9
  },
  "displayP3": {
    "r": 0.57,
    "g": 0.26,
    "b": 0.26
  },
  "hsv": {
    "h": 359,
    "s": 61,
    "v": 62
  },
  "munsell": "5R 4/8"
}

関連する色

他の文化圏の類似色