天青

てんせい | Tianqing

中国の伝統色 青系 五代〜宋代

広色域(Display P3)比較

sRGB(従来のWeb標準)

#D0EBFF

Display P3(広色域)

color(display-p3 0.8358 0.9183 0.9917)

意味と歴史

由来

「雨過天青(雨上がりに雲が晴れた空の色)」に由来する明るい水色の一種である。五代後周の世宗(柴栄)が「雨過天晴云破処,這般顏色作將來(雨上がりの雲が割れた空の色を作れ)」と命じたことが起源とされる。

出典(2件)

歴史

宋代、1100年頃の短い期間に宮廷のために作られた、汝窯(Ru ware)という非常に希少な中国の陶器に見られる色として知られる。汝窯は後の時代の中国の著述家によって五大名窯の一つとされている。

出典(2件)

伝統的な用途

宋代の宮廷専用に生産された汝窯という陶器の釉薬の色として用いられた。この陶器はほとんど装飾がなく、釉薬の淡いアヒルの卵のような青色が特徴であった。

出典(2件)

CSSコード

HEX

#D0EBFF

RGB

rgb(208, 235, 255)

CMYK

cmyk(18%, 8%, 0%, 0%)

HSV

hsv(205.5, 18.4%, 100%)

OKLCH

oklch(92.66% 0.0395 240.01)

Display P3

color(display-p3 0.8358 0.9183 0.9917)

Munsell

CIE XYZ

XYZ(0.73766, 0.80045, 1.06152)

CIE L*a*b*

Lab(91.7, -4.76, -12.62)

CIE LCH(ab)

LCH(91.7, 13.48, 249.35°)

CIE L*u*v*

Luv(91.7, -15.02, -19.17)

Hunter Lab

Hunter Lab(89.47, -0.47, -1.31)

xyY

xyY(0.283756, 0.307908, 0.80045)

JzAzBz

JzAzBz(0.371106, -0.003181, -0.004508)

JzCzHz

JzCzHz(0.371106, 0.005518, 234.790292°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #D0EBFF;
  background-color: oklch(92.66% 0.0395 240.01);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.8358 0.9183 0.9917);
  }
}

コントラストチェッカー

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

サンプル

白背景

1.23:1

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

黒背景

17.01:1

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

白文字

1.23:1

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

黒文字

17.01:1

AA Pass AAA Pass
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型)

赤色の感度が低下

#E3EAFF

D型(2型)

緑色の感度が低下

#DCE5FF

T型(3型)

青色の感度が低下

#C4F0F1

配色提案

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

補色

Complementary

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

#D0EBFF
#FFFFFF

類似色

Analogous

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

#D0EBFF
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#D0EBFF
#FFFFFF
#FFFFFF

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

Split-complementary

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

#D0EBFF
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#D0EBFF
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#D0EBFF
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#D0EBFF
#E3F1FB
#FFFFFF
#DCF2FF

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

Double Complementary

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

#D0EBFF
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #D0EBFF, #FFFFFF);
#D0EBFF
#D9EFFF
#E3F3FF
#ECF7FF
#F6FBFF
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #D0EBFF, #000000);
#D0EBFF
#A6BCCC
#7D8D99
#535E66
#2A2F33
#000000

透明へ

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

エクスポート

CSS変数
--color-tianqing: #D0EBFF;
--color-tianqing-rgb: 208, 235, 255;
--color-tianqing-oklch: 92.66% 0.0395 240.01;
Sass変数
$color-tianqing: #D0EBFF;
$color-tianqing-rgb: rgb(208, 235, 255);
$color-tianqing-oklch: oklch(92.66% 0.0395 240.01);
Tailwind Config
'tianqing': '#D0EBFF',
SwiftUI
Color(red: 0.816, green: 0.922, blue: 1.000)
JSON
{
  "name": {
    "ja": "天青",
    "en": "Tianqing",
    "reading": "てんせい",
    "zh": "天青"
  },
  "hex": "#D0EBFF",
  "rgb": {
    "r": 208,
    "g": 235,
    "b": 255
  },
  "cmyk": {
    "c": 18,
    "m": 8,
    "y": 0,
    "k": 0
  },
  "oklch": {
    "l": 92.66,
    "c": 0.0395,
    "h": 240.01
  },
  "displayP3": {
    "r": 0.8358,
    "g": 0.9183,
    "b": 0.9917
  },
  "hsv": {
    "h": 205.5,
    "s": 18.4,
    "v": 100
  },
  "munsell": ""
}