Color Selector — Black, White, Gray, Silver, Rainbow 9999

Presets

Rainbow 9999

Colors 10 Saturation 100% Lightness 50%

Picker & Preview

Hex

Click any swatch to apply. Click copy to copy the hex code.

:root { --bg: #0f1720; --panel: #0b1220; --muted: #9aa4b2; --accent: #7cc3ff; --radius: 10px; } * { 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%, #0d1724 100%); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 24px; } .header { margin-bottom: 20px; text-align: center; } .header h1 { margin: 0; font-size: 28px; letter-spacing: -0.02em; } .subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; } .container { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; } .panel { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: var(--radius); padding: 16px; 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); } .panel h2 { margin: 0 0 12px; font-size: 16px; color: #dfe9f7; } .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; } .swatch { height: 64px; border-radius: 8px; display: flex; align-items: flex-end; padding: 8px; color: rgba(0,0,0,0.7); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none; transition: transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 3px 10px rgba(2,6,23,0.4); border: 1px solid rgba(0,0,0,0.06); } .swatch:focus, .swatch:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(2,6,23,0.6); outline: none; } .swatch .label { background: rgba(255,255,255,0.5); padding: 6px 8px; border-radius: 6px; margin-left: 4px; font-size: 12px; } .controls { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; margin-bottom: 12px; } label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; } input[type="range"] { width: 100%; appearance: none; height: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius: 6px; } .btn { background: linear-gradient(180deg, #2b6cff, #0e4ad8); color: white; padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; } .btn-row { display: flex; gap: 8px; margin-top: 8px; } .picker-row { display: flex; gap: 12px; align-items: center; } .preview { width: 140px; height: 140px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.04); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 6px 18px rgba(2,6,23,0.6); } .picker-controls { flex: 1; } input[type="text"] { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: #e6eef6; font-weight: 600; font-size: 14px; } .note { margin: 10px 0 0; font-size: 12px; color: var(--muted); } .footer { max-width: 1100px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: 13px; } @media (max-width: 860px) { .container { grid-template-columns: 1fr; } .preview { width: 100px; height: 100px; } } const presets = [ { name: "Black", hex: "#000000" }, { name: "White", hex: "#ffffff" }, { name: "Gray", hex: "#999999" }, { name: "Silver", hex: "#c0c0c0" } ]; const el = { presetSwatches: document.getElementById("presetSwatches"), rainbowSwatches: document.getElementById("rainbowSwatches"), rainbowCount: document.getElementById("rainbowCount"), rainbowCountLabel: document.getElementById("rainbowCountLabel"), rainbowSaturation: document.getElementById("rainbowSaturation"), rainbowSatLabel: document.getElementById("rainbowSatLabel"), rainbowLightness: document.getElementById("rainbowLightness"), rainbowLightLabel: document.getElementById("rainbowLightLabel"), generateRainbow: document.getElementById("generateRainbow"), preview: document.getElementById("preview"), hexInput: document.getElementById("hexInput"), applyHex: document.getElementById("applyHex"), copyHex: document.getElementById("copyHex") }; function createSwatch(color, label) { const btn = document.createElement("button"); btn.className = "swatch"; btn.style.background = color; btn.setAttribute("aria-label", label || color); btn.title = label ? `${label} — ${color}` : color; const span = document.createElement("span"); span.className = "label"; span.textContent = color.toUpperCase(); btn.appendChild(span); btn.addEventListener("click", () => applyColor(color)); btn.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); applyColor(color); } }); return btn; } function renderPresets() { el.presetSwatches.innerHTML = ""; for (const p of presets) { const sw = createSwatch(p.hex, p.name); el.presetSwatches.appendChild(sw); } } 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) .toString(16) .padStart(2, "0"); }; return `#${f(0)}${f(8)}${f(4)}`; } function generateRainbow(count = 10, s = 100, l = 50) { const arr = []; for (let i = 0; i < count; i++) { const hue = Math.round((360 * i) / count); arr.push(hslToHex(hue, s, l)); } return arr; } function renderRainbow(count, s, l) { el.rainbowSwatches.innerHTML = ""; const colors = generateRainbow(count, s, l); for (const c of colors) { const sw = createSwatch(c, "Rainbow"); el.rainbowSwatches.appendChild(sw); } } function cleanHex(input) { if (!input) return null; let v = input.trim(); if (!v.startsWith("#")) v = "#" + v; // Accept #rgb, #rgba, #rrggbb, #rrggbbaa const re = /^#([0-9a-fA-F]{3,8})$/; const m = v.match(re); if (!m) return null; const hex = m[1]; if (hex.length === 3) { return ( "#" + hex .split("") .map((c) => c + c) .join("") .toLowerCase() ); } if (hex.length === 4) { // 4-digit hex (#RGBA) -> expand to #RRGGBBAA but we'll ignore alpha for preview and return #RRGGBB const expanded = hex .split("") .slice(0, 3) .map((c) => c + c) .join(""); return "#" + expanded.toLowerCase(); } if (hex.length === 6 || hex.length === 8) { return "#" + hex.slice(0, 6).toLowerCase(); } return null; } function applyColor(hex) { const valid = cleanHex(hex); if (!valid) return; el.preview.style.background = valid; el.hexInput.value = valid; el.hexInput.setAttribute("aria-label", `Selected color ${valid}`); } async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); flashCopied(); } catch (e) { // fallback const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); flashCopied(); } catch (err) { console.warn("copy failed", err); } finally { document.body.removeChild(ta); } } } function flashCopied() { el.copyHex.textContent = "Copied!"; setTimeout(() => { el.copyHex.textContent = "Copy Hex"; }, 900); } // initial render renderPresets(); renderRainbow(parseInt(el.rainbowCount.value, 10), parseInt(el.rainbowSaturation.value, 10), parseInt(el.rainbowLightness.value, 10)); // Apply default preview applyColor(presets[0].hex); // event bindings el.rainbowCount.addEventListener("input", (e) => { el.rainbowCountLabel.textContent = e.target.value; }); el.rainbowSaturation.addEventListener("input", (e) => { el.rainbowSatLabel.textContent = `${e.target.value}%`; }); el.rainbowLightness.addEventListener("input", (e) => { el.rainbowLightLabel.textContent = `${e.target.value}%`; }); el.generateRainbow.addEventListener("click", () => { const count = parseInt(el.rainbowCount.value, 10); const s = parseInt(el.rainbowSaturation.value, 10); const l = parseInt(el.rainbowLightness.value, 10); renderRainbow(count, s, l); }); el.applyHex.addEventListener("click", () => { const cleaned = cleanHex(el.hexInput.value); if (cleaned) applyColor(cleaned); else { el.hexInput.classList.add("invalid"); setTimeout(() => el.hexInput.classList.remove("invalid"), 800); } }); el.copyHex.addEventListener("click", async () => { const val = el.hexInput.value || getComputedStyle(el.preview).backgroundColor; const hex = cleanHex(val) || el.hexInput.value; if (hex) await copyToClipboard(hex); }); // Keyboard accessibility: Enter in hex input applies color el.hexInput.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); el.applyHex.click(); } }); // Accessibility: allow keyboard focus on swatches document.querySelectorAll(".swatch").forEach((s) => s.setAttribute("tabindex", "0"));