Design Atlas
한국어
◐ Color

Neon palette

네온 팔레트

Colors pushed to near-maximum saturation and paired with a dark background — add a glow and they read as if they are actually emitting light.

Also known as: Neon colors형광색 팔레트
···
html
<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="badge" id="badge">LIVE</div>
</div>
css
.wrap{width:min(440px,92%);display:grid;gap:clamp(14px,3.6vmin,22px);justify-items:center}
.sws{display:flex;gap:clamp(8px,2.4vmin,14px)}
.sws i{display:block;width:clamp(24px,7vmin,36px);height:clamp(24px,7vmin,36px);border-radius:8px}
.badge{padding:clamp(8px,2.2vmin,12px) clamp(18px,4.6vmin,26px);border-radius:999px;background:#0a0a10;border:2px solid;font:900 clamp(13px,3.4vmin,17px)/1 ui-monospace,monospace;letter-spacing:.08em;transition:box-shadow .3s,border-color .3s,color .3s}
js
var COLORS = ['#39ff14', '#ff2ec4', '#00e5ff', '#ffea00', '#ff3860'];
var idx = 0;
var sws = document.getElementById('sws');
sws.innerHTML = COLORS.map(function (_, i) { return '<i id="c' + i + '"></i>'; }).join('');
var cells = COLORS.map(function (_, i) { return document.getElementById('c' + i); });
var badge = document.getElementById('badge');
function render() {
  cells.forEach(function (el, i) { el.style.background = COLORS[i]; el.style.boxShadow = '0 0 ' + (i === idx ? '18px' : '6px') + ' ' + COLORS[i]; });
  var c = COLORS[idx];
  badge.style.color = c;
  badge.style.borderColor = c;
  badge.style.boxShadow = '0 0 6px ' + c + ', 0 0 22px ' + c + ', 0 0 46px ' + c + '55';
}
render();
setInterval(function () { idx = (idx + 1) % COLORS.length; render(); }, 1400);

Neon pairs saturation (S) at 90–100% and lightness (L) around 50–65% with a very dark background (roughly 5–12% lightness). The exact same hue on a light background just reads as vivid — it only reads as glowing once it sits against near-black.

The glow itself comes from stacking several blurred box-shadows (or filter: drop-shadow) of the same color at different radii — two or three layers, tight and dense near the shape, spreading and fading outward, is what actually sells a neon-sign look.

It is a staple of cyberpunk, gaming, and nightlife branding, but painting large blocks of body text in neon tires the eye fast. Reserve it for small accents — a button, a badge, a single line of logo — and keep everything else a dark neutral.

When to use

Reserve it for small accents like buttons, badges, or a logo line. Without a dark background, the neon effect simply does not register.