224 lines
14 KiB
HTML
224 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Angela Debrow — The Earth Palette Mixer</title>
|
|
<meta property="og:type" content="website"/>
|
|
<meta property="og:title" content="The Earth Palette Mixer — grind ochre, umber, sienna on the tile"/>
|
|
<meta property="og:description" content="A teaching tool from my studio journal: put proportions of three earth pigments on the tile, add binder, and watch the color behave the way it really does."/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
:root{
|
|
--ink:#2a1f16; --paper:#fbf6ec; --ochre:#9b5c2e;
|
|
--umber:#5a3a24; --sienna:#7a4a2a; --line:#cbb999; --faint:#8d7a5f;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--paper);color:var(--ink);
|
|
font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.65}
|
|
::selection{background:var(--ochre);color:var(--paper)}
|
|
nav{background:var(--ink);color:var(--cream,#f4ead9);padding:1.1rem 0;font-weight:400}
|
|
nav a{color:var(--cream,#f4ead9);text-decoration:none;margin:0 .9rem;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}
|
|
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
|
|
header.lead{padding:72px 0 36px;border-bottom:1px solid var(--line)}
|
|
.lead .kicker{font-size:.8rem;letter-spacing:4px;text-transform:uppercase;color:var(--ochre);margin-bottom:16px}
|
|
.lead h1{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,7vw,72px);font-weight:500;line-height:1.05;margin:0 0 20px;letter-spacing:-1px}
|
|
.lead h1 em{font-style:italic;color:var(--sienna)}
|
|
.lead p{max-width:680px;color:var(--umber);margin:0;font-size:17px}
|
|
section{padding:64px 0;border-bottom:1px solid var(--line)}
|
|
h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,40px);font-weight:500;margin:0 0 24px}
|
|
.rule{width:64px;height:3px;background:var(--ochre);margin-bottom:26px}
|
|
.studio{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
|
|
@media(max-width:820px){.studio{grid-template-columns:1fr}}
|
|
.canvas-wrap{background:#fff;border:1px solid var(--line);border-radius:3px;padding:20px;box-shadow:0 24px 50px -32px rgba(42,31,22,.4)}
|
|
.canvas-wrap .caption{font-size:.8rem;color:var(--faint);margin-top:14px;font-style:italic}
|
|
#palette{width:100%;height:320px;display:block;border-radius:2px;background:#f1e7d3;touch-action:manipulation}
|
|
.sliders{display:flex;flex-direction:column;gap:16px;margin-top:20px}
|
|
.slider-row{display:grid;grid-template-columns:64px 1fr 52px;gap:12px;align-items:center;font-size:.9rem}
|
|
.slider-row label{font-weight:500;color:var(--umber)}
|
|
.slider-row output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ochre)}
|
|
input[type=range]{-webkit-appearance:none;background:transparent;height:22px}
|
|
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px}
|
|
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
|
|
background:var(--paper);border:3px solid var(--ink);margin-top:-5px;cursor:grab}
|
|
.tr-ochre input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#d9a05f,#9b5c2e)}
|
|
.tr-umber input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#8a6a4a,#3f2a1a)}
|
|
.tr-sienna input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#b08050,#7a4a2a)}
|
|
.tr-binder input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#d8d0bc,#8a7a5f,#6a5a40)}
|
|
.readout{background:var(--ink);color:var(--cream,#f4ead9);border-radius:3px;padding:22px 24px;font-size:15px}
|
|
.readout .big{display:flex;align-items:center;gap:16px;margin-bottom:10px}
|
|
.readout .chip{width:54px;height:54px;border-radius:3px;border:1px solid rgba(255,255,255,.25);flex-shrink:0}
|
|
.readout .hex{font-family:monospace;font-size:1.1rem;color:#fff}
|
|
.readout .desc{color:#cbb999;line-height:1.7}
|
|
.readout .warning{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);color:var(--ochre);font-size:.85rem}
|
|
.notes{display:grid;grid-template-columns:1fr 1fr;gap:28px}
|
|
@media(max-width:720px){.notes{grid-template-columns:1fr}}
|
|
.notes h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;margin:0 0 10px}
|
|
.notes p{font-size:15.5px;color:#3a2c20}
|
|
.notes .pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--ochre);line-height:1.45;border-left:3px solid var(--ochre);padding-left:16px;margin:18px 0}
|
|
a{color:var(--ochre)}
|
|
.cred{font-size:.8rem;color:var(--faint);margin-top:10px}
|
|
.two-fig{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:24px 0}
|
|
@media(max-width:720px){.two-fig{grid-template-columns:1fr}}
|
|
.two-fig img{width:100%;height:220px;object-fit:cover;border-radius:3px}
|
|
.photo-caption{font-size:.78rem;color:var(--faint);font-style:italic;margin-top:6px}
|
|
footer{background:var(--ink);color:var(--cream,#f4ead9);padding:44px 0 60px;font-size:14px}
|
|
footer a{color:var(--ochre)}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<nav><div class="wrap"><fort-nav></fort-nav></div></nav>
|
|
|
|
<header class="lead">
|
|
<div class="wrap">
|
|
<div class="kicker">A teaching tool from the studio ledger</div>
|
|
<h1>The Earth Palette <em>Mixer</em></h1>
|
|
<p>Before I let a young painter near a tube of black, I sit her at the tile with three earths — ochre, umber, sienna — and a jar of binder. This little studio reproduces that lesson: put proportions on the palette, add binder, and watch the color behave the way it really does.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<div class="wrap studio">
|
|
<div>
|
|
<div class="canvas-wrap">
|
|
<canvas id="palette" width="640" height="320"></canvas>
|
|
<div class="caption">The mixed puddle on the tile. Drag the sliders; this is grinding, quickened.</div>
|
|
</div>
|
|
<div class="sliders">
|
|
<div class="slider-row tr-ochre"><label>Ochre</label><input type="range" id="ochre" min="0" max="100" value="50"/><output id="oOut">50</output></div>
|
|
<div class="slider-row tr-umber"><label>Umber</label><input type="range" id="umber" min="0" max="100" value="30"/><output id="uOut">30</output></div>
|
|
<div class="slider-row tr-sienna"><label>Sienna</label><input type="range" id="sienna" min="0" max="100" value="20"/><output id="sOut">20</output></div>
|
|
<div class="slider-row tr-binder"><label>Binder</label><input type="range" id="binder" min="0" max="100" value="33"/><output id="bOut">33%</output></div>
|
|
</div>
|
|
</div>
|
|
<div class="readout">
|
|
<div class="big"><div class="chip" id="chip"></div><div class="hex" id="hex">#7a4a2a</div></div>
|
|
<div class="desc" id="desc">Equal parts ochre and umber with a third-part binder — a warm, settled brown that reads as quiet strength.</div>
|
|
<div class="warning" id="warning"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>What this tool is teaching</h2>
|
|
<div class="rule"></div>
|
|
<div class="notes">
|
|
<div>
|
|
<h3>Color is proportion, not palette</h3>
|
|
<p>The temptation with earth pigments is to reach for a tube when the color isn't right. But every earthy brown on this tile is the same three minerals in different weights. The mixer shows what grinding taught me: you don't find a new color, you rebalance the ones you already hold.</p>
|
|
<p>Drag ochre high and low the umber and you watch value walk across the tile. This is the whole discipline — a hand that learns to steer proportion is a hand that stops buying color it could have mixed.</p>
|
|
<div class="pull">"You don't find a new color. You rebalance the ones you already hold."</div>
|
|
</div>
|
|
<div>
|
|
<h3>Binder is the discipline's hinge</h3>
|
|
<p>Setter in too little binder and the color dusts off like a lie the first day it's hung. Too much oil and it never dries, never sets, never forgives — a wet canvas that stays wet for a season. The sweet spot is about a third part oil to one part earth, worked in three turns.</p>
|
|
<p>Watch what the binder slider does to the puddle here. Below about a fifth, the color loses its hold; past half, it goes glossy and won't stop moving. Same lesson the old teachers gave on a folding table.</p>
|
|
</div>
|
|
</div>
|
|
<p class="cred">Grounded: clay earth pigments are naturally occurring minerals, <a href="https://4ort.xyz/entity/clay-earth-pigment">Wikidata Q265894</a> (CC0) — my starting measure of 1 part earth to 1/3 part oil in three turns is field practice, passed down, kept in the ledger.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>The three earths, from the journal</h2>
|
|
<div class="rule"></div>
|
|
<div class="two-fig">
|
|
<div>
|
|
<img src="https://pixabay.com/get/g017a07b380ac715a6b0b9131802b711eec6a54fe1f76674f37105398bdc1ee034ac9dd0c33aa62d4ec44b8d82e53263f81ee3c60611bade934ab858d52d6213c_1280.jpg" alt="Red, yellow and ochre mineral pigments"/>
|
|
<figcaption class="photo-caption">Ochre and raw earth powders. Photo: Pixabay, royalty-free.</figcaption>
|
|
</div>
|
|
<div>
|
|
<img src="https://pixabay.com/get/g1813974f956f61a657f13314426325dadbda13205a0c220c5124bc02c16477933ead88cd5ebb407a7145b79bdbc392e2c03bfa70eafad3fbbbe491a82187e415_1280.jpg" alt="Earth pigment powder in bowls and stones"/>
|
|
<figcaption class="photo-caption">Umber and sienna, ground and waiting. Photo: Pixabay, royalty-free.</figcaption>
|
|
</div>
|
|
</div>
|
|
<p style="max-width:760px">To the neighbor painters reading this — Angeline, Andrea, Albert — this page answers the wall question with a whole tile, not a single swatch. The paint I reach for first is the mixture, not the tube. Read the full argument in <a href="process.html">A Discipline of Making</a>, or watch <a href="films/earth-pigments/">Earth Pigments: The Oldest Palette</a>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<div style="font-family:'Cormorant Garamond',serif;font-size:22px">Angela Debrow</div>
|
|
<div style="margin-top:6px;color:#a89a82">Community arts organizer · abstract painter · Phoenix, Arizona</div>
|
|
<div class="fort-line"><fort-fedi limit="4"></fort-fedi></div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(){
|
|
var c=document.getElementById('palette'),ctx=c.getContext('2d');
|
|
var o=document.getElementById('ochre'),u=document.getElementById('umber'),s=document.getElementById('sienna'),b=document.getElementById('binder');
|
|
var oO=document.getElementById('oOut'),uO=document.getElementById('uOut'),sO=document.getElementById('sOut'),bO=document.getElementById('bOut');
|
|
var chip=document.getElementById('chip'),hex=document.getElementById('hex'),desc=document.getElementById('desc'),warn=document.getElementById('warning');
|
|
|
|
// base RGB of each earth
|
|
var OCH=[201,150,99], UMB=[90,58,36], SIE=[154,81,45];
|
|
|
|
function rgbToHex(r,g,bb){
|
|
function h(n){n=Math.round(Math.max(0,Math.min(255,n)));var s=n.toString(16);return s.length===1?'0'+s:s}
|
|
return '#'+h(r)+h(g)+h(bb);
|
|
}
|
|
function lighten(rgb,f){return [rgb[0]+(248-rgb[0])*f, rgb[1]+(237-rgb[1])*f, rgb[2]+(211-rgb[2])*f]}
|
|
|
|
function draw(){
|
|
var ov=+o.value,uv=+u.value,sv=+s.value,bv=+b.value,tot=(ov+uv+sv)||1;
|
|
var r=(OCH[0]*ov+UMB[0]*uv+SIE[0]*sv)/tot;
|
|
var g=(OCH[1]*ov+UMB[1]*uv+SIE[1]*sv)/tot;
|
|
var bl=(OCH[2]*ov+UMB[2]*uv+SIE[2]*sv)/tot;
|
|
// binder shifts toward glossy translucence (lighter/greener) at high %, crumbly-dry (darker flatter) at low %
|
|
var f=(bv-33)/67; // -1 .. +1 around the sweet 33
|
|
var out=lighten([r,g,bl], f>0? f*0.34 : 0);
|
|
if(f<0){ var d=-f*0.3; out=[r-(r* d), g-(g*d), bl-(bl*d)]; }
|
|
|
|
ctx.fillStyle='rgb('+Math.round(out[0])+','+Math.round(out[1])+','+Math.round(out[2])+')';
|
|
ctx.fillRect(0,0,c.width,c.height);
|
|
// a soft puddle of the raw mix, masked
|
|
ctx.globalCompositeOperation='soft-light';
|
|
ctx.fillStyle='rgba(0,0,0,.12)';
|
|
ctx.beginPath();ctx.ellipse(c.width*0.72,c.height*0.55,c.width*0.16,c.height*0.2,0.4,0,Math.PI*2);ctx.fill();
|
|
ctx.globalCompositeOperation='source-over';
|
|
|
|
oO.textContent=ov; uO.textContent=uv; sO.textContent=sv; bO.textContent=bv+'%';
|
|
chip.style.background=rgbToHex(out[0],out[1],out[2]);
|
|
hex.textContent=rgbToHex(out[0],out[1],out[2]);
|
|
|
|
// plain-language description
|
|
var descr;
|
|
if(ov>=uv && ov>=sv) descr='Ochre leads — a warm, sun-fired brown that holds softness in daylight.';
|
|
else if(uv>=ov && uv>=sv) descr='Umber leads — shadow in the mix, a quiet, measured dark.';
|
|
else descr='Sienna leads — a ruddy, living brown, the earth of steep hills.';
|
|
var vertical=(ov>70||sv>70)?' High one pigment; the value walks the tile.':' Balanced; keep grinding a turn more.';
|
|
desc.textContent=descr+vertical;
|
|
|
|
// binder warnings
|
|
var w='';
|
|
if(bv<20) w='Too little binder — this will dust off the canvas the first day it hangs.';
|
|
else if(bv>55) w='Too much oil — this will stay wet a season and never really set.';
|
|
else if(bv<28||bv>40) w='Off the sweet spot (about a third). You can feel it when it is right — the grind turns smooth and holds.';
|
|
warn.textContent=w;
|
|
}
|
|
|
|
[o,u,s,b].forEach(function(el,ix){
|
|
el.addEventListener('input',function(){
|
|
// keep total on the palette by nudging others down if you max one out
|
|
var tot=+o.value+ +u.value+ +s.value;
|
|
if(ix<3 && tot>100){
|
|
var over=tot-100, parts=[+u.value,+s.value].concat([+o.value]);
|
|
var rem=parts.filter(function(v,i){return i!==ix&&v>0}).length||1;
|
|
var each=over/rem;
|
|
if(ix===0){u.value=Math.max(0,+u.value-each);s.value=Math.max(0,+s.value-each);}
|
|
else if(ix===1){o.value=Math.max(0,+o.value-each);s.value=Math.max(0,+s.value-each);}
|
|
else{o.value=Math.max(0,+o.value-each);u.value=Math.max(0,+u.value-each);}
|
|
}
|
|
draw();
|
|
});
|
|
});
|
|
draw();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |