花浅葱

はなあさぎ | Flower Asagi

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

広色域(Display P3)比較

sRGB(従来のWeb標準)

#2A83A2

Display P3(広色域)

color(display-p3 0.27 0.51 0.62)

意味と歴史

由来

花のように鮮やかで華やかな浅葱色を意味する。通常の浅葱色よりも彩度が高く、「花」の接頭語が示すように、より明るく生き生きとした青緑色である。藍染めの中でも特に鮮やかな色調を楽しむ江戸の美意識が生んだ色。

歴史

江戸時代に浅葱色のバリエーションとして生まれた色名。新選組の羽織の色「浅葱色」にも近く、幕末の動乱期にこの系統の鮮やかな青は若い志士たちの情熱と理想を象徴する色として時代を彩った。

心理的効果

鮮やかさ、爽快さ、若々しい活力を感じさせる。花のように明るい青緑は、春の清流や若竹のようなみずみずしさを連想させ、心を活性化させる前向きなエネルギーと明るい希望を感じさせる色である。

伝統的な用途

江戸時代の着物や帯の染色に用いられ、浅葱色の派生色として粋な装いに取り入れられた。現代では和装のアクセントカラーとして人気があり、夏の浴衣や手拭いの柄色としても鮮やかな彩りを添えている。

CSSコード

HEX

#2A83A2

RGB

rgb(42, 131, 162)

CMYK

cmyk(74%, 19%, 0%, 36%)

HSV

hsv(196, 74%, 64%)

OKLCH

oklch(0.572 0.094 225.7)

Display P3

color(display-p3 0.27 0.51 0.62)

Munsell

2.5B 5.1/6

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #2A83A2;
  background-color: oklch(0.572 0.094 225.7);
}

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

コントラストチェッカー

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

サンプル

白背景

4.32:1

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

黒背景

4.87:1

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

白文字

4.32:1

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

黒文字

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

赤色の感度が低下

#7280A4

D型(2型)

緑色の感度が低下

#6274A2

T型(3型)

青色の感度が低下

#008C8D

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #2A83A2, #FFFFFF);
#2A83A2
#559CB5
#7FB5C7
#AACDDA
#D4E6EC
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #2A83A2, #000000);
#2A83A2
#226982
#194F61
#113441
#081A20
#000000

透明へ

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

エクスポート

CSS変数
--color-hanaasagi2: #2A83A2;
--color-hanaasagi2-rgb: 42, 131, 162;
--color-hanaasagi2-oklch: 0.572 0.094 225.7;
Sass変数
$color-hanaasagi2: #2A83A2;
$color-hanaasagi2-rgb: rgb(42, 131, 162);
$color-hanaasagi2-oklch: oklch(0.572 0.094 225.7);
Tailwind Config
'hanaasagi2': '#2A83A2',
SwiftUI
Color(red: 0.165, green: 0.514, blue: 0.635)
JSON
{
  "name": {
    "ja": "花浅葱",
    "en": "Flower Asagi",
    "reading": "はなあさぎ"
  },
  "hex": "#2A83A2",
  "rgb": {
    "r": 42,
    "g": 131,
    "b": 162
  },
  "cmyk": {
    "c": 74,
    "m": 19,
    "y": 0,
    "k": 36
  },
  "oklch": {
    "l": 0.572,
    "c": 0.094,
    "h": 225.7
  },
  "displayP3": {
    "r": 0.27,
    "g": 0.51,
    "b": 0.62
  },
  "hsv": {
    "h": 196,
    "s": 74,
    "v": 64
  },
  "munsell": "2.5B 5.1/6"
}

関連する色

他の文化圏の類似色