Hex Color Code Calculator

HEX

:root { --bg: #0f1724; --card: #0b1220; --muted: #9aa4b2; --accent: #4f46e5; --white: #f8fafc; } * { 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%, #071827 100%); color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 920px; margin: 48px auto; padding: 28px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 12px; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 6px 24px rgba(2,6,23,0.6); } .header { text-align: center; margin-bottom: 18px; } .header h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; } .subtitle { margin: 6px 0 0 0; color: var(--muted); font-size: 0.95rem; } .controls { display: flex; gap: 14px; justify-content: center; margin: 18px 0 26px 0; } .channel { background: rgba(255,255,255,0.02); padding: 12px; border-radius: 10px; width: 120px; text-align: center; border: 1px solid rgba(255,255,255,0.03); } .channel label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; } .spin-control { display: flex; align-items: center; justify-content: center; gap: 8px; } .hex-input { width: 56px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size: 1.05rem; border-radius: 8px; padding: 8px 6px; background: rgba(255,255,255,0.02); color: var(--white); border: 1px solid rgba(255,255,255,0.03); outline: none; } .hex-input:focus { box-shadow: 0 0 0 4px rgba(79,70,229,0.12); border-color: rgba(79,70,229,0.7); } .spin { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: var(--white); padding: 6px 8px; border-radius: 6px; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; user-select: none; } .spin:hover { background: rgba(255,255,255,0.02); transform: translateY(-1px); } .preview-area { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; margin-top: 6px; } .preview { height: 160px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.04); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.015); } .output { display: flex; flex-direction: column; gap: 12px; } .output-row { display: flex; gap: 8px; align-items: center; } #hex-output { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size: 1.05rem; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); color: var(--white); } .btn { padding: 10px 12px; border-radius: 8px; border: none; background: var(--accent); color: white; cursor: pointer; font-weight: 600; } .btn.secondary { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid rgba(255,255,255,0.03); } .btn:active { transform: translateY(1px); } .details { color: var(--muted); font-size: 0.95rem; } .footer { margin-top: 18px; text-align: center; color: var(--muted); } @media (max-width: 720px) { .controls { flex-wrap: wrap; } .preview-area { grid-template-columns: 1fr; } .preview { width: 100%; } } (function() { const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const toHex = (n) => { const h = Number(n).toString(16).toUpperCase(); return h.length === 1 ? '0' + h : h; }; const fromHex = (h) => { if (typeof h !== 'string') return 0; const clean = h.replace(/[^0-9a-fA-F]/g, ''); if (clean.length === 0) return 0; return parseInt(clean.slice(0, 2), 16) || 0; }; const inputs = { r: document.getElementById('hex-r'), g: document.getElementById('hex-g'), b: document.getElementById('hex-b'), }; const preview = document.getElementById('color-preview'); const hexOutput = document.getElementById('hex-output'); const copyBtn = document.getElementById('copy-btn'); const randomBtn = document.getElementById('random-btn'); const details = document.getElementById('color-details'); function updateFromInputs() { const r = toHex(clamp(fromHex(inputs.r.value), 0, 255)); const g = toHex(clamp(fromHex(inputs.g.value), 0, 255)); const b = toHex(clamp(fromHex(inputs.b.value), 0, 255)); inputs.r.value = r; inputs.g.value = g; inputs.b.value = b; const full = `#${r}${g}${b}`; hexOutput.value = full; preview.style.background = full; updateDetails(r, g, b); } function updateDetails(r, g, b) { const rv = parseInt(r, 16); const gv = parseInt(g, 16); const bv = parseInt(b, 16); const rgb = `rgb(${rv}, ${gv}, ${bv})`; const hsl = rgbToHsl(rv, gv, bv); details.textContent = `${rgb} • HSL ${hsl}`; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, 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; case b: h = (r - g) / d + 4; break; } h /= 6; } return `${Math.round(h * 360)}° ${Math.round(s * 100)}% ${Math.round(l * 100)}%`; } function stepChannel(channel, delta) { const inp = inputs[channel]; const v = clamp(fromHex(inp.value) + delta, 0, 255); inp.value = toHex(v); updateFromInputs(); inp.focus(); // position caret at end setTimeout(() => { inp.setSelectionRange(inp.value.length, inp.value.length); }, 0); } // Attach button listeners document.querySelectorAll('.spin').forEach(btn => { btn.addEventListener('click', (e) => { const action = btn.getAttribute('data-action'); const channelEl = btn.closest('.channel'); const channel = channelEl.getAttribute('data-channel'); if (action === 'up') stepChannel(channel, 1); if (action === 'down') stepChannel(channel, -1); }); }); // Input behaviors Object.keys(inputs).forEach(key => { const inp = inputs[key]; inp.addEventListener('input', (e) => { // keep only hex characters and max 2 chars, uppercase const val = inp.value.toUpperCase().replace(/[^0-9A-F]/g, '').slice(0, 2); inp.value = val; }); inp.addEventListener('blur', () => { // pad with 0 if needed const v = inp.value; if (v.length === 0) { inp.value = '00'; } else if (v.length === 1) { inp.value = '0' + v; } updateFromInputs(); }); inp.addEventListener('keydown', (ev) => { if (ev.key === 'ArrowUp') { ev.preventDefault(); stepChannel(key, 1); } else if (ev.key === 'ArrowDown') { ev.preventDefault(); stepChannel(key, -1); } else if (ev.key === 'Enter') { ev.preventDefault(); inp.blur(); } }); inp.addEventListener('paste', (ev) => { ev.preventDefault(); const text = (ev.clipboardData || window.clipboardData).getData('text').toUpperCase(); const match = text.match(/[0-9A-F]{2}/); if (match) { inp.value = match[0]; updateFromInputs(); } }); }); copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(hexOutput.value); copyBtn.textContent = 'Copied'; setTimeout(() => copyBtn.textContent = 'Copy', 1200); } catch (err) { // fallback hexOutput.select(); document.execCommand('copy'); copyBtn.textContent = 'Copied'; setTimeout(() => copyBtn.textContent = 'Copy', 1200); } }); randomBtn.addEventListener('click', () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); inputs.r.value = toHex(r); inputs.g.value = toHex(g); inputs.b.value = toHex(b); updateFromInputs(); }); // Initialize updateFromInputs(); })();