Hex Digit Color Code Calculator

:root { --bg: #0f1724; --card: #0b1220; --muted: #9aa4b2; --accent: #60a5fa; --white: #ecf0f3; --gap: 12px; font-size: 16px; } * { 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%, #071428 100%); color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 24px; } .wrap { max-width: 900px; margin: 24px auto; display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; padding: 18px; box-shadow: 0 6px 20px rgba(2,6,23,0.6); } header.app-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; } header h1 { font-size: 1.1rem; margin: 0; letter-spacing: -0.2px; } header p { margin: 0; color: var(--muted); font-size: 0.9rem; } .controls { display: flex; gap: 12px; align-items: center; margin-bottom: var(--gap); flex-wrap: wrap; } .selectors { display: flex; gap: 10px; align-items: center; } .digit { width: 56px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; outline: none; } .digit:focus-within, .digit.focused { box-shadow: 0 0 0 3px rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.16); } .digit .btn { width: 100%; background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 6px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; } .digit .btn:active { transform: translateY(1px); } .digit .value { font-size: 20px; font-weight: 700; letter-spacing: 1px; width: 100%; text-align: center; color: var(--white); } .manual { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .manual input[type="text"] { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); color: var(--white); padding: 10px 12px; border-radius: 10px; width: 180px; font-weight: 600; font-family: inherit; } .manual .btn { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color: var(--white); cursor: pointer; font-weight: 600; } .preview { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 16px; } .swatch { width: 220px; height: 220px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 30px rgba(2,6,23,0.6); transition: background-color 160ms linear, border-color 160ms linear; } .hex-display { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-weight: 700; color: var(--white); background: rgba(255,255,255,0.02); border-radius: 8px; padding: 8px 12px; display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,0.04); } .muted { color: var(--muted); font-size: 0.9rem; } footer.hint { grid-column: 1 / -1; margin-top: 18px; color: var(--muted); font-size: 0.9rem; display: flex; justify-content: center; } @media (max-width: 880px) { .wrap { grid-template-columns: 1fr; } .preview .swatch { width: 180px; height: 180px; } .selectors { gap: 8px; } .digit { width: 48px; } .manual input[type="text"] { width: 140px; } } const HEX_CHARS = '0123456789ABCDEF'.split(''); const DIGITS = 6; function clampIdx(i) { const m = i % HEX_CHARS.length; return m < 0 ? m + HEX_CHARS.length : m; } function createSelectors(container) { for (let i = 0; i < DIGITS; i++) { const d = document.createElement('div'); d.className = 'digit'; d.dataset.index = i; d.tabIndex = 0; const up = document.createElement('button'); up.type = 'button'; up.className = 'btn up'; up.textContent = '▲'; up.title = 'Increase'; const val = document.createElement('div'); val.className = 'value'; val.textContent = '0'; const down = document.createElement('button'); down.type = 'button'; down.className = 'btn down'; down.textContent = '▼'; down.title = 'Decrease'; d.appendChild(up); d.appendChild(val); d.appendChild(down); container.appendChild(d); } } function getHexFromDigits() { const nodes = document.querySelectorAll('.digit .value'); return Array.from(nodes).map(n => n.textContent).join(''); } function setDigitsFromHex(hex) { hex = hex.toUpperCase().replace(/^#/, ''); if (!/^[0-9A-F]{6}$/.test(hex)) return; const nodes = document.querySelectorAll('.digit .value'); nodes.forEach((n, idx) => { n.textContent = hex[idx]; }); updateUI(); } function updateUI() { const hex = getHexFromDigits(); const swatch = document.querySelector('.swatch'); const hexDisplay = document.querySelector('.hex-code'); swatch.style.backgroundColor = `#${hex}`; const contrast = getContrastColor(hex); hexDisplay.textContent = `#${hex}`; hexDisplay.style.color = contrast; } // Simple luminance-based contrast: returns black or white function getContrastColor(hex) { const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); // relative luminance const lum = 0.2126 * srgb(r) + 0.7152 * srgb(g) + 0.0722 * srgb(b); return lum > 0.5 ? '#0b1220' : '#ffffff'; } function srgb(c) { c = c / 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); } function incrementDigit(node, delta) { const valNode = node.querySelector('.value'); const cur = valNode.textContent.toUpperCase(); const idx = HEX_CHARS.indexOf(cur); const next = HEX_CHARS[clampIdx(idx + delta)]; valNode.textContent = next; updateUI(); syncManualInput(); } function syncManualInput() { const input = document.querySelector('#manual-hex'); input.value = `#${getHexFromDigits()}`; } function attachHandlers() { document.querySelectorAll('.digit').forEach((d) => { d.addEventListener('click', (e) => { // If clicking buttons, let their handlers manage if (e.target.classList.contains('btn')) return; d.focus(); }); const up = d.querySelector('.up'); const down = d.querySelector('.down'); up.addEventListener('click', () => incrementDigit(d, 1)); down.addEventListener('click', () => incrementDigit(d, -1)); // support hold for faster increment let timer = null; const startHold = (dir) => { if (timer) clearInterval(timer); incrementDigit(d, dir); timer = setInterval(() => incrementDigit(d, dir), 120); }; const stopHold = () => { if (timer) { clearInterval(timer); timer = null; } }; up.addEventListener('mousedown', (e) => { e.preventDefault(); startHold(1); }); up.addEventListener('mouseup', stopHold); up.addEventListener('mouseleave', stopHold); down.addEventListener('mousedown', (e) => { e.preventDefault(); startHold(-1); }); down.addEventListener('mouseup', stopHold); down.addEventListener('mouseleave', stopHold); // keyboard support on the digit container d.addEventListener('keydown', (e) => { if (e.key === 'ArrowUp') { e.preventDefault(); incrementDigit(d, 1); } else if (e.key === 'ArrowDown') { e.preventDefault(); incrementDigit(d, -1); } else if (/^[0-9a-fA-F]$/.test(e.key)) { e.preventDefault(); const key = e.key.toUpperCase(); if (HEX_CHARS.includes(key)) { d.querySelector('.value').textContent = key; updateUI(); syncManualInput(); // focus next digit const next = d.nextElementSibling; if (next && next.classList.contains('digit')) next.focus(); } } else if (e.key === 'ArrowRight') { e.preventDefault(); const next = d.nextElementSibling; if (next && next.classList.contains('digit')) next.focus(); } else if (e.key === 'ArrowLeft') { e.preventDefault(); const prev = d.previousElementSibling; if (prev && prev.classList.contains('digit')) prev.focus(); } else if (e.key === 'Backspace' || e.key === 'Delete') { e.preventDefault(); d.querySelector('.value').textContent = '0'; updateUI(); syncManualInput(); } }); d.addEventListener('focus', () => d.classList.add('focused')); d.addEventListener('blur', () => d.classList.remove('focused')); }); const manual = document.querySelector('#manual-hex'); manual.addEventListener('input', (e) => { const val = e.target.value.toUpperCase().replace(/[^0-9A-F#]/g, ''); e.target.value = val; }); manual.addEventListener('change', (e) => { const v = e.target.value.toUpperCase(); if (/^#?[0-9A-F]{6}$/.test(v)) { setDigitsFromHex(v); } else { // invalid: revert to current digits e.target.value = `#${getHexFromDigits()}`; } }); const btnCopy = document.querySelector('#copy-btn'); btnCopy.addEventListener('click', async () => { const hex = `#${getHexFromDigits()}`; try { await navigator.clipboard.writeText(hex); btnCopy.textContent = 'Copied'; setTimeout(() => btnCopy.textContent = 'Copy', 1200); } catch (err) { btnCopy.textContent = 'Failed'; setTimeout(() => btnCopy.textContent = 'Copy', 1200); } }); } // initialize defaults and attach document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.selectors'); createSelectors(container); // default: all zeros document.querySelectorAll('.digit .value').forEach((v) => v.textContent = '0'); updateUI(); attachHandlers(); // manual input default document.querySelector('#manual-hex').value = `#${getHexFromDigits()}`; }); Hex Digit Color Code Calculator

Manual hex

Tip: focus a digit and use ArrowUp / ArrowDown or type a hex char.

Select digits