Hex Color Codes — Up to 9999

:root { --gap: 12px; --tile-size: 96px; --bg: #0f1720; --card-bg: #0b1220; --text: #e6eef8; --muted: #9fb0c8; --accent: #3b82f6; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, var(--bg), #071021 120%); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { padding: 24px; border-bottom: 1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); } .header-inner { max-width: 1100px; margin: 0 auto; } h1 { margin: 0 0 6px 0; font-size: 20px; letter-spacing: -0.02em; } .subtitle { margin: 0 0 12px 0; color: var(--muted); font-size: 13px; } form#controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } form#controls label { font-size: 12px; color: var(--muted); margin-right: 6px; } form#controls input[type="number"], form#controls input[type="text"] { padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--text); min-width: 120px; } button { padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer; background: var(--accent); color: white; font-weight: 600; } button#copyAll { background: linear-gradient(90deg,#10b981,#06b6d4); } .status { margin-left: 12px; color: var(--muted); font-size: 13px; } main { padding: 18px; max-width: 1200px; margin: 0 auto; } .grid-wrap { background: rgba(255,255,255,0.01); padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.02); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr)); gap: var(--gap); align-items: stretch; } .tile { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 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); color: var(--text); min-height: 120px; } .preview { border-radius: 6px; height: 72px; width: 100%; box-shadow: 0 2px 8px rgba(2,6,23,0.6); border: 1px solid rgba(0,0,0,0.08); } .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hex { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-weight: 700; letter-spacing: 0.02em; color: var(--text); font-size: 13px; } .meta button { padding: 6px 8px; font-size: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.02); color: var(--text); border-radius: 6px; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } @media (max-width: 640px) { :root { --tile-size: 120px; } form#controls { gap: 6px; } .header { padding: 16px; } } export function toHex6(n) { return n.toString(16).toUpperCase().padStart(6, "0"); } export function generateColors(count) { const out = []; for (let i = 0; i < count; i++) { out.push("#" + toHex6(i)); } return out; } export function copyText(text) { if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } return new Promise((resolve, reject) => { 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"); resolve(); } catch (e) { reject(e); } finally { document.body.removeChild(ta); } }); } import { generateColors, copyText } from "./utils.js"; const MAX = 9999; const countInput = document.getElementById("count"); const filterInput = document.getElementById("filter"); const generateBtn = document.getElementById("generate"); const copyAllBtn = document.getElementById("copyAll"); const status = document.getElementById("status"); const swatchGrid = document.getElementById("swatchGrid"); function setStatus(msg, ms = 2500) { status.textContent = msg; if (ms > 0) { setTimeout(() => { if (status.textContent === msg) status.textContent = ""; }, ms); } } function createTile(hex) { const tile = document.createElement("div"); tile.className = "tile"; tile.setAttribute("role", "listitem"); const preview = document.createElement("div"); preview.className = "preview"; preview.style.backgroundColor = hex; preview.setAttribute("aria-label", hex); const meta = document.createElement("div"); meta.className = "meta"; const hexLabel = document.createElement("div"); hexLabel.className = "hex"; hexLabel.textContent = hex; const copyBtn = document.createElement("button"); copyBtn.type = "button"; copyBtn.className = "copy-btn"; copyBtn.textContent = "Copy"; copyBtn.title = "Copy hex code"; copyBtn.dataset.hex = hex; meta.appendChild(hexLabel); meta.appendChild(copyBtn); tile.appendChild(preview); tile.appendChild(meta); return tile; } function render(colors) { swatchGrid.innerHTML = ""; const frag = document.createDocumentFragment(); for (const hex of colors) { frag.appendChild(createTile(hex)); } swatchGrid.appendChild(frag); setStatus(`Rendered ${colors.length} color(s)`); } function buildAndRender() { let n = parseInt(countInput.value, 10) || 0; if (n < 1) n = 1; if (n > MAX) n = MAX; countInput.value = n; const raw = generateColors(n); const filter = (filterInput.value || "").trim().replace(/^#/, "").toUpperCase(); const filtered = filter ? raw.filter(c => c.slice(1).startsWith(filter)) : raw; render(filtered); } generateBtn.addEventListener("click", () => { buildAndRender(); }); filterInput.addEventListener("input", () => { // live filter without regenerating the base array buildAndRender(); }); swatchGrid.addEventListener("click", (e) => { const btn = e.target.closest("button.copy-btn"); if (!btn) return; const hex = btn.dataset.hex; copyText(hex).then(() => { setStatus(`${hex} copied`); }).catch(() => { setStatus("Copy failed"); }); }); copyAllBtn.addEventListener("click", async () => { const tiles = Array.from(swatchGrid.querySelectorAll(".hex")); if (tiles.length === 0) { setStatus("No colors to copy"); return; } const all = tiles.map(t => t.textContent).join("\n"); try { await copyText(all); setStatus(`Copied ${tiles.length} codes`); } catch { setStatus("Copy failed"); } }); // Initial render on load using default value (bounded to MAX) document.addEventListener("DOMContentLoaded", () => { // ensure count input respects limit countInput.max = MAX; if (!countInput.value) countInput.value = MAX; buildAndRender(); });

Color swatches