アンバー

Umber

西洋の伝統色 Brown バロック(17世紀)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#635147

Display P3(広色域)

color(display-p3 0.38 0.32 0.28)

意味と歴史

由来

イタリア・ウンブリア地方で採掘される天然土顔料アンバーに由来する暗い黄褐色。酸化鉄とマンガンを含む粘土鉱物であり、西洋絵画の最も基本的な褐色顔料の一つである。

歴史

先史時代の洞窟壁画から使用が確認される最古の顔料の一つであり、レンブラントのキアロスクーロ技法の暗部表現に不可欠であった。生(ロー)と焼成(バーント)の二種がある。

心理的効果

大地の最も深い層から掘り出された色が、人類の芸術の始まりと太古の地質学的時間を感じさせる。すべての表現の基盤となる根源的な褐色である。

伝統的な用途

油彩・水彩画の基本色(ローアンバーとバーントアンバー)、レンブラントのキアロスクーロ技法、建築の外壁色、アンティーク家具の仕上げに使用される。

CSSコード

HEX

#635147

RGB

rgb(99, 81, 71)

CMYK

cmyk(0%, 18%, 28%, 61%)

HSV

hsv(21, 28%, 39%)

OKLCH

oklch(0.45 0.029 50.6)

Display P3

color(display-p3 0.38 0.32 0.28)

Munsell

5YR 3.6/2

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #635147;
  background-color: oklch(0.45 0.029 50.6);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.38 0.32 0.28);
  }
}

コントラストチェッカー

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

サンプル

白背景

7.50:1

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

黒背景

2.80:1

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

白文字

7.50:1

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

黒文字

2.80:1

AA Fail AAA Fail
AA大文字 Fail

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — 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型)

赤色の感度が低下

#565246

D型(2型)

緑色の感度が低下

#5A5647

T型(3型)

青色の感度が低下

#684E4E

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #635147, #FFFFFF);
#635147
#82746C
#A19791
#C1B9B5
#E0DCDA
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #635147, #000000);
#635147
#4F4139
#3B312B
#28201C
#14100E
#000000

透明へ

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

エクスポート

CSS変数
--color-umber: #635147;
--color-umber-rgb: 99, 81, 71;
--color-umber-oklch: 0.45 0.029 50.6;
Sass変数
$color-umber: #635147;
$color-umber-rgb: rgb(99, 81, 71);
$color-umber-oklch: oklch(0.45 0.029 50.6);
Tailwind Config
'umber': '#635147',
SwiftUI
Color(red: 0.388, green: 0.318, blue: 0.278)
JSON
{
  "name": {
    "ja": "アンバー",
    "en": "Umber"
  },
  "hex": "#635147",
  "rgb": {
    "r": 99,
    "g": 81,
    "b": 71
  },
  "cmyk": {
    "c": 0,
    "m": 18,
    "y": 28,
    "k": 61
  },
  "oklch": {
    "l": 0.45,
    "c": 0.029,
    "h": 50.6
  },
  "displayP3": {
    "r": 0.38,
    "g": 0.32,
    "b": 0.28
  },
  "hsv": {
    "h": 21,
    "s": 28,
    "v": 39
  },
  "munsell": "5YR 3.6/2"
}

関連する色

他の文化圏の類似色