カーディナルレッド

Cardinal Red

西洋の伝統色 Red 中世(476-1453)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#C41E3A

Display P3(広色域)

color(display-p3 0.71 0.19 0.24)

意味と歴史

由来

カトリック教会の枢機卿(カーディナル)が着用する深紅の法衣・帽子(ビレッタ)の色に由来する。ラテン語のcardinalis(主要な)が語源である。

歴史

13世紀の教皇インノケンティウス4世の時代から枢機卿の法衣色として定められ、キリストの血を象徴する深紅はカトリック教会の高位聖職者の権威を示してきた。

心理的効果

宗教的権威と神聖さを兼ね備えた荘厳な印象を与え、キリストの犠牲と殉教者の血を連想させる崇高な赤。信仰と威厳が融合した色である。

伝統的な用途

カトリック枢機卿の法衣・カッパ・マーニャ・ビレッタ、教会装飾、セントルイス・カーディナルスなどのスポーツチームカラーに使用される。

CSSコード

HEX

#C41E3A

RGB

rgb(196, 30, 58)

CMYK

cmyk(0%, 85%, 70%, 23%)

HSV

hsv(350, 85%, 77%)

OKLCH

oklch(0.531 0.197 19.5)

Display P3

color(display-p3 0.71 0.19 0.24)

Munsell

5R 4.3/12

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #C41E3A;
  background-color: oklch(0.531 0.197 19.5);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.71 0.19 0.24);
  }
}

コントラストチェッカー

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

サンプル

白背景

5.84:1

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

黒背景

3.59:1

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

白文字

5.84:1

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

黒文字

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

赤色の感度が低下

#544F3A

D型(2型)

緑色の感度が低下

#7D7135

T型(3型)

青色の感度が低下

#D8002B

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #C41E3A, #FFFFFF);
#C41E3A
#D04B61
#DC7889
#E7A5B0
#F3D2D8
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #C41E3A, #000000);
#C41E3A
#9D182E
#761223
#4E0C17
#27060C
#000000

透明へ

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

エクスポート

CSS変数
--color-cardinal_red: #C41E3A;
--color-cardinal_red-rgb: 196, 30, 58;
--color-cardinal_red-oklch: 0.531 0.197 19.5;
Sass変数
$color-cardinal_red: #C41E3A;
$color-cardinal_red-rgb: rgb(196, 30, 58);
$color-cardinal_red-oklch: oklch(0.531 0.197 19.5);
Tailwind Config
'cardinal_red': '#C41E3A',
SwiftUI
Color(red: 0.769, green: 0.118, blue: 0.227)
JSON
{
  "name": {
    "ja": "カーディナルレッド",
    "en": "Cardinal Red"
  },
  "hex": "#C41E3A",
  "rgb": {
    "r": 196,
    "g": 30,
    "b": 58
  },
  "cmyk": {
    "c": 0,
    "m": 85,
    "y": 70,
    "k": 23
  },
  "oklch": {
    "l": 0.531,
    "c": 0.197,
    "h": 19.5
  },
  "displayP3": {
    "r": 0.71,
    "g": 0.19,
    "b": 0.24
  },
  "hsv": {
    "h": 350,
    "s": 85,
    "v": 77
  },
  "munsell": "5R 4.3/12"
}

関連する色

他の文化圏の類似色