白茶

しらちゃ | White Brown

日本の伝統色 茶系 江戸時代(1603-1868)

広色域(Display P3)比較

sRGB(従来のWeb標準)

#B3A68C

Display P3(広色域)

color(display-p3 0.69 0.65 0.56)

意味と歴史

由来

白みがかった極めて薄い茶色に由来する。「四十八茶」のひとつで、茶色の最も淡い段階に近い色調。白と茶の境界のような微妙な色合いは、素材本来の色味を活かした自然体の美しさを体現している。

歴史

江戸時代の「四十八茶百鼠」の文化から生まれた茶色のバリエーション。奢侈禁止令で派手な色が制限される中、茶色の極めて淡い段階の微妙な色合いを名づけて楽しむ、江戸庶民の繊細な色彩感覚が生んだ色である。

心理的効果

穏やかさ、上品さ、自然な温もりを感じさせる。白に近い柔らかな茶色は、漂白されない絹や和紙の自然な風合いを連想させ、素朴でありながら洗練された、侘び寂びの精神に通じる穏やかな美しさを伝える色である。

伝統的な用途

江戸庶民の着物や帯、茶道具の色合わせに用いられた。現代ではナチュラルカラーの代表として、オーガニック素材の衣料品やインテリアファブリックに広く採用され、自然体の美しさを求める人々に愛されている色である。

CSSコード

HEX

#B3A68C

RGB

rgb(179, 166, 140)

CMYK

cmyk(0%, 7%, 22%, 30%)

HSV

hsv(40, 22%, 70%)

OKLCH

oklch(0.729 0.039 84.6)

Display P3

color(display-p3 0.69 0.65 0.56)

Munsell

5Y 6.9/2

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #B3A68C;
  background-color: oklch(0.729 0.039 84.6);
}

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

コントラストチェッカー

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

サンプル

白背景

2.40:1

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

黒背景

8.75:1

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

白文字

2.40:1

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

黒文字

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

赤色の感度が低下

#ADA58A

D型(2型)

緑色の感度が低下

#B0A98D

T型(3型)

青色の感度が低下

#BAA19F

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #B3A68C, #FFFFFF);
#B3A68C
#C2B8A3
#D1CABA
#E1DBD1
#F0EDE8
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #B3A68C, #000000);
#B3A68C
#8F8570
#6B6454
#484238
#24211C
#000000

透明へ

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

エクスポート

CSS変数
--color-shiracha: #B3A68C;
--color-shiracha-rgb: 179, 166, 140;
--color-shiracha-oklch: 0.729 0.039 84.6;
Sass変数
$color-shiracha: #B3A68C;
$color-shiracha-rgb: rgb(179, 166, 140);
$color-shiracha-oklch: oklch(0.729 0.039 84.6);
Tailwind Config
'shiracha': '#B3A68C',
SwiftUI
Color(red: 0.702, green: 0.651, blue: 0.549)
JSON
{
  "name": {
    "ja": "白茶",
    "en": "White Brown",
    "reading": "しらちゃ"
  },
  "hex": "#B3A68C",
  "rgb": {
    "r": 179,
    "g": 166,
    "b": 140
  },
  "cmyk": {
    "c": 0,
    "m": 7,
    "y": 22,
    "k": 30
  },
  "oklch": {
    "l": 0.729,
    "c": 0.039,
    "h": 84.6
  },
  "displayP3": {
    "r": 0.69,
    "g": 0.65,
    "b": 0.56
  },
  "hsv": {
    "h": 40,
    "s": 22,
    "v": 70
  },
  "munsell": "5Y 6.9/2"
}

関連する色

他の文化圏の類似色