9999 Hex Color Codes — Black, White, Gray, Silver, Rainbow

Black

White

Gray (256 shades)

Silver (100 metallic-ish shades)

Rainbow (9999 colors)

Displayed sample: first 200 swatches. Use download to get all 9999 hex codes.

:root { --bg: #0f1720; --card: #0b1220; --muted: #9aa4b2; --accent: #7dd3fc; --gap: 12px; } * { 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, #071126 0%, #081827 100%); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { padding: 28px 24px; text-align: center; } .header h1 { margin: 0 0 6px 0; font-size: 28px; letter-spacing: -0.02em; } .header p { margin: 0; color: var(--muted); font-size: 14px; } .container { max-width: 1100px; margin: 20px auto; padding: 0 16px 80px 16px; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 880px) { .container { grid-template-columns: repeat(2, 1fr); } } .category { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 14px; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); } .category h2 { margin: 0 0 8px 0; font-size: 16px; } .notice { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .swatch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; align-items: center; } .swatch { border-radius: 6px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(0,0,0,0.7); cursor: pointer; user-select: none; border: 1px solid rgba(0,0,0,0.08); position: relative; transition: transform 120ms ease, box-shadow 120ms ease; overflow: hidden; } .swatch.dark-text { color: rgba(0,0,0,0.8); text-shadow: none; } .swatch.light-text { color: rgba(255,255,255,0.9); text-shadow: 0 1px 0 rgba(0,0,0,0.25); } .swatch:active { transform: translateY(1px) scale(0.997); } .controls { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .btn { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color: var(--accent); border: 1px solid rgba(125,211,252,0.12); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .footer { text-align: center; color: var(--muted); padding: 18px 8px; } .copied-tip { position: absolute; top: 6px; right: 6px; font-size: 10px; background: rgba(0,0,0,0.32); padding: 4px 6px; border-radius: 6px; color: #fff; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease; } .copied-tip.show { opacity: 1; transform: translateY(0); } const BLACK = ['#000000']; const WHITE = ['#FFFFFF']; function padHex(n) { return n.toString(16).padStart(2, '0').toUpperCase(); } function rgbToHex(r, g, b) { return `#${padHex(r)}${padHex(g)}${padHex(b)}`; } // HSL to RGB helper (h in [0,360), s,l in [0,100]) function hslToHex(h, s, l) { s /= 100; l /= 100; const k = n => (n + h / 30) % 12; const a = s * Math.min(l, 1 - l); const f = n => { const val = l - a * Math.max(Math.min(k(n) - 3, 9 - k(n), 1), -1); return Math.round(255 * val); }; return rgbToHex(f(0), f(8), f(4)); } // Gray shades from black to white (n steps) function generateGrays(n = 256) { const out = []; for (let i = 0; i < n; i++) { const v = Math.round((i / (n - 1)) * 255); out.push(rgbToHex(v, v, v)); } return out; } // Silver-ish shades (lower saturation, medium-high lightness) function generateSilver(n = 100) { const out = []; for (let i = 0; i < n; i++) { const t = i / (n - 1); // hue near 200-50 blend to get cool metallic tint, small saturation const hue = 220 - 120 * t; const sat = 6 + 8 * Math.sin(t * Math.PI * 2); const light = 62 + 18 * Math.cos((t + 0.12) * Math.PI * 2); out.push(hslToHex(hue, sat, light)); } return out; } // Rainbow generator with n colors (9999) function generateRainbow(n = 9999) { const out = []; for (let i = 0; i < n; i++) { const h = (i / n) * 360; const s = 92; // vivid const l = 50; out.push(hslToHex(h, s, l)); } return out; } // Utilities to create swatch elements function isLight(hex) { // compute luminance simple from RGB const r = parseInt(hex.substr(1, 2), 16) / 255; const g = parseInt(hex.substr(3, 2), 16) / 255; const b = parseInt(hex.substr(5, 2), 16) / 255; const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; return lum > 0.6; } function createSwatch(hex) { const el = document.createElement('div'); el.className = 'swatch'; el.style.background = hex; el.textContent = hex; el.classList.add(isLight(hex) ? 'dark-text' : 'light-text'); const tip = document.createElement('div'); tip.className = 'copied-tip'; tip.textContent = 'Copied'; el.appendChild(tip); el.addEventListener('click', async () => { try { await navigator.clipboard.writeText(hex); tip.classList.add('show'); setTimeout(() => tip.classList.remove('show'), 900); } catch (e) { // fallback const ta = document.createElement('textarea'); ta.value = hex; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); tip.classList.add('show'); setTimeout(() => tip.classList.remove('show'), 900); } }); return el; } function renderSwatches(container, colors, maxDisplay = Infinity) { container.innerHTML = ''; const displayCount = Math.min(colors.length, maxDisplay); for (let i = 0; i < displayCount; i++) { container.appendChild(createSwatch(colors[i])); } if (colors.length > displayCount) { const moreBtn = document.createElement('button'); moreBtn.className = 'btn'; moreBtn.textContent = `Show all (${colors.length})`; moreBtn.addEventListener('click', () => { container.innerHTML = ''; for (const c of colors) container.appendChild(createSwatch(c)); moreBtn.remove(); }); container.parentElement.querySelector('.controls').appendChild(moreBtn); } } function downloadList(filename, colors) { const blob = new Blob([colors.join('\n')], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); a.remove(); } // Init document.addEventListener('DOMContentLoaded', () => { const blackList = document.getElementById('black-list'); const whiteList = document.getElementById('white-list'); const grayList = document.getElementById('gray-list'); const silverList = document.getElementById('silver-list'); const rainbowList = document.getElementById('rainbow-list'); const grays = generateGrays(256); const silvers = generateSilver(100); const rainbow = generateRainbow(9999); renderSwatches(blackList, BLACK, 10); renderSwatches(whiteList, WHITE, 10); renderSwatches(grayList, grays, 256); renderSwatches(silverList, silvers, silvers.length); renderSwatches(rainbowList, rainbow, 200); // sample only document.querySelectorAll('[data-download]').forEach(btn => { btn.addEventListener('click', () => { const key = btn.getAttribute('data-download'); if (key === 'black') downloadList('black.txt', BLACK); if (key === 'white') downloadList('white.txt', WHITE); if (key === 'gray') downloadList('gray-256.txt', grays); if (key === 'silver') downloadList('silver-100.txt', silvers); if (key === 'rainbow') downloadList('rainbow-9999.txt', rainbow); }); }); document.getElementById('copy-first-10').addEventListener('click', async () => { const text = rainbow.slice(0, 10).join('\n'); try { await navigator.clipboard.writeText(text); alert('First 10 rainbow hex codes copied to clipboard.'); } catch (e) { alert('Copy failed. You can download the list instead.'); } }); });