青磁色

せいじいろ | Seijiiro

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

広色域(Display P3)比較

sRGB(従来のWeb標準)

#7EBEA5

Display P3(広色域)

color(display-p3 0.5498 0.7385 0.6525)

意味と歴史

由来

青磁の肌の色のような浅い青緑色で、中国の青磁器の釉薬の色に由来する。透明感のある淡い青緑が特徴である。

出典(1件)

歴史

青磁は中国で発達した陶磁器で、日本には平安時代以降に伝来した。その独特の青緑色の釉薬は古来より珍重され、色名としても定着した。

出典(1件)

心理的効果

淡い青緑色は、清涼感と上品さを感じさせる。青磁器の持つ静謐な美しさを連想させ、心を落ち着かせる効果がある。

出典(1件)

伝統的な用途

青磁器は茶道具や花器として珍重された。色名としても着物や工芸品のデザインに用いられている。

出典(1件)

CSSコード

HEX

#7EBEA5

RGB

rgb(126, 190, 165)

CMYK

cmyk(33.7%, 0%, 13.2%, 25.5%)

HSV

hsv(156.6, 33.7%, 74.5%)

OKLCH

oklch(75.1% 0.0752 167.84)

Display P3

color(display-p3 0.5498 0.7385 0.6525)

Munsell

CIE XYZ

XYZ(0.33807, 0.43977, 0.42297)

CIE L*a*b*

Lab(72.213297, -25.967316, 6.161104)

CIE LCH(ab)

LCH(72.213297, 26.688213, 166.652593°)

CIE L*u*v*

Luv(72.213297, -30.980025, 13.265677)

Hunter Lab

Hunter Lab(66.315355, -21.854649, 5.186827)

xyY

xyY(0.281533, 0.36623, 0.43977)

JzAzBz

JzAzBz(0.154175, -0.03525, 0.00693)

JzCzHz

JzCzHz(0.154175, 0.035925, 168.88°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #7EBEA5;
  background-color: oklch(75.1% 0.0752 167.84);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.5498 0.7385 0.6525);
  }
}

コントラストチェッカー

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

サンプル

白背景

2.14:1

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

黒背景

9.80:1

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

白文字

2.14:1

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

黒文字

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

赤色の感度が低下

#BBB6A4

D型(2型)

緑色の感度が低下

#B0AEA7

T型(3型)

青色の感度が低下

#6EBFB7

配色提案

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

補色

Complementary

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

#7EBEA5
#FFFFFF

類似色

Analogous

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

#7EBEA5
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#7EBEA5
#FFFFFF
#FFFFFF

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

Split-complementary

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

#7EBEA5
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#7EBEA5
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#7EBEA5
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#7EBEA5
#D7F7EA
#FFFFFF
#C8FCE7

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

Double Complementary

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

#7EBEA5
#FFFFFF
#FFFFFF
#FFFFFF

伝統的な配色の提案

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

グラデーション

ティント(明るく)

background: linear-gradient(to right, #7EBEA5, #FFFFFF);
#7EBEA5
#98CBB7
#B2D8C9
#CBE5DB
#E5F2ED
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #7EBEA5, #000000);
#7EBEA5
#659884
#4C7263
#324C42
#192621
#000000

透明へ

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

エクスポート

CSS変数
--color-seijiiro: #7EBEA5;
--color-seijiiro-rgb: 126, 190, 165;
--color-seijiiro-oklch: 75.1% 0.0752 167.84;
Sass変数
$color-seijiiro: #7EBEA5;
$color-seijiiro-rgb: rgb(126, 190, 165);
$color-seijiiro-oklch: oklch(75.1% 0.0752 167.84);
Tailwind Config
'seijiiro': '#7EBEA5',
SwiftUI
Color(red: 0.494, green: 0.745, blue: 0.647)
JSON
{
  "name": {
    "ja": "青磁色",
    "en": "Seijiiro",
    "reading": "せいじいろ"
  },
  "hex": "#7EBEA5",
  "rgb": {
    "r": 126,
    "g": 190,
    "b": 165
  },
  "cmyk": {
    "c": 33.7,
    "m": 0,
    "y": 13.2,
    "k": 25.5
  },
  "oklch": {
    "l": 75.1,
    "c": 0.0752,
    "h": 167.84
  },
  "displayP3": {
    "r": 0.5498,
    "g": 0.7385,
    "b": 0.6525
  },
  "hsv": {
    "h": 156.6,
    "s": 33.7,
    "v": 74.5
  },
  "munsell": ""
}