Layered lighting

레이어드 조명

Lighting a room in three overlapping layers — ambient (overall), task (work) and accent (highlight) — instead of relying on one fixture. Switching a layer on or off changes what the space is for.

Also known as: Ambient/task/accent lighting3-layer lighting
···
html
<div class="room">
<svg viewBox="0 0 400 250">
  <defs>
    <radialGradient id="ambGrad" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#fff3d6" stop-opacity="0.55"/>
      <stop offset="100%" stop-color="#fff3d6" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <rect width="400" height="250" fill="#0b0b10"/>
  <rect y="190" width="400" height="60" fill="#141419"/>
  <ellipse id="ambientGlow" class="glow" cx="200" cy="70" rx="220" ry="140" fill="url(#ambGrad)"/>
  <line x1="200" y1="0" x2="200" y2="26" stroke="#555" stroke-width="2"/>
  <circle id="ambientBulb" class="bulb" cx="200" cy="30" r="9"/>
  <rect x="46" y="182" width="34" height="10" rx="2" fill="#2a2a33"/>
  <path d="M63,182 L63,150" stroke="#555" stroke-width="3"/>
  <path id="taskCone" class="cone" d="M63,150 L34,192 L92,192 Z"/>
  <circle id="taskBulb" class="bulb small" cx="63" cy="150" r="6"/>
  <rect x="316" y="70" width="60" height="76" rx="2" fill="#20202a" stroke="#3a3a44" stroke-width="2"/>
  <rect x="326" y="80" width="40" height="56" rx="1" fill="#333"/>
  <path id="accentCone" class="cone accent" d="M300,40 L306,146 L392,146 L370,40 Z"/>
</svg>
</div>
css
.room{width:min(92%,480px);aspect-ratio:400/250}
.room svg{width:100%;height:100%;display:block}
.bulb{fill:#3a3a44}
.glow{opacity:0;transition:opacity .6s}
.glow.lit{opacity:1}
.cone{fill:#ffdca0;opacity:0;transition:opacity .6s}
.cone.lit{opacity:.85}
.bulb.lit{fill:#ffe9b0}
js
const ambientGlow = document.getElementById('ambientGlow');
const ambientBulb = document.getElementById('ambientBulb');
const taskCone = document.getElementById('taskCone');
const taskBulb = document.getElementById('taskBulb');
const accentCone = document.getElementById('accentCone');
const amb = [ambientGlow, ambientBulb];
const task = [taskCone, taskBulb];
const acc = [accentCone];
function set(objs, on) {
  objs.forEach((o) => o.classList.toggle('lit', on));
}
const steps = [
  () => { set(amb, true); set(task, false); set(acc, false); },
  () => { set(amb, true); set(task, true); set(acc, false); },
  () => { set(amb, true); set(task, true); set(acc, true); },
  () => { set(amb, false); set(task, false); set(acc, false); },
];
let i = 0;
steps[0]();
setInterval(() => { i = (i + 1) % steps.length; steps[i](); }, 1400);

A single ceiling fixture lighting an entire room flattens every shadow and leaves no way to adjust the mood. Layered lighting plans three kinds of light for three different jobs, so a layer can be added or removed depending on what's happening in the room.

Ambient light is the room's baseline — a ceiling fixture or an indirect cove light. Task light is the bright, localized light needed to read or cook: a desk lamp, a pendant over a counter, under-cabinet strips. Accent light draws the eye to one specific thing — a painting, a textured wall — and can look more prominent than its surroundings even at a lower actual output, simply because it's aimed so narrowly.

If all three layers land at the same brightness the hierarchy disappears and the room feels flat. A common rule of thumb is accent brighter than task brighter than ambient in that one spot, with each layer on its own dimmer so it can be toggled independently.

When to use

Use it for living rooms and studies where the same space serves different purposes through the day. If a room only has ambient light, adding a task light first is usually the change that's felt the most.