翡翠色

ひすいいろ | Jade Green

日本の伝統色 緑系 縄文時代(前14000-前300)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#38B48B

Display P3(広色域)

color(display-p3 0.37 0.7 0.56)

意味と歴史

由来

翡翠(ひすい)の宝石の色に由来する色名。「翡翠」の漢字は本来カワセミという鳥を指し、その美しい羽色が宝石の名前に転用された。硬玉(ジェダイト)の半透明な緑色は東洋では最高の宝石として金以上に珍重されてきた。

歴史

新潟県糸魚川産の翡翠は世界最古の翡翠文化を持ち、約七千年前の縄文時代から勾玉や大珠に加工された。古代出雲や大和の権力者に献上され、三種の神器の一つ「八尺瓊勾玉」も翡翠製と伝えられる日本の至宝の色である。

心理的効果

高貴さと永遠の若さ、神秘的な力を感じさせる色で、古代から魔除けや霊力の象徴として崇められてきた。深い緑の透明感は精神を浄化し、心身に調和と安定をもたらすとされ、持つ者に不老長寿と繁栄の恩恵を授けると信じられている。

伝統的な用途

縄文時代の勾玉や大珠、古墳時代の装身具、神社の御神宝に用いられてきた。現代でも糸魚川翡翠のアクセサリーは人気が高く、パワーストーンとして愛用されるほか、高級宝飾品や茶道具の翡翠釉の陶器にもこの色が活かされている。

CSSコード

HEX

#38B48B

RGB

rgb(56, 180, 139)

CMYK

cmyk(69%, 0%, 23%, 29%)

HSV

hsv(160, 69%, 71%)

OKLCH

oklch(0.692 0.124 166.7)

Display P3

color(display-p3 0.37 0.7 0.56)

Munsell

7.5G 6.6/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #38B48B;
  background-color: oklch(0.692 0.124 166.7);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.37 0.7 0.56);
  }
}

コントラストチェッカー

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

サンプル

白背景

2.60:1

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

黒背景

8.07:1

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

白文字

2.60:1

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

黒文字

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

赤色の感度が低下

#B0A889

D型(2型)

緑色の感度が低下

#9F9C8E

T型(3型)

青色の感度が低下

#00B5A9

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #38B48B, #FFFFFF);
#38B48B
#60C3A2
#88D2B9
#AFE1D1
#D7F0E8
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #38B48B, #000000);
#38B48B
#2D906F
#226C53
#164838
#0B241C
#000000

透明へ

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

エクスポート

CSS変数
--color-hisuiiro: #38B48B;
--color-hisuiiro-rgb: 56, 180, 139;
--color-hisuiiro-oklch: 0.692 0.124 166.7;
Sass変数
$color-hisuiiro: #38B48B;
$color-hisuiiro-rgb: rgb(56, 180, 139);
$color-hisuiiro-oklch: oklch(0.692 0.124 166.7);
Tailwind Config
'hisuiiro': '#38B48B',
SwiftUI
Color(red: 0.220, green: 0.706, blue: 0.545)
JSON
{
  "name": {
    "ja": "翡翠色",
    "en": "Jade Green",
    "reading": "ひすいいろ"
  },
  "hex": "#38B48B",
  "rgb": {
    "r": 56,
    "g": 180,
    "b": 139
  },
  "cmyk": {
    "c": 69,
    "m": 0,
    "y": 23,
    "k": 29
  },
  "oklch": {
    "l": 0.692,
    "c": 0.124,
    "h": 166.7
  },
  "displayP3": {
    "r": 0.37,
    "g": 0.7,
    "b": 0.56
  },
  "hsv": {
    "h": 160,
    "s": 69,
    "v": 71
  },
  "munsell": "7.5G 6.6/8"
}

関連する色

他の文化圏の類似色