Swatches

:root { --bg: #0f1724; --card: #0b1220; --muted: #9aa4b2; --accent: #5eead4; --glass: rgba(255,255,255,0.04); --radius: 10px; --max-width: 1100px; --gap: 18px; } * { 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%, var(--bg) 100%); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app-header { text-align: center; padding: 28px 16px 6px; } .app-header h1 { margin: 0; font-size: 20px; letter-spacing: 0.4px; } .subtitle { margin: 6px 0 0; color: var(--muted); font-size: 13px; } .container { max-width: var(--max-width); margin: 24px auto; display: grid; grid-template-columns: 1fr 360px; gap: var(--gap); padding: 0 16px 48px; } .controls { background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--glass)); border-radius: var(--radius); padding: 18px; box-shadow: 0 6px 20px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); } .input-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } label { font-size: 13px; color: var(--muted); width: 48px; } input[type="text"] { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); color: #e9f3ff; padding: 8px 10px; border-radius: 8px; outline: none; flex: 1; } input[type="text"]::placeholder { color: rgba(255,255,255,0.18); } .btn { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .btn.primary { background: linear-gradient(90deg, #10b981, #06b6d4); color: #041422; border: none; } .btn.alt { border-style: dashed; } .sliders { margin-top: 6px; display: grid; gap: 8px; } .slider-row { display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; gap: 10px; } input[type="range"] { appearance: none; height: 6px; border-radius: 6px; background: rgba(255,255,255,0.06); outline: none; } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(2,6,23,0.6); cursor: pointer; } output { color: var(--muted); font-size: 13px; text-align: right; } .conversions { display: flex; gap: 10px; margin-top: 12px; } .conversions > div { flex: 1; background: rgba(255,255,255,0.02); border-radius: 8px; padding: 10px; font-size: 13px; } .actions { display: flex; gap: 8px; margin-top: 12px; } .swatch-section { margin-top: 16px; } .swatch-section h2 { margin: 0 0 10px 0; font-size: 14px; color: var(--muted); } .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; } .swatch { height: 48px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: flex-end; justify-content: center; padding: 6px; color: rgba(0,0,0,0.6); font-weight: 600; font-size: 11px; box-shadow: 0 2px 8px rgba(2,6,23,0.4); } .preview { position: sticky; top: 24px; height: fit-content; display: flex; flex-direction: column; gap: 12px; } .preview-box { height: 240px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; justify-content: stretch; padding: 16px; color: rgba(0,0,0,0.8); box-shadow: 0 8px 30px rgba(2,6,23,0.6); transition: background 200ms ease; } .preview-info { background: rgba(255,255,255,0.85); padding: 10px; border-radius: 8px; width: 100%; text-align: left; } .big-hex { font-weight: 700; font-size: 18px; color: #041422; } .small-info { color: #07323a; margin-top: 6px; font-size: 13px; } .palette-controls { background: rgba(255,255,255,0.02); border-radius: 10px; padding: 12px; } #shades { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .shade { height: 40px; width: calc(100% / 5 - 8px); border-radius: 6px; border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.7); cursor: pointer; } .app-footer { text-align: center; color: var(--muted); padding: 18px 0 40px; font-size: 13px; } @media (max-width: 880px) { .container { grid-template-columns: 1fr; } .preview { position: relative; } } // Hex Color Calculator logic (function () { const hexInput = document.getElementById("hexInput"); const applyHex = document.getElementById("applyHex"); const randomBtn = document.getElementById("randomBtn"); const copyHex = document.getElementById("copyHex"); const copyRgb = document.getElementById("copyRgb"); const copyHsl = document.getElementById("copyHsl"); const rRange = document.getElementById("rRange"); const gRange = document.getElementById("gRange"); const bRange = document.getElementById("bRange"); const rVal = document.getElementById("rVal"); const gVal = document.getElementById("gVal"); const bVal = document.getElementById("bVal"); const rgbText = document.getElementById("rgbText"); const hslText = document.getElementById("hslText"); const previewBox = document.getElementById("previewBox"); const bigHex = document.getElementById("bigHex"); const smallInfo = document.getElementById("smallInfo"); const swatchesEl = document.getElementById("swatches"); const generateShadesBtn = document.getElementById("generateShades"); const shadeCountInput = document.getElementById("shadeCount"); const shadesEl = document.getElementById("shades"); // Utility helpers function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } function fixHex(input) { if (!input) return null; let s = input.trim().replace(/^#/, ""); if (s.length === 3) s = s.split("").map(c => c + c).join(""); if (/^[0-9a-fA-F]{6}$/.test(s)) return "#" + s.toUpperCase(); return null; } function rgbToHex(r, g, b) { const toHex = n => n.toString(16).padStart(2, "0").toUpperCase(); return "#" + toHex(r) + toHex(g) + toHex(b); } function hexToRgb(hex) { const h = hex.replace(/^#/, ""); if (h.length !== 6) return null; const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); return { r, g, b }; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s; const l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; default: h = (r - g) / d + 4; } h /= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } function hslToRgb(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 => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); return { r: Math.round(255 * f(0)), g: Math.round(255 * f(8)), b: Math.round(255 * f(4)) }; } function updateFromHex(hex) { const fixed = fixHex(hex); if (!fixed) return; const rgb = hexToRgb(fixed); if (!rgb) return; rRange.value = rgb.r; gRange.value = rgb.g; bRange.value = rgb.b; rVal.textContent = rgb.r; gVal.textContent = rgb.g; bVal.textContent = rgb.b; updateDisplay(rgb.r, rgb.g, rgb.b); addToRecent(fixed); } function updateFromRgb(r, g, b) { r = clamp(Math.round(r), 0, 255); g = clamp(Math.round(g), 0, 255); b = clamp(Math.round(b), 0, 255); rVal.textContent = r; gVal.textContent = g; bVal.textContent = b; const hex = rgbToHex(r, g, b); hexInput.value = hex; updateDisplay(r, g, b); } function updateDisplay(r, g, b) { const hex = rgbToHex(r, g, b); const hsl = rgbToHsl(r, g, b); previewBox.style.background = hex; // choose text color based on luminance const yiq = (r * 299 + g * 587 + b * 114) / 1000; const textColor = yiq >= 160 ? "rgba(0,0,0,0.9)" : "#e6eef6"; previewBox.style.color = textColor; bigHex.textContent = hex; rgbText.textContent = `rgb(${r}, ${g}, ${b})`; hslText.textContent = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`; smallInfo.textContent = `${rgbText.textContent} • ${hslText.textContent}`; } // Recent swatches const preset = [ "#EF4444","#F97316","#F59E0B","#10B981","#06B6D4","#3B82F6","#7C3AED","#EC4899", "#111827","#0EA5A4","#F1C40F","#E67E22","#E74C3C","#2ECC71","#3498DB" ]; function createSwatch(hex) { const el = document.createElement("div"); el.className = "swatch"; el.style.background = hex; el.title = hex; el.textContent = hex; el.addEventListener("click", () => updateFromHex(hex)); return el; } function initSwatches() { swatchesEl.innerHTML = ""; preset.forEach(hex => swatchesEl.appendChild(createSwatch(hex))); const saved = JSON.parse(localStorage.getItem("recentSwatches") || "[]"); saved.slice().reverse().forEach(hex => swatchesEl.appendChild(createSwatch(hex))); } function addToRecent(hex) { const cur = JSON.parse(localStorage.getItem("recentSwatches") || "[]"); const upper = hex.toUpperCase(); const filtered = cur.filter(h => h !== upper); filtered.unshift(upper); const limited = filtered.slice(0, 12); localStorage.setItem("recentSwatches", JSON.stringify(limited)); initSwatches(); } // Generate shades (simple linear interpolation in HSL lightness) function generateShades(hex, count) { const rgb = hexToRgb(hex); if (!rgb) return []; const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); const shades = []; const step = 100 / (count - 1); for (let i = 0; i < count; i++) { const l = clamp(Math.round(i * step), 0, 100); const rgbShade = hslToRgb(hsl.h, hsl.s, l); shades.push(rgbToHex(rgbShade.r, rgbShade.g, rgbShade.b)); } return shades; } function renderShades(hex, count) { shadesEl.innerHTML = ""; const shades = generateShades(hex, count); shades.forEach(s => { const d = document.createElement("div"); d.className = "shade"; d.style.background = s; d.textContent = s; d.addEventListener("click", () => updateFromHex(s)); shadesEl.appendChild(d); }); } // Copy helpers async function copyText(text) { try { await navigator.clipboard.writeText(text); flashCopy(); } catch (e) { // fallback const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); flashCopy(); } } function flashCopy() { // tiny visual feedback const original = copyHex.textContent; copyHex.textContent = "Copied"; setTimeout(() => { copyHex.textContent = original; }, 900); } // Events applyHex.addEventListener("click", () => updateFromHex(hexInput.value)); hexInput.addEventListener("keydown", (e) => { if (e.key === "Enter") updateFromHex(hexInput.value); }); randomBtn.addEventListener("click", () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); updateFromRgb(r, g, b); addToRecent(rgbToHex(r, g, b)); }); [rRange, gRange, bRange].forEach(el => { el.addEventListener("input", () => { updateFromRgb(rRange.value, gRange.value, bRange.value); }); }); copyHex.addEventListener("click", () => { copyText(bigHex.textContent); }); copyRgb.addEventListener("click", () => { copyText(rgbText.textContent); }); copyHsl.addEventListener("click", () => { copyText(hslText.textContent); }); generateShadesBtn.addEventListener("click", () => { const hex = fixHex(hexInput.value) || bigHex.textContent; const count = clamp(parseInt(shadeCountInput.value, 10) || 5, 3, 12); renderShades(hex, count); }); // Initialize defaults function init() { initSwatches(); updateFromRgb(0, 0, 0); renderShades("#000000", 5); } init(); })();