縹色

はなだいろ|Hanada Blue

色コードの出典:縹色 - 和色大辞典

広色域(Display P3)比較

sRGB(従来のWeb標準)

#2792C3

Display P3(広色域)

color(display-p3 0.2886 0.5644 0.747)

意味と歴史

由来

元来は月草(ツユクサ)の花の汁で染めた色を指すが、非常に褪せやすいため、通常は堅牢な藍で染めた色を指す。月草に由来するため「花田」と表記されたり、「花色」「露草色」とも呼ばれる。後漢時代の辞典では「縹」は「漂」(薄青色)と同義とされている。

出典(1件)

歴史

『日本書紀』に服色名が見られるほど古くから知られる藍染の色。平安時代の『延喜式』では藍だけで染める色として区別され、濃淡で四段階に分けられた。古くは「はなだ色」、平安時代は「縹色」、江戸時代は「花色」と色名を変えて伝わった。本来の染料である露草の色は褪せやすく、『枕草子』では儚いものの象徴として記されている。

出典(1件)

伝統的な用途

古代の服制で用いられ、平安時代には六位の官人が着る位袍の色であったことから「青侍」の語源となった。江戸時代には、色褪せにくい藍染の「花色木綿」が着物の裏地として広く使われた。また、本来の染料である露草の汁は、友禅の下絵を描くために現在も利用されている。

出典(1件)

CSSコード

HEX

#2792C3

RGB

rgb(39, 146, 195)

CMYK

cmyk(80%, 25.1%, 0%, 23.5%)

HSV

hsv(198.8, 80%, 76.5%)

OKLCH

oklch(62.36% 0.118 233.8)

Display P3

color(display-p3 0.2886 0.5644 0.747)

Munsell

CIE XYZ

XYZ(0.20962, 0.24927, 0.55326)

CIE L*a*b*

Lab(57.003877, -12.583327, -33.726131)

CIE LCH(ab)

LCH(57.003877, 35.997112, 249.539294°)

CIE L*u*v*

Luv(57.003877, -35.819176, -50.634952)

Hunter Lab

Hunter Lab(49.92659, -9.912733, -34.841171)

xyY

xyY(0.207104, 0.246276, 0.24927)

JzAzBz

JzAzBz(0.016224, -0.00473, -0.008919)

JzCzHz

JzCzHz(0.016224, 0.010096, 242.061718°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #2792C3;
  background-color: oklch(62.36% 0.118 233.8);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.2886 0.5644 0.747);
  }
}

コントラストチェッカー

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

白背景

3.51:1

AA FailAAA Fail
AA大文字 Pass

黒背景

5.99:1

AA PassAAA Fail
AA大文字 Pass

白文字

3.51:1

AA FailAAA Fail
AA大文字 Pass

黒文字

5.99:1

AA PassAAA Fail
AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。

背景色として使用
テキスト色として使用
UIコンポーネントでの使用例

色覚シミュレーション

P型(1型)

赤色の感度が低下

#7A91C5

D型(2型)

緑色の感度が低下

#6582C2

T型(3型)

青色の感度が低下

#009FA3

配色提案

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

補色

Complementary

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

#2792C3
#BE723C

類似色

Analogous

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

#2792C3
#009BA8
#6285CE

トライアド

Triadic

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

#2792C3
#BD678C
#878F2F

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

Split-complementary

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

#2792C3
#C46864
#A9801F

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

Tetradic (Square)

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

#2792C3
#AA6DAF
#BE723C
#589957

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

Tetradic (Rectangle)

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

#2792C3
#8B78C7
#BE723C
#878F2F

モノクロマティック

Monochromatic

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

#2792C3
#A0CCE6
#00659E
#65B0D8

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

Double Complementary

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

#2792C3
#6285CE
#BE723C
#A9801F

伝統的な配色の提案

同じ文化圏の伝統色から、色彩理論的に調和する色を選出しました。

グラデーション

ティント(明るく)

background: linear-gradient(to right, #2792C3, #FFFFFF);
#2792C3
#52A8CF
#7DBEDB
#A9D3E7
#D4E9F3
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #2792C3, #000000);
#2792C3
#1F759C
#175875
#103A4E
#081D27
#000000

透明へ

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

エクスポート

CSS変数
--color-hanadairo: #2792C3;
--color-hanadairo-rgb: 39, 146, 195;
--color-hanadairo-oklch: 62.36% 0.118 233.8;
Sass変数
$color-hanadairo: #2792C3;
$color-hanadairo-rgb: rgb(39, 146, 195);
$color-hanadairo-oklch: oklch(62.36% 0.118 233.8);
Tailwind Config
'hanadairo': '#2792C3',
SwiftUI
Color(red: 0.153, green: 0.573, blue: 0.765)
JSON
{
  "name": {
    "ja": "縹色",
    "en": "Hanada Blue",
    "reading": "はなだいろ"
  },
  "hex": "#2792C3",
  "rgb": {
    "r": 39,
    "g": 146,
    "b": 195
  },
  "cmyk": {
    "c": 80,
    "m": 25.1,
    "y": 0,
    "k": 23.5
  },
  "oklch": {
    "l": 62.36,
    "c": 0.118,
    "h": 233.8
  },
  "displayP3": {
    "r": 0.2886,
    "g": 0.5644,
    "b": 0.747
  },
  "hsv": {
    "h": 198.8,
    "s": 80,
    "v": 76.5
  },
  "munsell": ""
}