シャルトリューズ

Chartreuse

近代・産業色 緑系 1884年〜

広色域(Display P3)比較

sRGB(従来のWeb標準)

#7FFF00

Display P3(広色域)

color(display-p3 0.627921 0.988407 0.305559)

意味と歴史

由来

グリーンシャルトリューズの液体の色に由来する色名。リキュールは1737年からカルトゥジオ会の修道士によって製造され、1840年に現在の形(グリーン・シャルトリューズ)として市場に登場した。色名としての英語初出は1884年。リキュール名はフランスのシャルトリューズ山脈にあるグランド・シャルトリューズ修道院にちなむ。

出典(1件)

歴史

リキュールの製法は1605年にフランソワ・アンニバル・デストレから修道士に与えられたとされる写本に基づく。1764年にエリクシル・ヴェジェタルのレシピが完成し、1840年にグリーン・シャルトリューズとイエロー・シャルトリューズが市場に登場した。色名「シャルトリューズ」は1884年に英語で初めて記録された。

出典(1件)

CSSコード

HEX

#7FFF00

RGB

rgb(127, 255, 0)

CMYK

cmyk(50.2%, 0%, 100%, 0%)

HSV

hsv(90.1, 100%, 100%)

OKLCH

oklch(89.03% 0.2648 136.01)

Display P3

color(display-p3 0.627921 0.988407 0.305559)

Munsell

CIE XYZ

XYZ(0.44511, 0.76029, 0.1233)

CIE L*a*b*

Lab(89.872708, -68.066129, 85.779993)

CIE LCH(ab)

LCH(89.872708, 109.504361, 128.431879°)

CIE L*u*v*

Luv(89.872708, -60.908356, 107.073232)

Hunter Lab

Hunter Lab(87.194491, -0.577151, 0.49748)

xyY

xyY(0.334999, 0.572206, 0.76029)

JzAzBz

JzAzBz(0.013285, -0.013072, 0.017555)

JzCzHz

JzCzHz(0.013285, 0.021887, 126.672956°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #7FFF00;
  background-color: oklch(89.03% 0.2648 136.01);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.627921 0.988407 0.305559);
  }
}

コントラストチェッカー

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

サンプル

白背景

1.30:1

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

黒背景

16.21:1

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

白文字

1.30:1

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

黒文字

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

赤色の感度が低下

#FFE800

D型(2型)

緑色の感度が低下

#F8DE39

T型(3型)

青色の感度が低下

#79F5D9

配色提案

この配色は現代のデザインシステムにおける色彩理論と、ユニバーサルデザインのアクセシビリティ原則に基づいています。

補色

Complementary

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

#7FFF00
#FFFFFF

類似色

Analogous

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

#7FFF00
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#7FFF00
#FFFFFF
#FFFFFF

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

Split-complementary

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

#7FFF00
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#7FFF00
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#7FFF00
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#7FFF00
#C6FFA9
#FFFFFF
#A9FF73

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

Double Complementary

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

#7FFF00
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #7FFF00, #FFFFFF);
#7FFF00
#99FF33
#B2FF66
#CCFF99
#E5FFCC
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #7FFF00, #000000);
#7FFF00
#66CC00
#4C9900
#336600
#193300
#000000

透明へ

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

エクスポート

CSS変数
--color-chartreuse: #7FFF00;
--color-chartreuse-rgb: 127, 255, 0;
--color-chartreuse-oklch: 89.03% 0.2648 136.01;
Sass変数
$color-chartreuse: #7FFF00;
$color-chartreuse-rgb: rgb(127, 255, 0);
$color-chartreuse-oklch: oklch(89.03% 0.2648 136.01);
Tailwind Config
'chartreuse': '#7FFF00',
SwiftUI
Color(red: 0.498, green: 1.000, blue: 0.000)
JSON
{
  "name": {
    "ja": "シャルトリューズ",
    "en": "Chartreuse"
  },
  "hex": "#7FFF00",
  "rgb": {
    "r": 127,
    "g": 255,
    "b": 0
  },
  "cmyk": {
    "c": 50.2,
    "m": 0,
    "y": 100,
    "k": 0
  },
  "oklch": {
    "l": 89.03,
    "c": 0.2648,
    "h": 136.01
  },
  "displayP3": {
    "r": 0.627921,
    "g": 0.988407,
    "b": 0.305559
  },
  "hsv": {
    "h": 90.1,
    "s": 100,
    "v": 100
  },
  "munsell": ""
}