サファビーグリーン
Safavid Green
広色域（Display P3）比較
sRGB（従来のWeb標準）
#177245
Display P3（広色域）
color(display-p3 0.2119 0.4404 0.286)
意味と歴史
由来
イラン・イスファハンのサファヴィー朝（1501〜1736年）のモスク建築タイルに見られる深い青緑色。
歴史
サファヴィー朝のシャー・モスク（マスジェデ・シャー）をはじめとするイスファハンの建築群に多用された。コバルトと銅を用いた釉薬タイルの色。
CSSコード
HEX
#177245 RGB
rgb(23, 114, 69) CMYK
cmyk(80%, 0%, 39%, 55%) HSV
hsv(150.3, 79.8%, 44.7%) OKLCH
oklch(48.93% 0.1094 156.04) Display P3
color(display-p3 0.2119 0.4404 0.286) Munsell
CIE XYZ
XYZ(0.07444, 0.12646, 0.07678) CIE L*a*b*
Lab(42.22, -37.04, 17.76) CIE LCH(ab)
LCH(42.22, 41.08, 154.38°) CIE L*u*v*
Luv(42.22, -34.36, 26.68) Hunter Lab
Hunter Lab(35.56, -2.33, 1.05) xyY
xyY(0.26809, 0.455413, 0.12646) JzAzBz
JzAzBz(0.183069, -0.016359, 0.01959) JzCzHz
JzCzHz(0.183069, 0.025522, 129.86491°) フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #177245;
background-color: oklch(48.93% 0.1094 156.04);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.2119 0.4404 0.286);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
5.95:1
黒背景
3.53:1
白文字
5.95:1
黒文字
3.53:1
配色シミュレーター
この色を背景やテキストに使用した場合のプレビューです。
白テキスト — 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.
色覚シミュレーション
P型（1型）
赤色の感度が低下
#716842
D型（2型）
緑色の感度が低下
#676148
T型（3型）
青色の感度が低下
#007167
配色提案
この配色はイスラム幾何学模様の色彩調和と、ペルシャ細密画の伝統的な配色法則に基づいています。
補色
Complementary色相環の反対側に位置する色。最も強いコントラストを生む
類似色
Analogous色相が近い色の組み合わせ。自然で調和的な印象を与える
トライアド
Triadic色相環を三等分する配色。活力がありバランスの良い組み合わせ
スプリットコンプリメンタリー
Split-complementary補色の両隣を使う配色。補色より柔らかいコントラスト
テトラディック（正方形）
Tetradic (Square)色相環を四等分する配色。豊かな色彩で華やかな印象
テトラディック（長方形）
Tetradic (Rectangle)二対の補色を組み合わせた配色。多彩ながらまとまりのある配色
モノクロマティック
Monochromatic同じ色相で明度・彩度を変えた配色。統一感のある上品な印象
ダブルコンプリメンタリー
Double Complementary隣り合う二色とその補色による四色配色。複雑で魅力的な配色
グラデーション
ティント（明るく）
background: linear-gradient(to right, #177245, #FFFFFF); シェード（暗く）
background: linear-gradient(to right, #177245, #000000); 透明へ
background: linear-gradient(to right, #177245, transparent); エクスポート
--color-safavid_green: #177245;
--color-safavid_green-rgb: 23, 114, 69;
--color-safavid_green-oklch: 48.93% 0.1094 156.04;$color-safavid_green: #177245;
$color-safavid_green-rgb: rgb(23, 114, 69);
$color-safavid_green-oklch: oklch(48.93% 0.1094 156.04);'safavid_green': '#177245',Color(red: 0.090, green: 0.447, blue: 0.271){
"name": {
"ja": "サファビーグリーン",
"en": "Safavid Green"
},
"hex": "#177245",
"rgb": {
"r": 23,
"g": 114,
"b": 69
},
"cmyk": {
"c": 80,
"m": 0,
"y": 39,
"k": 55
},
"oklch": {
"l": 48.93,
"c": 0.1094,
"h": 156.04
},
"displayP3": {
"r": 0.2119,
"g": 0.4404,
"b": 0.286
},
"hsv": {
"h": 150.3,
"s": 79.8,
"v": 44.7
},
"munsell": ""
}