<style>
h1 { color: #6b3e26; }
</style>
<h1>Заголовок</h1>

<style>
body { background-color: #fdf6ec; }
</style>
<p>Фон цвета сливок</p>

<style>
.a { color: #c8763a; } .b { color: #c8763a80; }
</style>
<p class="a">Корица</p><p class="b">Корица 50%</p>

<style>
p { background: rgb(107 62 38 / 20%); padding: 8px; }
</style>
<p>Плашка 20%</p>

<style>
.a { color: hsl(25 48% 28%); } .b { color: hsl(25 48% 55%); }
</style>
<p class="a">Тёмный</p><p class="b">Светлее</p>

<style>
.a { color: oklch(45% 0.08 50); } .b { color: oklch(70% 0.12 50); }
</style>
<p class="a">Шоколад</p><p class="b">Карамель</p>

<style>
button { color: #c8763a; border: 2px solid currentColor; }
</style>
<button>Заказать</button>

<style>
.off { opacity: 0.4; }
</style>
<p>Доступно</p><p class="off">Закончилось</p>

<style>
p { background: color-mix(in oklch, #6b3e26 25%, white); padding: 8px; }
</style>
<p>Смешанный оттенок</p>