ホイアンイエロー

Hoi An Yellow

東南アジアの伝統色 Yellow 東南アジアの伝統色

広色域(Display P3)比較

sRGB(従来のWeb標準)

#FFDB58

Display P3(広色域)

color(display-p3 0.98 0.86 0.43)

意味と歴史

由来

ベトナム中部ホイアンの歴史的建物の特徴的な黄色い壁の色。世界遺産の古い街並み。

歴史

ホイアンは16-17世紀に日本・中国・ポルトガルの商人が集った国際交易港。黄色い壁の建物が並ぶ旧市街は1999年にユネスコ世界遺産に登録。

心理的効果

ノスタルジー・国際交流・歴史の層を象徴し、ランタンに照らされた黄色い壁の夜景が伝える時間の美。

伝統的な用途

ベトナムの観光デザインやホイアンにインスパイアされたインテリアの象徴的な黄色。

CSSコード

HEX

#FFDB58

RGB

rgb(255, 219, 88)

CMYK

cmyk(0%, 14%, 65%, 0%)

HSV

hsv(47, 65%, 100%)

OKLCH

oklch(0.898 0.151 93.7)

Display P3

color(display-p3 0.98 0.86 0.43)

Munsell

7.5Y 8.8/12

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #FFDB58;
  background-color: oklch(0.898 0.151 93.7);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.98 0.86 0.43);
  }
}

コントラストチェッカー

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

サンプル

白背景

1.35:1

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

黒背景

15.53:1

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

白文字

1.35:1

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

黒文字

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

赤色の感度が低下

#F1D748

D型(2型)

緑色の感度が低下

#FAE25E

T型(3型)

青色の感度が低下

#FFCBC0

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #FFDB58, #FFFFFF);
#FFDB58
#FFE279
#FFE99B
#FFF1BC
#FFF8DE
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #FFDB58, #000000);
#FFDB58
#CCAF46
#998335
#665823
#332C12
#000000

透明へ

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

エクスポート

CSS変数
--color-hoi_an_yellow: #FFDB58;
--color-hoi_an_yellow-rgb: 255, 219, 88;
--color-hoi_an_yellow-oklch: 0.898 0.151 93.7;
Sass変数
$color-hoi_an_yellow: #FFDB58;
$color-hoi_an_yellow-rgb: rgb(255, 219, 88);
$color-hoi_an_yellow-oklch: oklch(0.898 0.151 93.7);
Tailwind Config
'hoi_an_yellow': '#FFDB58',
SwiftUI
Color(red: 1.000, green: 0.859, blue: 0.345)
JSON
{
  "name": {
    "ja": "ホイアンイエロー",
    "en": "Hoi An Yellow"
  },
  "hex": "#FFDB58",
  "rgb": {
    "r": 255,
    "g": 219,
    "b": 88
  },
  "cmyk": {
    "c": 0,
    "m": 14,
    "y": 65,
    "k": 0
  },
  "oklch": {
    "l": 0.898,
    "c": 0.151,
    "h": 93.7
  },
  "displayP3": {
    "r": 0.98,
    "g": 0.86,
    "b": 0.43
  },
  "hsv": {
    "h": 47,
    "s": 65,
    "v": 100
  },
  "munsell": "7.5Y 8.8/12"
}

関連する色

他の文化圏の類似色