フェズレッド

Fez Red

アフリカの伝統色 赤系 19世紀初頭

広色域(Display P3)比較

sRGB(従来のWeb標準)

#B22222

Display P3(広色域)

color(display-p3 0.6414 0.1906 0.1654)

意味と歴史

由来

色名はモロッコの都市フェズに由来する可能性がある。この地で、フェズ帽を染めるための染料がクリムゾンベリー(crimson berries)から抽出されていたことにちなむ。

出典(1件)

歴史

この色が用いられるフェズ帽は、オスマン帝国時代に人気を博した。19世紀初頭にはオスマン帝国の象徴と見なされるようになった。

出典(1件)

伝統的な用途

主にフェズ帽(別名タルブーシュ)と呼ばれる、フェルト製の頭飾りの染色に用いられた。この帽子は通常赤色で、てっぺんに黒い房飾りが付いているのが特徴である。

出典(1件)

CSSコード

HEX

#B22222

RGB

rgb(178, 34, 34)

CMYK

cmyk(0%, 81%, 81%, 30%)

HSV

hsv(0, 80.9%, 69.8%)

OKLCH

oklch(49.68% 0.1797 26.81)

Display P3

color(display-p3 0.6414 0.1906 0.1654)

Munsell

CIE XYZ

XYZ(0.19223, 0.10728, 0.02572)

CIE L*a*b*

Lab(39.12, 55.92, 37.65)

CIE LCH(ab)

LCH(39.12, 67.41, 33.95°)

CIE L*u*v*

Luv(39.12, 107.55, 23.2)

Hunter Lab

Hunter Lab(32.75, 5, 1.71)

xyY

xyY(0.591076, 0.329854, 0.10728)

JzAzBz

JzAzBz(0.201014, 0.076232, 0.040541)

JzCzHz

JzCzHz(0.201014, 0.086342, 28.004402°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #B22222;
  background-color: oklch(49.68% 0.1797 26.81);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.6414 0.1906 0.1654);
  }
}

コントラストチェッカー

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

サンプル

白背景

6.68:1

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

黒背景

3.14:1

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

白文字

6.68:1

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

黒文字

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

赤色の感度が低下

#514820

D型(2型)

緑色の感度が低下

#74671B

T型(3型)

青色の感度が低下

#C40024

配色提案

この配色はケンテ布の象徴的色彩組み合わせと、アフリカ各地の伝統的な色彩の意味体系に基づいています。

補色

Complementary

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

#B22222
#FFFFFF

類似色

Analogous

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

#B22222
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#B22222
#FFFFFF
#FFFFFF

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

Split-complementary

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

#B22222
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#B22222
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#B22222
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#B22222
#FFD8CE
#FFFFFF
#FFC8BA

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

Double Complementary

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

#B22222
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #B22222, #FFFFFF);
#B22222
#C14E4E
#D17A7A
#E0A7A7
#F0D3D3
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #B22222, #000000);
#B22222
#8E1B1B
#6B1414
#470E0E
#240707
#000000

透明へ

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

エクスポート

CSS変数
--color-fez_red: #B22222;
--color-fez_red-rgb: 178, 34, 34;
--color-fez_red-oklch: 49.68% 0.1797 26.81;
Sass変数
$color-fez_red: #B22222;
$color-fez_red-rgb: rgb(178, 34, 34);
$color-fez_red-oklch: oklch(49.68% 0.1797 26.81);
Tailwind Config
'fez_red': '#B22222',
SwiftUI
Color(red: 0.698, green: 0.133, blue: 0.133)
JSON
{
  "name": {
    "ja": "フェズレッド",
    "en": "Fez Red"
  },
  "hex": "#B22222",
  "rgb": {
    "r": 178,
    "g": 34,
    "b": 34
  },
  "cmyk": {
    "c": 0,
    "m": 81,
    "y": 81,
    "k": 30
  },
  "oklch": {
    "l": 49.68,
    "c": 0.1797,
    "h": 26.81
  },
  "displayP3": {
    "r": 0.6414,
    "g": 0.1906,
    "b": 0.1654
  },
  "hsv": {
    "h": 0,
    "s": 80.9,
    "v": 69.8
  },
  "munsell": ""
}