朱紅

しゅこう | Vermilion

中国の伝統色 赤系 漢代〜

広色域(Display P3)比較

sRGB(従来のWeb標準)

#E34234

Display P3(広色域)

color(display-p3 0.8232 0.3095 0.2286)

意味と歴史

由来

朱红は天然鉱物の辰砂(硫化水銀)を粉砕して得られる顔料に由来する色名である。漢代以降、皇帝の権威を象徴する正色として宮廷文化に定着した。

出典(1件)

歴史

漢代以降、朱红は皇帝の御批(朱批)や宮殿の壁面装飾に用いられる正色として重んじられた。8世紀頃から水銀と硫黄を化合させた人工顔料の製法が普及し、中国漆器の大量生産を可能にした。

出典(2件)

伝統的な用途

伝統的に宮殿の柱や門、寺院の外壁、印章の朱肉などに広く用いられる。道教では生命と永遠を象徴する色とされ、紫禁城の柱や少林寺の門にも朱红が塗られている。

出典(1件)

CSSコード

HEX

#E34234

RGB

rgb(227, 66, 52)

CMYK

cmyk(0%, 70.9%, 77.1%, 11%)

HSV

hsv(4.8, 77.1%, 89%)

OKLCH

oklch(61.29% 0.2 29.14)

Display P3

color(display-p3 0.8232 0.3095 0.2286)

Munsell

7R 5/16

CIE XYZ

XYZ(0.34251, 0.20481, 0.04812)

CIE L*a*b*

Lab(52.38, 61.08, 47.18)

CIE LCH(ab)

LCH(52.38, 77.18, 37.68°)

CIE L*u*v*

Luv(52.38, 127.4, 33.76)

Hunter Lab

Hunter Lab(45.26, 59.24, 23.79)

xyY

xyY(0.57523, 0.34396, 0.20481)

JzAzBz

JzAzBz(0.017028, 0.012184, 0.009139)

JzCzHz

JzCzHz(0.017028, 0.015231, 36.87°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #E34234;
  background-color: oklch(61.29% 0.2 29.14);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.8232 0.3095 0.2286);
  }
}

コントラストチェッカー

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

サンプル

白背景

4.12:1

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

黒背景

5.10:1

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

白文字

4.12:1

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

黒文字

5.10:1

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

赤色の感度が低下

#726631

D型(2型)

緑色の感度が低下

#9A8A2D

T型(3型)

青色の感度が低下

#FA0040

配色提案

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

補色

Complementary

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

#E34234
#FFFFFF

類似色

Analogous

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

#E34234
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#E34234
#FFFFFF
#FFFFFF

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

Split-complementary

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

#E34234
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#E34234
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#E34234
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#E34234
#FFD6C8
#FFFFFF
#FFC3AF

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

Double Complementary

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

#E34234
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #E34234, #FFFFFF);
#E34234
#E9685D
#EE8E85
#F4B3AE
#F9D9D6
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #E34234, #000000);
#E34234
#B6352A
#88281F
#5B1A15
#2D0D0A
#000000

透明へ

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

エクスポート

CSS変数
--color-zhuhong: #E34234;
--color-zhuhong-rgb: 227, 66, 52;
--color-zhuhong-oklch: 61.29% 0.2 29.14;
Sass変数
$color-zhuhong: #E34234;
$color-zhuhong-rgb: rgb(227, 66, 52);
$color-zhuhong-oklch: oklch(61.29% 0.2 29.14);
Tailwind Config
'zhuhong': '#E34234',
SwiftUI
Color(red: 0.890, green: 0.259, blue: 0.204)
JSON
{
  "name": {
    "ja": "朱紅",
    "en": "Vermilion",
    "reading": "しゅこう",
    "zh": "朱红"
  },
  "hex": "#E34234",
  "rgb": {
    "r": 227,
    "g": 66,
    "b": 52
  },
  "cmyk": {
    "c": 0,
    "m": 70.9,
    "y": 77.1,
    "k": 11
  },
  "oklch": {
    "l": 61.29,
    "c": 0.2,
    "h": 29.14
  },
  "displayP3": {
    "r": 0.8232,
    "g": 0.3095,
    "b": 0.2286
  },
  "hsv": {
    "h": 4.8,
    "s": 77.1,
    "v": 89
  },
  "munsell": "7R 5/16"
}