栗色

くりいろ | Chestnut Brown

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

広色域(Display P3)比較

sRGB(従来のWeb標準)

#762F07

Display P3(広色域)

color(display-p3 0.43 0.2 0.08)

意味と歴史

由来

秋に実る栗の鬼皮の深い赤褐色に由来する。縄文時代から日本人の重要な食糧であった栗は、実りの秋を象徴する身近な植物であり、その艶やかな茶色は日本の伝統色の中でも特に親しみ深い色である。

歴史

縄文時代の三内丸山遺跡からも栗の栽培痕が発見されており、日本人と栗の付き合いは数千年に及ぶ。栗の樹皮や渋皮を用いた栗染めは古代から行われ、堅牢で温かみのある染め色として重宝されてきた。

心理的効果

実りの喜び、温かみ、大地の力強さを感じさせる。深い赤褐色は秋の豊穣と自然の恵みを象徴し、堅実で落ち着いた印象を与えるとともに、幼い日の栗拾いの記憶など懐かしさを呼び覚ます色でもある。

伝統的な用途

秋の着物や帯の色として愛用され、漆器の栗色塗りや染め物にも広く用いられてきた。現代では髪色の表現「栗色の髪」としても定着し、秋冬のファッションやインテリアの定番カラーとなっている。

CSSコード

HEX

#762F07

RGB

rgb(118, 47, 7)

CMYK

cmyk(0%, 60%, 94%, 54%)

HSV

hsv(22, 94%, 46%)

OKLCH

oklch(0.4 0.11 44.3)

Display P3

color(display-p3 0.43 0.2 0.08)

Munsell

5YR 2.9/8

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #762F07;
  background-color: oklch(0.4 0.11 44.3);
}

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

コントラストチェッカー

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

サンプル

白背景

9.63:1

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

黒背景

2.18:1

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

白文字

9.63:1

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

黒文字

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

赤色の感度が低下

#443B01

D型(2型)

緑色の感度が低下

#554B04

T型(3型)

青色の感度が低下

#821D28

配色提案

補色

色相環の反対側

類似色

色相が近い色

トライアド

三角形の配色

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

補色の両隣

グラデーション

ティント(明るく)

background: linear-gradient(to right, #762F07, #FFFFFF);
#762F07
#915939
#AD826A
#C8AC9C
#E4D5CD
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #762F07, #000000);
#762F07
#5E2606
#471C04
#2F1303
#180901
#000000

透明へ

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

エクスポート

CSS変数
--color-kuriiro: #762F07;
--color-kuriiro-rgb: 118, 47, 7;
--color-kuriiro-oklch: 0.4 0.11 44.3;
Sass変数
$color-kuriiro: #762F07;
$color-kuriiro-rgb: rgb(118, 47, 7);
$color-kuriiro-oklch: oklch(0.4 0.11 44.3);
Tailwind Config
'kuriiro': '#762F07',
SwiftUI
Color(red: 0.463, green: 0.184, blue: 0.027)
JSON
{
  "name": {
    "ja": "栗色",
    "en": "Chestnut Brown",
    "reading": "くりいろ"
  },
  "hex": "#762F07",
  "rgb": {
    "r": 118,
    "g": 47,
    "b": 7
  },
  "cmyk": {
    "c": 0,
    "m": 60,
    "y": 94,
    "k": 54
  },
  "oklch": {
    "l": 0.4,
    "c": 0.11,
    "h": 44.3
  },
  "displayP3": {
    "r": 0.43,
    "g": 0.2,
    "b": 0.08
  },
  "hsv": {
    "h": 22,
    "s": 94,
    "v": 46
  },
  "munsell": "5YR 2.9/8"
}

関連する色

他の文化圏の類似色