Color Catalog — 9999 Hex Codes

:root { --bg: #0f1720; --card: #0b1220; --text: #e6eef8; --muted: #9fb3cf; --accent: #6ee7b7; } * { 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, #071028 0%, #081427 100%); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { padding: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.04); } .header h1 { margin: 0; font-size: 18px; font-weight: 600; } .controls { display: flex; gap: 10px; align-items: center; margin-left: auto; } .controls input { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--text); } .controls button { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color: var(--text); border: 1px solid rgba(255,255,255,0.06); padding: 8px 10px; border-radius: 8px; cursor: pointer; } .counts { font-size: 13px; color: var(--muted); margin-left: 10px; } main { padding: 16px; } .legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .legend .chip { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); font-size: 13px; cursor: pointer; } .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .swatch { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); cursor: pointer; transition: transform 120ms ease; } .swatch:active { transform: scale(0.995); } .swatch .color { width: 56px; min-width: 56px; height: 56px; border-right: 1px solid rgba(255,255,255,0.02); } .swatch .meta { padding: 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; } .meta .hex { font-weight: 600; font-size: 13px; letter-spacing: 0.8px; color: var(--text); } .meta .tag { font-size: 12px; color: var(--muted); } .footer { padding: 12px 16px; color: var(--muted); font-size: 13px; border-top: 1px solid rgba(255,255,255,0.03); } @media (max-width: 600px) { .palette { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .controls { width: 100%; } } export function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } export function hslToHex(h, s, l) { // h: 0-360, s,l: 0-100 s /= 100; l /= 100; const k = n => (n + h / 30) % 12; const a = s * Math.min(l, 1 - l); const f = n => { const color = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); return Math.round(255 * color).toString(16).padStart(2, '0'); }; return `#${f(0)}${f(8)}${f(4)}`.toUpperCase(); } // generate near-black shades export function generateBlack(count) { const out = []; for (let i = 0; i < count; i++) { const l = 2 + (i / Math.max(1, count - 1)) * 18; // lightness 2%..20% const s = 5 + (i % 5); // tiny saturation const h = (i * 37) % 360; out.push(hslToHex(h, s, l)); } return out; } // generate near-white shades export function generateWhite(count) { const out = []; for (let i = 0; i < count; i++) { const l = 100 - (i / Math.max(1, count - 1)) * 18; // 100%..82% const s = 4 + (i % 6); const h = (i * 73) % 360; out.push(hslToHex(h, s, l)); } return out; } // grayscale where r=g=b across a range export function generateGrays(count) { const out = []; for (let i = 0; i < count; i++) { const lightness = 5 + Math.round((i / Math.max(1, count - 1)) * 90); // 5..95 const hex = hslToHex(0, 0, lightness); out.push(hex); } return out; } // silver: slightly metallic mid-high lightness with subtle hue shifts export function generateSilver(count) { const out = []; for (let i = 0; i < count; i++) { const l = 55 + (i / Math.max(1, count - 1)) * 25; // 55..80 const s = 4 + ((i * 3) % 8); // 4..11 const h = 200 + Math.sin(i * 0.08) * 20; // subtle blueish tint out.push(hslToHex((h + 360) % 360, s, l)); } return out; } // rainbow across hue with configurable lightness and saturation ranges export function generateRainbow(count, minLight, maxLight, minSat, maxSat) { const out = []; for (let i = 0; i < count; i++) { const t = i / Math.max(1, count - 1); const h = Math.round(t * 360); const s = minSat + t * (maxSat - minSat); const l = minLight + t * (maxLight - minLight); out.push(hslToHex(h, clamp(Math.round(s), 0, 100), clamp(Math.round(l), 0, 100))); } return out; } import { generateBlack, generateWhite, generateGrays, generateSilver, generateRainbow } from './colors.js'; const TOTAL = 9999; // distribute counts across 6 categories: black, white, gray, silver, dark-rainbow, light-rainbow const categories = [ { key: 'black', label: 'Black Shades' }, { key: 'white', label: 'White Shades' }, { key: 'gray', label: 'Grays' }, { key: 'silver', label: 'Silver' }, { key: 'dark-rainbow', label: 'Dark Rainbow' }, { key: 'light-rainbow', label: 'Light Rainbow' } ]; function distribute(total, n) { const base = Math.floor(total / n); const rem = total - base * n; return categories.map((c, i) => base + (i < rem ? 1 : 0)); } const counts = distribute(TOTAL, categories.length); function generateAll() { const sets = {}; sets.black = generateBlack(counts[0]); sets.white = generateWhite(counts[1]); sets.gray = generateGrays(counts[2]); sets.silver = generateSilver(counts[3]); sets['dark-rainbow'] = generateRainbow(counts[4], 12, 40, 70, 95); sets['light-rainbow'] = generateRainbow(counts[5], 70, 92, 65, 95); return sets; } const data = generateAll(); // Build legend and palette const legendEl = document.getElementById('legend'); const paletteEl = document.getElementById('palette'); const countsEl = document.getElementById('counts'); const filterInput = document.getElementById('filterInput'); const copyAllBtn = document.getElementById('copyAllBtn'); const downloadBtn = document.getElementById('downloadBtn'); function updateCounts() { const total = Object.values(data).reduce((s, a) => s + a.length, 0); countsEl.textContent = `Total: ${total.toLocaleString()} • ${categories.map((c, i) => `${c.label}: ${counts[i].toLocaleString()}`).join(' • ')}`; } function createLegend() { legendEl.innerHTML = ''; categories.forEach(cat => { const btn = document.createElement('button'); btn.className = 'chip'; btn.type = 'button'; btn.textContent = cat.label; btn.addEventListener('click', () => { filterInput.value = cat.label.split(' ')[0]; render(); }); legendEl.appendChild(btn); }); } function matchFilter(hex, label, query) { if (!query) return true; const q = query.trim().toLowerCase(); if (hex.toLowerCase().includes(q)) return true; if (label.toLowerCase().includes(q)) return true; return false; } function render() { const q = filterInput.value.trim().toLowerCase(); paletteEl.innerHTML = ''; const frag = document.createDocumentFragment(); let visible = 0; categories.forEach(cat => { const list = data[cat.key]; for (let i = 0; i < list.length; i++) { const hex = list[i]; if (!matchFilter(hex, cat.label, q)) continue; visible++; const sw = document.createElement('div'); sw.className = 'swatch'; sw.title = `${cat.label} • ${hex}`; const color = document.createElement('div'); color.className = 'color'; color.style.background = hex; const meta = document.createElement('div'); meta.className = 'meta'; const h = document.createElement('div'); h.className = 'hex'; h.textContent = hex; const tag = document.createElement('div'); tag.className = 'tag'; tag.textContent = `${cat.label}`; meta.appendChild(h); meta.appendChild(tag); sw.appendChild(color); sw.appendChild(meta); sw.addEventListener('click', async () => { try { await navigator.clipboard.writeText(hex); h.textContent = `${hex} copied`; setTimeout(() => h.textContent = hex, 900); } catch { // fallback const ta = document.createElement('textarea'); ta.value = hex; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); h.textContent = `${hex} copied`; setTimeout(() => h.textContent = hex, 900); } }); frag.appendChild(sw); } }); paletteEl.appendChild(frag); countsEl.textContent = `${visible.toLocaleString()} visible • Total ${TOTAL.toLocaleString()}`; } // copying visible items copyAllBtn.addEventListener('click', async () => { const q = filterInput.value.trim().toLowerCase(); const list = []; categories.forEach(cat => { data[cat.key].forEach(hex => { if (matchFilter(hex, cat.label, q)) list.push(`${hex},${cat.label}`); }); }); if (list.length === 0) return; const csv = list.join('\n'); try { await navigator.clipboard.writeText(csv); copyAllBtn.textContent = 'Copied'; setTimeout(() => copyAllBtn.textContent = 'Copy Visible', 1000); } catch { // ignore } }); // download CSV downloadBtn.addEventListener('click', () => { const q = filterInput.value.trim().toLowerCase(); const rows = []; rows.push('hex,label'); categories.forEach(cat => { data[cat.key].forEach(hex => { if (matchFilter(hex, cat.label, q)) rows.push(`${hex},${cat.label}`); }); }); const blob = new Blob([rows.join('\n')], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'colors-9999.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); filterInput.addEventListener('input', () => { render(); }); // initial assembly updateCounts(); createLegend(); render();