紺色

こんいろ | Kon-iro

日本の伝統色 青系 平安時代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#001A43

Display P3(広色域)

color(display-p3 0.023694 0.099767 0.252399)

意味と歴史

由来

「紺」はもともと中国の古い染色名で、色と共に日本へ伝わった。日本では古くから「深縹(ふかきはなだ)」と呼ばれていたが、同じ色であったため「紺」の字を当てて定着した。藍で何度も重ねて染め上げた、紫がかった最も深い青色を指す。

出典(2件)

歴史

古くは「深縹(ふかきはなだ)」と呼ばれ、平安時代の「延喜式」にもその名が見られる。平安時代中期頃から「紺」という呼称が用いられるようになり、平安末期から鎌倉時代にかけては男性の衣装の色として特に愛された。この流行が、藍の栽培と染色技術が盛んになるきっかけとなった。

出典(1件)

伝統的な用途

平安時代末期から鎌倉時代にかけて、特に男性の衣装の色として広く愛好された。この色が好まれたことが、原料となる藍の栽培や染色技術が日本で盛んになるきっかけを作ったとされる。

出典(1件)

CSSコード

HEX

#001A43

RGB

rgb(0, 26, 67)

CMYK

cmyk(100%, 61.19%, 0%, 73.73%)

HSV

hsv(216.7, 100%, 26.27%)

OKLCH

oklch(22.83% 0.0847 258.06)

Display P3

color(display-p3 0.023694 0.099767 0.252399)

Munsell

CIE XYZ

XYZ(0.01382, 0.01144, 0.05457)

CIE L*a*b*

Lab(10.136492, 9.384251, -28.675803)

CIE LCH(ab)

LCH(10.136492, 30.172269, 288.120855°)

CIE L*u*v*

Luv(10.136492, -5.202224, -22.856794)

Hunter Lab

Hunter Lab(10.695078, 0.050009, -0.242453)

xyY

xyY(0.173135, 0.143285, 0.01144)

JzAzBz

JzAzBz(0.001829, -0.000332, -0.003219)

JzCzHz

JzCzHz(0.001829, 0.003236, 264.10562°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #001A43;
  background-color: oklch(22.83% 0.0847 258.06);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.023694 0.099767 0.252399);
  }
}

コントラストチェッカー

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

サンプル

白背景

17.09:1

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

黒背景

1.23:1

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

白文字

17.09:1

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

黒文字

1.23:1

AA Fail AAA Fail
AA大文字 Fail

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — 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型)

赤色の感度が低下

#001F44

D型(2型)

緑色の感度が低下

#001942

T型(3型)

青色の感度が低下

#00242B

配色提案

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

補色

Complementary

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

#001A43
#FFFFFF

類似色

Analogous

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

#001A43
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#001A43
#FFFFFF
#FFFFFF

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

Split-complementary

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

#001A43
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#001A43
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#001A43
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#001A43
#DDF0FF
#FFFFFF
#D3F1FF

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

Double Complementary

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

#001A43
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #001A43, #FFFFFF);
#001A43
#334869
#66768E
#99A3B4
#CCD1D9
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #001A43, #000000);
#001A43
#001536
#001028
#000A1B
#00050D
#000000

透明へ

background: linear-gradient(to right, #001A43, transparent);

エクスポート

CSS変数
--color-koniro: #001A43;
--color-koniro-rgb: 0, 26, 67;
--color-koniro-oklch: 22.83% 0.0847 258.06;
Sass変数
$color-koniro: #001A43;
$color-koniro-rgb: rgb(0, 26, 67);
$color-koniro-oklch: oklch(22.83% 0.0847 258.06);
Tailwind Config
'koniro': '#001A43',
SwiftUI
Color(red: 0.000, green: 0.102, blue: 0.263)
JSON
{
  "name": {
    "ja": "紺色",
    "en": "Kon-iro",
    "reading": "こんいろ"
  },
  "hex": "#001A43",
  "rgb": {
    "r": 0,
    "g": 26,
    "b": 67
  },
  "cmyk": {
    "c": 100,
    "m": 61.19,
    "y": 0,
    "k": 73.73
  },
  "oklch": {
    "l": 22.83,
    "c": 0.0847,
    "h": 258.06
  },
  "displayP3": {
    "r": 0.023694,
    "g": 0.099767,
    "b": 0.252399
  },
  "hsv": {
    "h": 216.7,
    "s": 100,
    "v": 26.27
  },
  "munsell": ""
}