菫色

すみれいろ | Violet

日本の伝統色 紫系 日本の伝統色

広色域(Display P3)比較

sRGB(従来のWeb標準)

#7058A3

Display P3(広色域)

color(display-p3 0.42 0.35 0.62)

意味と歴史

由来

春の野に咲く菫(すみれ)の花の紫色に由来する。日本各地の野山に自生する小さな花で、墨壺に似た花弁の形から「すみれ」と名づけられた。万葉集の時代から日本人に親しまれてきた春の花の色である。

歴史

万葉集に山部赤人が「春の野にすみれ摘みにと来し我ぞ 野をなつかしみ一夜寝にける」と詠んだ花。控えめに咲く姿は日本人が美徳とする奥ゆかしさの象徴で、茶花や文学の題材として広く愛されてきた。

心理的効果

可憐さ、控えめな美しさ、秘めた強さを感じさせる。小さいながらも鮮やかな紫を湛える菫の花のように、目立たなくとも確かな存在感を持つ内面の豊かさを象徴し、慎み深い美の理想を体現する色である。

伝統的な用途

春の装いや和菓子の色として用いられ、茶道では茶花としても重宝された。スミレの押し花は手紙の封じ花として送られる風習もあり、現代ではアクセサリーや文具のモチーフとしても広く親しまれている色である。

CSSコード

HEX

#7058A3

RGB

rgb(112, 88, 163)

CMYK

cmyk(31%, 46%, 0%, 36%)

HSV

hsv(259, 46%, 64%)

OKLCH

oklch(0.518 0.117 296.9)

Display P3

color(display-p3 0.42 0.35 0.62)

Munsell

2.5P 4.3/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #7058A3;
  background-color: oklch(0.518 0.117 296.9);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.42 0.35 0.62);
  }
}

コントラストチェッカー

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

サンプル

白背景

5.81:1

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

黒背景

3.61:1

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

白文字

5.81:1

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

黒文字

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

赤色の感度が低下

#4166A6

D型(2型)

緑色の感度が低下

#4564A1

T型(3型)

青色の感度が低下

#656676

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #7058A3, #FFFFFF);
#7058A3
#8D79B5
#A99BC8
#C6BCDA
#E2DEED
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #7058A3, #000000);
#7058A3
#5A4682
#433562
#2D2341
#161221
#000000

透明へ

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

エクスポート

CSS変数
--color-sumireiro2: #7058A3;
--color-sumireiro2-rgb: 112, 88, 163;
--color-sumireiro2-oklch: 0.518 0.117 296.9;
Sass変数
$color-sumireiro2: #7058A3;
$color-sumireiro2-rgb: rgb(112, 88, 163);
$color-sumireiro2-oklch: oklch(0.518 0.117 296.9);
Tailwind Config
'sumireiro2': '#7058A3',
SwiftUI
Color(red: 0.439, green: 0.345, blue: 0.639)
JSON
{
  "name": {
    "ja": "菫色",
    "en": "Violet",
    "reading": "すみれいろ"
  },
  "hex": "#7058A3",
  "rgb": {
    "r": 112,
    "g": 88,
    "b": 163
  },
  "cmyk": {
    "c": 31,
    "m": 46,
    "y": 0,
    "k": 36
  },
  "oklch": {
    "l": 0.518,
    "c": 0.117,
    "h": 296.9
  },
  "displayP3": {
    "r": 0.42,
    "g": 0.35,
    "b": 0.62
  },
  "hsv": {
    "h": 259,
    "s": 46,
    "v": 64
  },
  "munsell": "2.5P 4.3/8"
}

関連する色

他の文化圏の類似色