アチオテオレンジ
あちおておれんじ | Achiote Orange | Achiote / Urucum
広色域(Display P3)比較
sRGB(従来のWeb標準)
#8C5341
Display P3(広色域)
color(display-p3 0.544716 0.325487 0.254892)
意味と歴史
由来
アチオテオレンジはベニノキ(Bixa orellana)の種子の外皮に含まれるカロテノイド系色素ビキシン・ノルビキシンに由来する橙赤色である。ナワトル語ではachiotl、ポルトガル語圏ではurucum(ウルクン)と呼ばれる中南米原産の天然色素である。
歴史
中南米の先住民族は紀元前3000年頃から身体彩色や戦具の染色にアチオテの実を使用してきた。16世紀にスペイン・ポルトガルの植民者によってヨーロッパに持ち込まれ、フランスの文献(1659年、ロシュフォール)にも早期の記録が残されている。
CSSコード
HEX
#8C5341 RGB
rgb(140, 83, 65) CMYK
cmyk(0%, 40.71%, 53.57%, 45.1%) HSV
hsv(14.4, 53.57%, 54.9%) OKLCH
oklch(50.34% 0.0816 38.29) Display P3
color(display-p3 0.544716 0.325487 0.254892) Munsell
7.5YR 4/6 CIE XYZ
XYZ(0.148636, 0.12145, 0.065614) CIE L*a*b*
Lab(41.445624, 21.769163, 20.633381) CIE LCH(ab)
LCH(41.445624, 29.99388, 43.465659°) CIE L*u*v*
Luv(41.445624, 41.214139, 19.40599) Hunter Lab
Hunter Lab(34.849651, 15.144251, 13.231761) xyY
xyY(0.442764, 0.361781, 0.12145) JzAzBz
JzAzBz(0.00084, -0.007896, 0.033088) JzCzHz
JzCzHz(0.00084, 0.034017, 103.421418°) フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #8C5341;
background-color: oklch(50.34% 0.0816 38.29);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.544716 0.325487 0.254892);
}
} コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
6.12:1
黒背景
3.43:1
白文字
6.12:1
黒文字
3.43:1
配色シミュレーター
この色を背景やテキストに使用した場合のプレビューです。
白テキスト — 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.
色覚シミュレーション
P型(1型)
赤色の感度が低下
#615A3F
D型(2型)
緑色の感度が低下
#6F6640
T型(3型)
青色の感度が低下
#984A4E
配色提案
この配色はマヤ・アステカの宇宙観に基づく色彩体系と、アンデス織物の伝統的な配色パターンを参照しています。
補色
Complementary色相環の反対側に位置する色。最も強いコントラストを生む
類似色
Analogous色相が近い色の組み合わせ。自然で調和的な印象を与える
トライアド
Triadic色相環を三等分する配色。活力がありバランスの良い組み合わせ
スプリットコンプリメンタリー
Split-complementary補色の両隣を使う配色。補色より柔らかいコントラスト
テトラディック(正方形)
Tetradic (Square)色相環を四等分する配色。豊かな色彩で華やかな印象
テトラディック(長方形)
Tetradic (Rectangle)二対の補色を組み合わせた配色。多彩ながらまとまりのある配色
モノクロマティック
Monochromatic同じ色相で明度・彩度を変えた配色。統一感のある上品な印象
ダブルコンプリメンタリー
Double Complementary隣り合う二色とその補色による四色配色。複雑で魅力的な配色
グラデーション
ティント(明るく)
background: linear-gradient(to right, #8C5341, #FFFFFF); シェード(暗く)
background: linear-gradient(to right, #8C5341, #000000); 透明へ
background: linear-gradient(to right, #8C5341, transparent); エクスポート
--color-achiote_orange: #8C5341;
--color-achiote_orange-rgb: 140, 83, 65;
--color-achiote_orange-oklch: 50.34% 0.0816 38.29; $color-achiote_orange: #8C5341;
$color-achiote_orange-rgb: rgb(140, 83, 65);
$color-achiote_orange-oklch: oklch(50.34% 0.0816 38.29); 'achiote_orange': '#8C5341', Color(red: 0.549, green: 0.325, blue: 0.255) {
"name": {
"ja": "アチオテオレンジ",
"en": "Achiote Orange",
"reading": "あちおておれんじ",
"local": "Achiote / Urucum"
},
"hex": "#8C5341",
"rgb": {
"r": 140,
"g": 83,
"b": 65
},
"cmyk": {
"c": 0,
"m": 40.71,
"y": 53.57,
"k": 45.1
},
"oklch": {
"l": 50.34,
"c": 0.0816,
"h": 38.29
},
"displayP3": {
"r": 0.544716,
"g": 0.325487,
"b": 0.254892
},
"hsv": {
"h": 14.4,
"s": 53.57,
"v": 54.9
},
"munsell": "7.5YR 4/6"
}