Black, White, Gray, Silver & Rainbow 9999 Hex Codes

Basics

Black

#000000

White

#FFFFFF

Grays (steps)

Silver

Classic silver: #C0C0C0

Rainbow — 9,999 Hex Colors

Count

Saturation (%)

Lightness (%)

Filter hex

0 swatches displayed

:root { --bg: #0f1724; --card: #0b1220; --muted: #9aa4b2; --accent: #6ee7b7; --max-width: 1200px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #071021 0%, #081226 100%); color: #e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.4; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 24px; } .site-header { padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .site-header h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.4px; } .lead { margin: 0; color: var(--muted); } .basics { margin-top: 20px; padding: 18px; background: rgba(255,255,255,0.02); border-radius: 10px; } .basic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; } .basic-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; text-align: center; } .swatch.large { width: 100%; height: 96px; border-radius: 6px; margin-bottom: 8px; border: 1px solid rgba(0,0,0,0.25); } .muted { color: var(--muted); font-size: 13px; } .gradient-gray { background: linear-gradient(90deg, #000000 0%, #1a1a1a 10%, #2e2e2e 20%, #4a4a4a 40%, #808080 60%, #bfbfbf 80%, #ffffff 100%); } .rainbow { margin-top: 22px; padding: 18px; background: rgba(255,255,255,0.01); border-radius: 10px; border: 1px solid rgba(255,255,255,0.03); } .controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .control-group { display:flex; flex-direction:column; gap:6px; min-width: 120px; } .control-group input[type="number"], .control-group input[type="text"] { padding: 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: inherit; } button#generate { padding: 10px 14px; border-radius: 8px; border: none; background: linear-gradient(180deg, #2dd4bf, #06b6d4); color: #042c2e; cursor: pointer; font-weight: 600; } .info { margin-left: auto; color: var(--muted); font-size: 13px; } .swatches { height: 60vh; overflow: auto; border-radius: 8px; padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border: 1px solid rgba(255,255,255,0.02); } .swatches.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .swatch-item { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; padding:6px; border-radius:6px; cursor:pointer; user-select:none; outline:none; border: 1px solid rgba(255,255,255,0.02); transition: transform 0.08s ease, box-shadow 0.08s ease; background: rgba(0,0,0,0.02); } .swatch-item:focus, .swatch-item:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } .swatch-box { width: 56px; height: 56px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.25); box-shadow: inset 0 -2px 6px rgba(0,0,0,0.2); width: 64px; height: 48px; } .swatch-meta .hex { font-size: 12px; font-weight: 600; letter-spacing: -0.6px; } .swatch-meta .index { font-size: 11px; } .site-footer { margin-top: 28px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.03); text-align: center; color: var(--muted); font-size: 13px; } @media (max-width:700px) { .swatches.grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); } .controls { gap: 8px; } } (function () { const swatchesEl = document.getElementById('swatches'); const template = document.getElementById('swatchTemplate'); const generatedCountEl = document.getElementById('generatedCount'); const countInput = document.getElementById('count'); const satInput = document.getElementById('saturation'); const lightInput = document.getElementById('lightness'); const filterInput = document.getElementById('filter'); const generateBtn = document.getElementById('generate'); const grayListEl = document.getElementById('grayList'); function hslToRgb(h, s, l) { h = h / 360; s = s / 100; l = l / 100; let r, g, b; if (s === 0) { r = g = b = l; } else { const hue2rgb = function (p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } function rgbToHex(r, g, b) { const toHex = (v) => v.toString(16).padStart(2, '0'); return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase(); } function hslToHex(h, s, l) { const [r, g, b] = hslToRgb(h, s, l); return rgbToHex(r, g, b); } function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } // fallback const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (e) {} document.body.removeChild(ta); return Promise.resolve(); } function buildGrayList(steps = 11) { const arr = []; for (let i = 0; i < steps; i++) { const v = Math.round((i * 255) / (steps - 1)); const hex = rgbToHex(v, v, v); arr.push(hex); } return arr; } function renderBasicGrays() { const grays = buildGrayList(11); grayListEl.textContent = grays.join(' • '); } function clearSwatches() { swatchesEl.innerHTML = ''; } function setSwatchesGrid() { swatchesEl.classList.add('grid'); } function generateRainbow(count = 9999, saturation = 100, lightness = 50, filter = '') { clearSwatches(); setSwatchesGrid(); const frag = document.createDocumentFragment(); const lowerFilter = filter.trim().toLowerCase().replace('#', ''); // Limit count to reasonable maximum to avoid freezing (sane cap) const cap = Math.max(1, Math.min(9999, count)); for (let i = 0; i < cap; i++) { const hue = (i * 360) / cap; const hex = hslToHex(hue, saturation, lightness); if (lowerFilter) { const check = hex.toLowerCase().replace('#', ''); if (check.indexOf(lowerFilter) === -1) continue; } const item = template.content.firstElementChild.cloneNode(true); const box = item.querySelector('.swatch-box'); const hexEl = item.querySelector('.hex'); const idxEl = item.querySelector('.index'); box.style.background = hex; hexEl.textContent = hex; idxEl.textContent = `#${i + 1}`; // set dataset for accessibility and copy item.dataset.hex = hex; // click/copy handler item.addEventListener('click', function () { copyToClipboard(hex).then(() => { flashCopied(item, hex); }); }); // keyboard accessibility item.addEventListener('keydown', function (ev) { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); item.click(); } }); frag.appendChild(item); } swatchesEl.appendChild(frag); generatedCountEl.textContent = swatchesEl.children.length; } function flashCopied(item, text) { const orig = item.querySelector('.hex').textContent; const hexEl = item.querySelector('.hex'); hexEl.textContent = 'Copied!'; setTimeout(() => { hexEl.textContent = orig; }, 900); } generateBtn.addEventListener('click', function () { const count = parseInt(countInput.value, 10) || 9999; const saturation = parseInt(satInput.value, 10) || 100; const lightness = parseInt(lightInput.value, 10) || 50; const filter = filterInput.value || ''; generateRainbow(count, saturation, lightness, filter); }); // live filter as user types (debounced) let filterTimeout = null; filterInput.addEventListener('input', function () { clearTimeout(filterTimeout); filterTimeout = setTimeout(() => { generateBtn.click(); }, 300); }); // initialize renderBasicGrays(); // initial generation with defaults generateRainbow(9999, 100, 50, ''); })();