檜皮色
ひわだいろ|Hiwada-iro
色コードの出典:檜皮色 - 和色大辞典
広色域（Display P3）比較
sRGB（従来のWeb標準）
#965036
Display P3（広色域）
color(display-p3 0.5518 0.3276 0.2337)
意味と歴史
CSSコード
HEX
#965036RGB
rgb(150, 80, 54)CMYK
cmyk(0%, 46.7%, 64%, 41.2%)HSV
hsv(16.2, 64%, 58.8%)OKLCH
oklch(50.99% 0.1014 40.76)Display P3
color(display-p3 0.5518 0.3276 0.2337)Munsell
CIE XYZ
XYZ(0.16113, 0.12489, 0.05051)CIE L*a*b*
Lab(41.983665, 26.798815, 28.107255)CIE LCH(ab)
LCH(41.983665, 38.835477, 46.36513°)CIE L*u*v*
Luv(41.983665, 52.9394, 25.021879)Hunter Lab
Hunter Lab(35.340404, 21.762693, 14.927048)xyY
xyY(0.478793, 0.371109, 0.12489)JzAzBz
JzAzBz(0.011206, 0.004794, 0.004958)JzCzHz
JzCzHz(0.011206, 0.006897, 45.963456°)フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #965036;
background-color: oklch(50.99% 0.1014 40.76);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.5518 0.3276 0.2337);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
6.00:1
AA PassAAA Fail
AA大文字 Pass
黒背景
3.50:1
AA FailAAA Fail
AA大文字 Pass
白文字
6.00:1
AA PassAAA Fail
AA大文字 Pass
黒文字
3.50:1
AA FailAAA Fail
AA大文字 Pass
配色シミュレーター
この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。
背景色として使用
テキスト色として使用
UIコンポーネントでの使用例
色覚シミュレーション
P型（1型）
赤色の感度が低下
#625A34
D型（2型）
緑色の感度が低下
#736935
T型（3型）
青色の感度が低下
#A4434A
配色提案
この色の配色提案は、日本の伝統的な「かさねの色目」や「しきたり」の美意識に基づき、同じ文化圏の伝統色から最も近い調和色を選出しています。
補色
Complementary色相環の反対側に位置する色。最も強いコントラストを生む
#965036
#00728E
類似色
Analogous色相が近い色の組み合わせ。自然で調和的な印象を与える
#965036
#964B58
#8A5B15
トライアド
Triadic色相環を三等分する配色。活力がありバランスの良い組み合わせ
#965036
#1F7852
#5C5E9F
スプリットコンプリメンタリー
Split-complementary補色の両隣を使う配色。補色より柔らかいコントラスト
#965036
#007874
#35699E
テトラディック（正方形）
Tetradic (Square)色相環を四等分する配色。豊かな色彩で華やかな印象
#965036
#51722F
#00728E
#785491
テトラディック（長方形）
Tetradic (Rectangle)二対の補色を組み合わせた配色。多彩ながらまとまりのある配色
#965036
#73670E
#00728E
#5C5E9F
モノクロマティック
Monochromatic同じ色相で明度・彩度を変えた配色。統一感のある上品な印象
#965036
#BE978A
#6E1D00
#AD725D
ダブルコンプリメンタリー
Double Complementary隣り合う二色とその補色による四色配色。複雑で魅力的な配色
#965036
#8A5B15
#00728E
#35699E
グラデーション
ティント（明るく）
background: linear-gradient(to right, #965036, #FFFFFF);#965036
#AB735E
#C09686
#D5B9AF
#EADCD7
#FFFFFF
シェード（暗く）
background: linear-gradient(to right, #965036, #000000);#965036
#78402B
#5A3020
#3C2016
#1E100B
#000000
透明へ
background: linear-gradient(to right, #965036, transparent);エクスポート
CSS変数
--color-hiwadairo: #965036;
--color-hiwadairo-rgb: 150, 80, 54;
--color-hiwadairo-oklch: 50.99% 0.1014 40.76;Sass変数
$color-hiwadairo: #965036;
$color-hiwadairo-rgb: rgb(150, 80, 54);
$color-hiwadairo-oklch: oklch(50.99% 0.1014 40.76);Tailwind Config
'hiwadairo': '#965036',SwiftUI
Color(red: 0.588, green: 0.314, blue: 0.212)JSON
{
"name": {
"ja": "檜皮色",
"en": "Hiwada-iro",
"reading": "ひわだいろ"
},
"hex": "#965036",
"rgb": {
"r": 150,
"g": 80,
"b": 54
},
"cmyk": {
"c": 0,
"m": 46.7,
"y": 64,
"k": 41.2
},
"oklch": {
"l": 50.99,
"c": 0.1014,
"h": 40.76
},
"displayP3": {
"r": 0.5518,
"g": 0.3276,
"b": 0.2337
},
"hsv": {
"h": 16.2,
"s": 64,
"v": 58.8
},
"munsell": ""
}