舛花色

ますはないろ | Masuhana Blue

日本の伝統色 青系 江戸時代(1603-1868)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#5B82A3

Display P3(広色域)

color(display-p3 0.39 0.51 0.63)

意味と歴史

由来

江戸時代の歌舞伎役者・松本幸四郎(舛屋)が好んだ渋い青色に由来する。歌舞伎役者の屋号や個人名にちなんだ色名が多数生まれた江戸の町人文化を象徴する色で、「舛花」は松本幸四郎の屋号「舛屋」に由来する。

歴史

江戸時代には人気歌舞伎役者が流行の発信源となり、彼らが好んだ色に役者の名前や屋号を冠する文化が栄えた。舛花色もその一つで、路考茶や梅幸茶などと同系統の「役者色」として、江戸庶民のファッションに影響を与えた。

心理的効果

粋、洗練、歌舞伎の華やかさを感じさせる。渋みのある青は、派手さを抑えつつも確かな存在感を放つ歌舞伎役者の美学を反映し、表面の控えめさの内に秘めた豊かな表現力と洗練された審美眼を象徴する色である。

伝統的な用途

歌舞伎の衣装や江戸庶民の粋な着物に取り入れられ、役者への憧れを込めた装いとして流行した。現代でも歌舞伎の伝統を継ぐ松本幸四郎家にゆかりのある色として、歌舞伎関連のデザインやグッズに使われている。

CSSコード

HEX

#5B82A3

RGB

rgb(91, 130, 163)

CMYK

cmyk(44%, 20%, 0%, 36%)

HSV

hsv(208, 44%, 64%)

OKLCH

oklch(0.591 0.067 244.8)

Display P3

color(display-p3 0.39 0.51 0.63)

Munsell

7.5B 5.3/4

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #5B82A3;
  background-color: oklch(0.591 0.067 244.8);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.39 0.51 0.63);
  }
}

コントラストチェッカー

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

サンプル

白背景

4.06:1

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

黒背景

5.17:1

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

白文字

4.06:1

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

黒文字

5.17:1

AA Pass 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型)

赤色の感度が低下

#7482A5

D型(2型)

緑色の感度が低下

#6B7BA2

T型(3型)

青色の感度が低下

#3E8A8D

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #5B82A3, #FFFFFF);
#5B82A3
#7C9BB5
#9DB4C8
#BDCDDA
#DEE6ED
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #5B82A3, #000000);
#5B82A3
#496882
#374E62
#243441
#121A21
#000000

透明へ

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

エクスポート

CSS変数
--color-masuhana: #5B82A3;
--color-masuhana-rgb: 91, 130, 163;
--color-masuhana-oklch: 0.591 0.067 244.8;
Sass変数
$color-masuhana: #5B82A3;
$color-masuhana-rgb: rgb(91, 130, 163);
$color-masuhana-oklch: oklch(0.591 0.067 244.8);
Tailwind Config
'masuhana': '#5B82A3',
SwiftUI
Color(red: 0.357, green: 0.510, blue: 0.639)
JSON
{
  "name": {
    "ja": "舛花色",
    "en": "Masuhana Blue",
    "reading": "ますはないろ"
  },
  "hex": "#5B82A3",
  "rgb": {
    "r": 91,
    "g": 130,
    "b": 163
  },
  "cmyk": {
    "c": 44,
    "m": 20,
    "y": 0,
    "k": 36
  },
  "oklch": {
    "l": 0.591,
    "c": 0.067,
    "h": 244.8
  },
  "displayP3": {
    "r": 0.39,
    "g": 0.51,
    "b": 0.63
  },
  "hsv": {
    "h": 208,
    "s": 44,
    "v": 64
  },
  "munsell": "7.5B 5.3/4"
}

関連する色

他の文化圏の類似色