セリーズ

Cerise

西洋の伝統色 Pink 19世紀

広色域(Display P3)比較

sRGB(従来のWeb標準)

#DE3163

Display P3(広色域)

color(display-p3 0.8 0.26 0.39)

意味と歴史

由来

フランス語で「さくらんぼ」を意味するスリーズ(cerise)に由来する鮮やかな赤紫ピンク色。チェリーの実の濃い赤色よりもピンク寄りの華やかな色調を指す。

歴史

19世紀フランスのファッション用語として定着し、合成アニリン染料の登場で鮮やかなセリーズ色が実現可能になった。フランスの洗練されたファッション文化を象徴する色名である。

心理的効果

チェリーの鮮烈な赤みがかったピンクが、パリジェンヌ的な大胆さと洗練された遊び心を体現する。赤の情熱とピンクの愛らしさが融合した、自信に満ちた華やかな色である。

伝統的な用途

フランスのハイファッションのアクセント色、リップスティックやネイルカラー、春夏のドレスやアクセサリー、グラフィックデザインの鮮やかなアクセントに使用される。

CSSコード

HEX

#DE3163

RGB

rgb(222, 49, 99)

CMYK

cmyk(0%, 78%, 55%, 13%)

HSV

hsv(343, 78%, 87%)

OKLCH

oklch(0.598 0.208 9.9)

Display P3

color(display-p3 0.8 0.26 0.39)

Munsell

7.5RP 5/12

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #DE3163;
  background-color: oklch(0.598 0.208 9.9);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.8 0.26 0.39);
  }
}

コントラストチェッカー

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

サンプル

白背景

4.44:1

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

黒背景

4.73:1

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

白文字

4.44:1

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

黒文字

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

赤色の感度が低下

#606164

D型(2型)

緑色の感度が低下

#8D845F

T型(3型)

青色の感度が低下

#F30047

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #DE3163, #FFFFFF);
#DE3163
#E55A82
#EB83A1
#F2ADC1
#F8D6E0
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #DE3163, #000000);
#DE3163
#B2274F
#851D3B
#591428
#2C0A14
#000000

透明へ

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

エクスポート

CSS変数
--color-cerise: #DE3163;
--color-cerise-rgb: 222, 49, 99;
--color-cerise-oklch: 0.598 0.208 9.9;
Sass変数
$color-cerise: #DE3163;
$color-cerise-rgb: rgb(222, 49, 99);
$color-cerise-oklch: oklch(0.598 0.208 9.9);
Tailwind Config
'cerise': '#DE3163',
SwiftUI
Color(red: 0.871, green: 0.192, blue: 0.388)
JSON
{
  "name": {
    "ja": "セリーズ",
    "en": "Cerise"
  },
  "hex": "#DE3163",
  "rgb": {
    "r": 222,
    "g": 49,
    "b": 99
  },
  "cmyk": {
    "c": 0,
    "m": 78,
    "y": 55,
    "k": 13
  },
  "oklch": {
    "l": 0.598,
    "c": 0.208,
    "h": 9.9
  },
  "displayP3": {
    "r": 0.8,
    "g": 0.26,
    "b": 0.39
  },
  "hsv": {
    "h": 343,
    "s": 78,
    "v": 87
  },
  "munsell": "7.5RP 5/12"
}

関連する色

他の文化圏の類似色