漢青

かんせい | Han Blue

中国の伝統色 青系 西周時代(紀元前1045年頃)〜

広色域(Display P3)比較

sRGB(従来のWeb標準)

#446CCF

Display P3(広色域)

color(display-p3 0.3082 0.4192 0.7811)

意味と歴史

由来

漢青(漢藍)は古代中国で開発された合成バリウム銅ケイ酸塩顔料で、化学式はBaCuSi₄O₁₀である。1993年に天然鉱物エッフェンベルジャイトとして自然界にも存在することが発見された。

出典(1件)

歴史

西周時代(紀元前1045〜771年)のビーズに最古の使用例が確認されており、漢代(紀元220年頃)まで使用が続いた。エジプシャンブルー(CaCuSi₄O₁₀)と同じ基本構造を持つが、カルシウムの代わりにバリウムを含む点で異なる。製造には約900〜1000℃の高温と20〜48時間の長時間焼成が必要であった。

出典(1件)

伝統的な用途

西周時代のビーズ装飾、戦国時代の八角形顔料スティック、漢代の胡形土器(灰色陶器)や青銅器の装飾、壁画の顔料として使用された。漢青と漢紫を混合することで、青から紫までの多様な色合いが作り出された。

出典(1件)

CSSコード

HEX

#446CCF

RGB

rgb(68, 108, 207)

CMYK

cmyk(67.1%, 47.8%, 0%, 18.8%)

HSV

hsv(222.7, 67.1%, 81.2%)

OKLCH

oklch(55.44% 0.1595 265.07)

Display P3

color(display-p3 0.3082 0.4192 0.7811)

Munsell

7PB 4.8/12

CIE XYZ

XYZ(0.19005, 0.16457, 0.60399)

CIE L*a*b*

Lab(47.57, 18.38, -54.73)

CIE LCH(ab)

LCH(47.57, 57.73, 288.56°)

CIE L*u*v*

Luv(47.57, -17.19, -84.74)

Hunter Lab

Hunter Lab(40.57, 15.03, -64.47)

xyY

xyY(0.19826, 0.17168, 0.16457)

JzAzBz

JzAzBz(0.006002, -0.001425, -0.013307)

JzCzHz

JzCzHz(0.006002, 0.013383, 263.89°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #446CCF;
  background-color: oklch(55.44% 0.1595 265.07);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.3082 0.4192 0.7811);
  }
}

コントラストチェッカー

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

サンプル

白背景

4.89:1

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

黒背景

4.29:1

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

白文字

4.89:1

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

黒文字

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

赤色の感度が低下

#3778D3

D型(2型)

緑色の感度が低下

#166BCD

T型(3型)

青色の感度が低下

#008393

配色提案

この配色は中国の五行思想(木・火・土・金・水)の相生・相克の関係に着想を得て、伝統的な色彩調和の原理を反映しています。

補色

Complementary

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

#446CCF
#FFFFFF

類似色

Analogous

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

#446CCF
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#446CCF
#FFFFFF
#FFFFFF

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

Split-complementary

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

#446CCF
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#446CCF
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#446CCF
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#446CCF
#D5EFFF
#FFFFFF
#C5EDFF

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

Double Complementary

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

#446CCF
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #446CCF, #FFFFFF);
#446CCF
#6989D9
#8FA7E2
#B4C4EC
#DAE2F5
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #446CCF, #000000);
#446CCF
#3656A6
#29417C
#1B2B53
#0E1629
#000000

透明へ

background: linear-gradient(to right, #446CCF, transparent);

エクスポート

CSS変数
--color-han_blue: #446CCF;
--color-han_blue-rgb: 68, 108, 207;
--color-han_blue-oklch: 55.44% 0.1595 265.07;
Sass変数
$color-han_blue: #446CCF;
$color-han_blue-rgb: rgb(68, 108, 207);
$color-han_blue-oklch: oklch(55.44% 0.1595 265.07);
Tailwind Config
'han_blue': '#446CCF',
SwiftUI
Color(red: 0.267, green: 0.424, blue: 0.812)
JSON
{
  "name": {
    "ja": "漢青",
    "en": "Han Blue",
    "reading": "かんせい",
    "zh": "汉蓝"
  },
  "hex": "#446CCF",
  "rgb": {
    "r": 68,
    "g": 108,
    "b": 207
  },
  "cmyk": {
    "c": 67.1,
    "m": 47.8,
    "y": 0,
    "k": 18.8
  },
  "oklch": {
    "l": 55.44,
    "c": 0.1595,
    "h": 265.07
  },
  "displayP3": {
    "r": 0.3082,
    "g": 0.4192,
    "b": 0.7811
  },
  "hsv": {
    "h": 222.7,
    "s": 67.1,
    "v": 81.2
  },
  "munsell": "7PB 4.8/12"
}

他の文化圏の類似色